First Contentful Paint (FCP) とは

最終更新日: 公開日: 2021年08月
PageSpeed Insights 改善方法

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

PageSpeed Insights に出てくる First Contentful Paint

originsummary

解説ページである 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 となっているのが分かる.
要はこれをどうにかするしかない.

PageSpeed Insights 対策

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

Contact

ご質問等ありましたら,お手数ですが弊社の個人情報保護方針をお読み頂いた上でフォームからお願い致します.
※このページと無関係な内容のセールスはご遠慮ください.

 
   
contact
Pagetop