レスポンシブ画像レイテンシ予算 2025 — レンダーパスの健全性を可視化する

レスポンシブ画像のスタックは CDN、エッジワーカー、CMS、端末側ヒューリスティクスまで広がります。明示的なレイテンシ予算がなければ、ヒーロー画像は LCP を外し、ロングテール端末では体感が急落します。本稿では、ブレークポイントごとに予算を割り当て、トレーシングと結びつけ、数値が崩れた瞬間にリリースを止める方法を解説します。

TL;DR

• まずサーフェスを棚卸し：ホームヒーロー、記事内画像、ギャラリー、メールなど。サーフェス × 回線クラスごとに予算を設定。
• 信頼できる数値を合成監視と実測両方から取得し、Performance Guardian に流し込んでドリフトを即座に把握。
• 予算をデリバリーレバーに結合：preconnect、priority hint、フォーマット構成、レスポンシブブレークポイント。
• p95 が予算から外れたら Image Quality Budgets & CI Gates とロードベースラインで リリースを即停止。

予算アーキテクチャ

常に更新されるマニフェストを用意します。srcset 定義の近くに置き、ブレークポイントと予算を同時に進化させます。

サーフェス	予算 (p95)	デバイス	メモ
ホームヒーロー	2400 ms	デスクトップ / Wi‑Fi	ヒーローを preload、AVIF/WebP 配信、クリティカル CSS < 25 KB
ホームヒーロー	3200 ms	モバイル / 4G	fetchpriority="high"、ブロッキング JS 回避、支配色プレースホルダーを inline
記事内 inline	1800 ms	全端末	レスポンシブサイズは 2 種まで、ネイティブ lazyload
ギャラリーモーダル	2000 ms	デスクトップ	1 枚目を eager、次の 2 枚を prefetch
メールヘッダー	1200 ms	全端末	width/height を inline、最大幅 1200 px

エスカレーションルール用の列も持たせましょう。例：モバイルヒーローが 3 デプロイ連続で超過したら、まず CDN のスマート変換を巻き戻し、次にヒーロースケジューリングを点検。

ステップ1 — 実測を網羅

1. PerformanceObserver でヒーローレンダーを監視し、largest-contentful-paint をトレーシング層へ送信。
2. カスタム属性を付与：surface=homepage-hero、variant=A/B、connection=4g。
3. 同じラベルを合成監視でも使い、ラボ vs 実測を同じ ID で比較。
4. Performance Guardian に週次エクスポートを取り込み、サーフェスごとの p95 と予算を記録。

ヒント：ラボ用プローブは専用リージョンに置き、CDN ウォームアップで本当のリグレッションが隠れないようにする。

ステップ2 — 予算をデリバリー施策に結合

ボトルネックから着手します。

• ブレークポイント：sizes/srcset を棚卸し。使われない幅を削り、モバイルヒーローの DPR は 2x までに。
• フォーマット：AVIF/WebP 交渉を有効化し、失敗時のみ JPEG にフォールバック。
• 優先度：主要ヒーローに <link rel="preload">、重要な inline 画像に fetchpriority="high"。
• プレースホルダー：レイアウトを安定させるため レスポンシブ・プレースホルダー を配信。

どのレバーがどの予算を動かすかを記録。例：画像 CDN への preconnect は 4G の first byte を 150〜250 ms 削ることが多い。

ステップ3 — ガードレール自動化

• CI 予算チェック：新たなブレークポイントが許容バイト数を超えたら Image Quality Budgets CI Gates が失敗するよう設定。
• コンテンツガバナンス：width/height メタデータや alt テキストのない CMS 公開をブロック。CLS/INP を守り、予算レビューを高速化。
• インシデントプレイブック：サーフェスごとにロールバック手順を作成。ヒーロー p95 が 3.3 s に達したら、ブレークポイントを戻すかパーソナライズを止めるか、順番を明確に。

ステップ4 — マニフェスト共有

レイテンシマニフェストをプロダクト、デザイン、パートナーに公開。併せて以下を添付。

• 四半期レビュー（グリーンを維持した項目・アラートを出した項目）。
• 主なリグレッションと根本原因。
• 予定している最適化（例：ヒーロー動画ポスターを AVIF 化）。

チームが予算レジャーを理解すれば、主体的に守り抜けます。