First Contentful Paint (FCP) とは

PageSpeed Insights 対策の一環．他の対策は以下を見てください．

• Youtube の動画を複数埋め込みしたページの高速化
• オフスクリーン画像の遅延読み込み
• ウェブフォント読み込み中のテキストの表示
• 次世代フォーマットでの画像の配信
• 「第三者コードの影響を抑えてください」と言われたとき
• CLS (Cumulative Layout Shift) とは
• LCP (Largest Contentful Paint) とは
• 「静的なアセットと効率的なキャッシュポリシーの配信」について
• FID (First Input Delay) とは

FCPとは(最初のコンテンツ描画とは)

PageSpeed Insights に出てくる First Contentful Paint

解説ページである First Contentful Paint を見てみると

First Contentful Paint は「最初のコンテンツ描画にかかるまでの時間」のこと．

「ユーザーがページに移動した後、ブラウザーがDOMコンテンツの最初の部分をレンダリングするのにかかる時間を測定します」と書いてある通り，ページを開いてから何らかの表示がされるまでの時間を表す．

表示がなかなかはじまらないとイライラが始まるので妥当な指標と言える．

FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page.

First Contentful Paint の改善

FCP のスコアを改善する方法だが，先ほどのページでは「フォントの読み込み時間」に気をつけなさいと言っている．

となれば，参考になるのは以下のページとなる．

「ウェブフォント読み込み中のテキストの表示」問題の解決方法

それでも改善されない場合は下の図をみてもらえば分かると思うが，結局，javascript や css の読み込みを如何に減らすか，後ろに回すかということになる．

開発者ツールで「Performance」を選択して，更新してみたところ

「FCP 1373.8ms」と書いてあるところが最初に描画された時となるが，上の読み込んでいるファイルを見ると，css や js となっているのが分かる．
要はこれをどうにかするしかない．