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 と Resource Timing を使用して実際の読み込みパフォーマンスを評価するをご覧ください。Lighthouse の監査でカスタム速度のマークと測定を設定すると、カスタム速度のデータをレポートで確認できます。

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

特定の指標に焦点を当てる特別な理由がない限り、通常は全体的なパフォーマンス スコアの改善に集中することをおすすめします。

Lighthouse レポートの [最適化] セクションを使用して、ページにとって最も価値のある改善点を特定してください。最適化案が大きいほど、パフォーマンス スコアへの影響も大きくなります。たとえば、以下の Lighthouse のスクリーンショットは、レンダリング ブロック リソースを削除することで最大の改善が得られることを示しています。

Lighthouse レポートで特定された機会に対処する方法については、パフォーマンス監査のランディング ページをご覧ください。

リソース

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