First Contentful Paint（FCP）は、Lighthouse レポートの [パフォーマンス] セクションでトラッキングされる 6 つの指標の 1 つです。各指標は、ページの読み込み速度の特定の側面をキャプチャします。
Lighthouse では、FCP は秒単位で表示されます。
FCP で測定される内容
FCP は、ユーザーがページに移動した後、ブラウザが最初の DOM コンテンツをレンダリングするまでに要する時間を測定します。ページ上の画像、白色以外の <canvas> 要素、SVG は DOM コンテンツと見なされます。iframe 内のものは含まれません。
Lighthouse が FCP スコアを決定する仕組み
FCP スコアは、HTTP Archive のデータに基づいて、ページの FCP 時間と実際のウェブサイトの FCP 時間を比較したものです。たとえば、99 パーセンタイルのサイトは、FCP を約 1.2 秒でレンダリングします。ウェブサイトの FCP が 1.2 秒の場合、FCP スコアは 99 になります。Lighthouse スコアのしきい値の設定方法については、指標スコアの決定方法をご覧ください。
次の表に、FCP スコアの解釈方法を示します。
| FCP 時間 （秒） |
色分け |
|---|---|
| 0 ～ 1.8 | 緑（高速） |
| 1.8 ～ 3 | オレンジ（中程度） |
| 3 年以上前 | 赤（遅い） |
FCP スコアを改善する方法
FCP で特に重要な問題の 1 つは、フォント読み込み時間です。フォントの読み込みを高速化する方法については、Web フォント読み込み中のテキストの表示をご覧ください。
実際のユーザーのデバイスで FCP をトラッキングする
ユーザーのデバイスで FCP が実際に発生したタイミングを測定する方法については、Google のユーザー中心のパフォーマンス指標のページをご覧ください。FP/FCP のトラッキングのセクションでは、プログラムで FCP データにアクセスして Google アナリティクスに送信する方法について説明します。
実際のユーザーの指標の収集について詳しくは、Google のNavigation Timing と Resource Timing を使用して実際の読み込みのパフォーマンスを評価するをご覧ください。
全体的なパフォーマンス スコアを改善する方法
特定の指標に注目する明確な理由がない限り、通常は全体的なパフォーマンス スコアの改善に重点を置く必要があります。
Lighthouse レポートの [診断] セクションを使用して、ページにとって最も価値の高い改善を特定します。改善の余地が大きいほど、パフォーマンス スコアへの影響は大きくなります。たとえば、次の Lighthouse のスクリーンショットでは、レンダリングをブロックするリソースを削除することで最も大きな改善が見込めることがわかります。
![Lighthouse: 監査の数とその影響が表示される [診断] セクション](https://developer.chrome.google.cn/static/docs/lighthouse/images/lighthouse-diagnostics.png?authuser=4&hl=ja)
Lighthouse レポートで特定された最適化案に対処する方法については、パフォーマンス監査をご覧ください。