ページ表示速度改善で出る「FP」「FCP」「FMP」とは？

ページ表示速度改善で出てくるFPとかFCPとかFMPって何？ わかりやすく解説

ページ表示速度のパフォーマンス改善で、次のような用語を見たことがあるだろう。

First Paint (FP)
FCP (First Contentful Paint)
First Meaningful Paint (FMP)
いずれも「描画」に関することなのだが、それぞれどう違うのか具体的にちゃんと説明できるだろうか？

■グーグルのケイティー・ヘンピニウス氏

●First Paint (FP)：それまでとは視覚的に何か違うものがレンダリングされたとき
具体的には、ページにアクセスしたときに何らかの視覚要素が表示されたときだ。背景色かもしれないし、ヘッダー部分を分ける仕切り線かもしれない。●FCP (First Contentful Paint)：何らかのDOMコンテンツがレンダリングされたとき
具体的には、何らかのコンテンツと呼べるものが表示されたときだ。とはいえそれがページの主要な情報とは限らない。ヘッダーかもしれないし、メニューバーかもしれない。

●First Meaningful Paint (FMP)：コンテンツとして意味がある要素がレンダリングされたとき
具体的には、そのページのメインとなるコンテンツが表示されたときだ。指標の設計では、次のように解説している：
『メインとなるコンテンツの定義はページによって異なる：
●ブログ記事の場合： 見出しとファーストビューのテキスト（フォントが読み込まれてテキストが表示されている状態）
●検索エンジンの場合： 検索結果
●画像がないと意味をなさない場合（ECの製品ページなど）： その画像
ページのヘッダーやナビゲーションだけが表示されていたり、読み込み中アイコンが表示されていたりするだけではFMPとはみなさない。』

TLDR; of Paint Metrics

- First Paint (FP):
when *anything visually different than before* is rendered

- First Contentful Paint (FCP):
when *any DOM content* is rendered

- First Meaningful Paint (FMP):
when *meaningful content* is rendered pic.twitter.com/CmWY4W0jKB

— Katie Hempenius (@katiehempenius) 2019年10月21日

要はページ表示速度の指標としてユーザーにとって最も重要なのは First Meaningful Paint (FMP) だと考えておけばいいだろう。というよりは、ユーザー体験のキーとなる指標を、技術的な困難を乗り越えて定めたというのが真相のようだ。

というのも、「First Paint (FP)」や「FCP (First Contentful Paint)」は機械的に判断できるが、「First Meaningful Paint (FMP)」は単純なものではなく、さまざまなパターンをもとにどう測定するかを検討して決められたものなのだ。

SEOコンサルタントのまとめ

開発者系の方でないとなかなか難しいですね。。。