プロンプト
Largest Contentful Paint 要素は通常、レスポンシブなヒーロー画像です。実験、ロールバック、アクセシビリティの要件を含め、fetchpriority、loading、preload、srcset を使用した最適化を設計してください。
シナリオと制約
デスクトップとモバイルで異なるLCP画像が使用され、同時にページはフォント、クリティカルCSS、アナリティクスも読み込みます。ブラウザは自身でリソースのスケジュールを設定し、優先度はヒントにすぎません。実装の動作はすべての環境で同一ではありません。
この設問がテストするもの
候補者は、検出のタイミング、読み込み戦略、リクエストの優先度を区別できる必要があります。fetchpriority=high はリソースの相対的なキュー優先度を上げ、loading=eager/lazy は遅延を制御し、preload はリソースを早期に宣言します。これらを組み合わせると、リクエストが重複したり、CSSやフォントのリソースが枯渇したりする可能性があります。
参考アプローチ
フィールドデータとパフォーマンスパネルを使用して、LCP要素とリクエストチェーンを特定します。ファーストビュー（above-the-fold）にあることが確認されたLCP画像にのみ高い優先度を設定します。srcset と sizes を使用して適切なアセットを1つ選択し、デスクトップとモバイルの両方の候補をプリロードしないでください。画像リストに高い優先度を設定することは避け、ヒーロー画像を遅延読み込み（lazy-load）しないでください。トラフィックを拡大する前に、LCP、クリティカルCSSの完了、合計バイト数、ロングタスクについて実験を行います。
重要な詳細
レスポンシブの候補は、プリロードの imagesrcset および imagesizes と一致している必要があります。一致していない場合、ある画像がプリロードされ、別の画像がレンダリングされる可能性があります。ローエンドデバイスや低速ネットワークで、ネットワークの優先度、イニシエータ、キャッシュヒット、リクエスト順序を調査します。フィチャースイッチとロールバックバージョンを保持してください。
よくある落とし穴
high を強制ダウンロードとして扱うこと、すべての画像に high を設定すること、適切な画像マークアップの代わりに preload を使用すること、Lighthouse のみを確認すること、alt、寸法、クロスオリジンキャッシュを無視すること、またはベースラインなしで改善を主張すること。
評価基準
優れた回答は、ブラウザ間の差異を認識しつつ、LCPの選択、優先度の競合、レスポンシブの一貫性、実験指標、およびロールバックゲートを説明します。不十分な回答は、リクエストキューやフィールドの成果を検証することなく、単一の属性を挙げるにとどまります。
フォローアップの質問
どのような場合に fetchpriority を使わずに preload を使用しますか？
リソースをHTML内で早期に検出できず、真に早期のリクエストが必要な場合に preload を検討します。ブラウザがすでに画像を迅速に検出している場合は、より控えめな優先度ヒントの方がロールバックしやすい可能性があります。どちらの選択肢も測定してください。
LCPは改善されたものの、フォントの読み込みが遅くなった場合はどうしますか？
クリティカルCSS、フォント、画像の要求順序と帯域幅を比較します。重要でない画像の優先度を下げるか、重複した preload を削除し、フォントの読み込みを調整して、再度測定します。
画像を最適化しながらアクセシビリティを維持するにはどうすればよいですか？
レイアウトのずれを防ぐために、正確な alt テキストと明示的な寸法または aspect-ratio プレースホルダーを維持します。低帯域幅環境や画像が無効になっている場合でも意味のあるコンテンツが残るようにし、支援技術を使用してテストします。