First Meaningful Paint

ファースト メタネイジング ペイント（FMP）は、Lighthouse レポートの [パフォーマンス] セクションで追跡される 6 つの指標の 1 つです。各指標は、ページの読み込み速度の特定の側面をキャプチャします。

Lighthouse では、FMP は秒単位で表示されます。

FMP で測定される内容

FMP は、ページの主要なコンテンツがユーザーに表示されるまでにかかった時間です。FMP の元のスコアは、ユーザーがページの読み込みを開始してから、ページがメインの折り返しコンテンツをレンダリングするまでの時間（秒単位）です。FMP は、基本的に、折り返しの上のレイアウトが最も大きく変更された後のペイントのタイミングを示します。FMP の技術的な詳細については、Google のTime to First Meaningful Paint: a layout-based approach をご覧ください。

ページでレンダリングされる最初のコンテンツにスクロールせずに見える範囲のコンテンツが含まれている場合、First Contentful Paint（FCP）と FMP は同じになることが多いです。ただし、iframe 内に折り返しの上にコンテンツがある場合など、これらの指標は異なる場合があります。FMP は、iframe 内のコンテンツがユーザーに表示されたときに登録されますが、FCP には iframe コンテンツは含まれません。

Lighthouse が FMP スコアを決定する仕組み

FCP と同様に、FMP は HTTP アーカイブの実際のウェブサイトのパフォーマンス データに基づいています。

FMP と FCP が同じ場合、スコアは同じになります。ページに iframe コンテンツが含まれている場合など、FMP が FCP の後に発生すると、FMP スコアは FCP スコアよりも低くなります。

たとえば、FCP が 1.5 秒、FMP が 3 秒だとします。FCP スコアは 99 ですが、FMP スコアは 75 です。

次の表に、FMP スコアの解釈方法を示します。

FMP スコアを改善する方法

サイトの Largest Contentful Paint を改善する方法をご覧ください。FMP を改善するための戦略は、Largest Contentful Paint を改善するための戦略とほぼ同じです。

実際のユーザーのデバイスで FMP をトラッキングする

ユーザーのデバイスで FMP が実際に発生したタイミングを測定する方法については、Google のユーザー中心のパフォーマンス指標のページをご覧ください。ヒーロー要素を使用した FMP のトラッキングのセクションでは、FCP データにプログラムでアクセスして Google アナリティクスに送信する方法について説明します。

実際のユーザーの指標の収集について詳しくは、Google のNavigation Timing と Resource Timing を使用して実際の読み込みのパフォーマンスを評価するをご覧ください。ユーザー タイミングのマークと測定値の Lighthouse 監査では、レポートにユーザー タイミング データを表示できます。

全体的なパフォーマンス スコアを改善する方法

特定の指標に注目する明確な理由がない限り、通常は全体的なパフォーマンス スコアの改善に重点を置く必要があります。

Lighthouse レポートの [診断] セクションを使用して、ページにとって最も価値の高い改善を特定します。改善の余地が大きいほど、パフォーマンス スコアへの影響は大きくなります。たとえば、次の Lighthouse のスクリーンショットでは、レンダリングをブロックするリソースを削除することで最も大きな改善が見込めることがわかります。

Lighthouse レポートで特定された最適化案に対処する方法については、パフォーマンス監査をご覧ください。

リソース

• First Meaningful Paint 監査のソースコード
• Lighthouse v3 スコアリング ガイド
• Time to First Meaningful Paint: レイアウトベースのアプローチ
• Largest Contentful Paint