パフォーマンス最適化ガイド｜Web & スマホアプリ

概要

体感速度は「ネットワーク × レンダリング × 実行時間 × 入出力 × 省電力」の掛け算。 Webは Core Web Vitals（LCP / CLS / INP） を指標に、スマホは 起動時間 / スクロール滑らかさ / メモリ / 電池 を重視します。

Webアプリスマホアプリネットワーク最適化レンダリングプロファイリング

Webアプリで見る数値（例）

LCP（最大コンテンツ表示）2.5s以下を目標

INP（応答性）200ms以下を目標

CLS（視覚の安定性）0.1以下を目標

TTFBバックエンド/配信の指標

スマホアプリで見る数値（例）

Cold/Warm Start初回/再開起動時間

Frame Time16.7ms以下（60fps）

Memory Footprintスパイク抑制・リーク対策

Energy無駄なWake/ループ削減

基本（考え方）

Webアプリの基本原則

HTTP応答を速く（TTFB改善、CDN/キャッシュ/圧縮）
送る量を減らす（コード分割、画像最適化、Critical CSS）
早く見せる（プリロード、優先度ヒント、上位コンテンツ先描画）
JSは必要最小限（defer/async、不要ライブラリ削減）

スマホアプリの基本原則

起動パスの最短化（遅延初期化・オンデマンドロード）
メインスレッドを塞がない（I/O/JSON/画像は非同期）
描画最適化（再計算・再レイアウトの抑制、軽量レイアウト）
監視と計測（Instruments/Profiler/トレース）

基礎（具体テクニック）

ネットワーク最適化

HTTP/2 or HTTP/3、TLS1.3
Gzip/Brotli圧縮、ETag & Cache-Control
画像: AVIF/WebP + サイズ適応（srcset）
フォント: サブセット化 + font-display: swap

レンダリング最適化

Critical CSS、下位リソースは遅延
スタイル/レイアウトのスラッシング防止
アニメはCSSトランスフォーム/不透明度中心に

JavaScript最適化

Tree Shaking、Dynamic Import
第三者スクリプトの棚卸し
Long Taskの分割、Web Worker活用

PHPサンプル：キャッシュ＆生成時間

<?php
$start = microtime(true);
// ここでDBやAPI呼び出し等を実行
usleep(15000); // デモ: 15ms待機
$gen = round((microtime(true) - $start) * 1000, 2);
header("Cache-Control: public, max-age=300");
echo "生成時間: {$gen} ms";
?>

応用（ツール＆ワークフロー）

計測/可視化

Lighthouse / WebPageTest / RUM（実ユーザ計測）
ブラウザ Performance / Coverage / Performance Insights
Long Task / Paint Timing / Resource Timing

改善フロー

ボトルネック特定（TTFB? LCP? INP?）
対策案のABテスト or Canary
モニタリング継続（しきい値アラート）

発展（設計戦略）

配信アーキテクチャ

CDNエッジでのキャッシュ/変換（画像リサイズ、HTMLキャッシュ）
SSR + ストリーミング + 部分ハイドレーション
バックエンドのN+1/クエリ最適化、接続プール、キュー

スマホの高度最適化

起動時に不要なDI/ログ初期化を遅延
画像/JSONの事前フェッチとオンメモリキャッシュ
描画バッチング、差分更新、メモリ圧時の解放戦略

計測ラボ（ブラウザでその場計測）

※ローカル環境/端末条件に依存します。ページを操作しつつ数値を更新してください。

⚡ パフォーマンス最適化ガイド（Web / スマホ）

概要