First Contentful Paint (FCP) とは

最終更新日:2022年11月2日公開日:2021年8月19日 2021/08

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.

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

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

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

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

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

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