遅いLCPをどう診断し、改善しますか？

Question

遅いLCPをどう診断し、改善しますか？

IT Interview Practice · Accepted Answer

まず**LCP要素が何か**と**なぜ遅いのか**を突き止めることから始めます。LCPは4つのサブパートに分解できます。最も大きいものを修正しましょう。 ## 診断: LCPの4つのサブパート ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] server when fetch STARTS download the image paint it ``` Chrome DevToolsとPageSpeed Insightsは、どのスライスが支配的かを示します。よくある原因: 遅いサーバー（TTFB）、遅れて発見されるLCP画像、あるいは描画を遅らせるレンダリングブロックのスクリプト/CSSです。 ## サブパート別の修正 - **遅いTTFB** → CDNでHTMLをキャッシュし、SSG/ISRを使い、オリジン/データベースを高速化します。 - **読み込み遅延（画像が遅れて発見される）** → プリロードして優先度を上げ、ブラウザがCSS/JSの後ではなく即座に取得するようにします: ```html

``` - **読み込み時間（画像が大きすぎる）** → AVIF/WebPで配信し、`srcset` で適切なサイズにし、圧縮します。 - **描画遅延** → レンダリングをブロックするCSS/JSを削り、クリティカルCSSをインライン化し、スクリプトを `defer` します。 ## 落とし穴 - LCP画像を遅延読み込みする（あるいはJSのハイドレーションの背後に隠す）こと — LCPにおける第1の自傷行為です。 - WebフォントがLCPテキストをブロックする。`font-display: swap` を使い、フォントを `preload` してください。 - 4G回線の実ユーザーが遅いままなのに、ラボのLCPを最適化してしまう。常にフィールドデータで確認してください。 ## なぜ重要なのか LCPは看板とも言える読み込み指標であり、検索ランキングの要因です。4つのサブパートを挙げ、それぞれを具体的な修正に対応づけられることは、まさに面接官が求める構造的で証拠に基づいたアプローチです。

診断: LCPの4つのサブパート

サブパート別の修正

落とし穴

なぜ重要なのか

関連する質問