First Meaningful Paint

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 が同じ場合、スコアは同じになります。FMP が FCP の後に発生する場合（ページに iframe コンテンツが含まれている場合など）、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 スコアリング ガイド
• First Meaningful Paint までの時間: レイアウト ベースのアプローチ
• Largest Contentful Paint