- SEO
- 更新日:
2021年6月に実施されたページエクスペリエンスアップデートで、コアウェブバイタル(Core Web Vitals)が検索ランキング要因に組み込まれるなど、昨今のSEOにおいて、ページ表示速度の改善はより一層大切になってきました。
また、コアウェブバイタル以外にも、ページスピードに関連する指標は多数あり、その内の一つがFCPです。FCPを知っているか知らないかで、のコンテンツにおけるユーザー体験の質を左右します。
本記事では、FCPとは「何を表しているのか・どう測定するのか・どう改善するのか」について詳しく解説していきます。
- 「FCP」はページ内の何らかのコンテンツが最初に表示されるまでの時間であり、1秒未満が高速の目安。
- 「PageSpeed Insights」等のツールを用い、テスト環境でのシミュレーション数値を測定して現状を把握する。
- 画像サイズを 「width」 や 「height」 で指定し、読み込み前の領域確保でレイアウト崩れを防ぐ。
- 「Webフォント」の使用を最小限に抑え、プロパティの最適化や非同期ロードで描画遅延を回避する。
- サーバー応答速度を改善するため、高性能サーバーへの移転や「CDN」の活用、キャッシュ利用を検討する。
無料SEO診断、受付中!
「なかなか順位が上がらない…」「今の代理店の対策が正しいか知りたい…」
など、SEO対策でお悩みの方に、50項目以上の無料SEO診断を実施しています。毎月先着10社限定で、経験豊富なSEOコンサルタントが改善のヒントをお届けします!
以下のリンクから、お気軽にお申し込みください!
目次
FCPとはURLがクリックされてからレンダリングするまでの時間
FCP(First Contentful Paint)とは、ユーザーがURLをクリックしてから、サイトがレンダリングを開始する(データを読み込んでブラウで表示を開始する)までの時間を指します。
FCPは秒数で表し、速度の分類については、0~1 秒未満の場合は「高速」、1以上~2.5 秒の場合は「平均」、2.5 以上の場合は「低速」とされています。
なお、似た言葉にLCPがありますが、LCP(Largest Contentful aint)は、ユーザーがページ内にアクセスしてから、メインコンテンツを見ることができるようになるまでの時間を指します。
LCPについては下記の記事で解説しております。
そもそもFCPやFP、FMPとは?違いは?
サイト表示スピード改善で出てくる「FCP」、「FP」、「FM」という言葉ですが、それぞれの違いを明確に説明できますか?
まずは、これらの意味の違いについて解説します。
FCP(First Contentful Paint)
FCP(First Contentful aint)は、ページの読み込みが始まってから、ページ内のコンテンツのいずれかの部分が画面上にレンダリングされるまでの時間のことです。
ページ内のいずれかのコンテンツが表示されたときのことを指しています。そのページの主要な情報とは限らず、ヘッダーやメニューの可能性あります。
参考:https://web.dev/i18n/ja/cp/
FP (First Paint)
FP (First Paint)は、標準化しつつあるPaint Timing API 指標の一つで、ウェブページにこれまでとは違う何かしらのコンテンツがレンダリングされたタイミングのことです。
ユーザー体験(ユーザーが感じる便利さ)を向上させるためのパフォーマンス指標として活用できます。
参考:https://qiita.com/yoheimuta/items/10cb9cb0f857c687f976
FMP (First Meaningful Paint)
FMP (First Meaningful Paint)は、ウェブサイトの主要なコンテンツがレンダリングされたタイミングを示す指標です。
FCPがコンテンツのいずれかの部分、FPが視覚的に異なる何らかのコンテンツが表示されるタイミングを表すのに対し、EMPはそのページのメイとなるコンテンツが表示されたタイミングを測ります。
参考:ttps://www.perfmatrix.com/first-meaningful-paint/
ユーザーが表示速度として認識する部分はFMP
ユーザーがサイトの表示速度として認識するのは、コンテンツとして意味のある部分が表示されるFMP (First Meaningful Paint)と考えるのが妥当でしょう。
FP (First Paint)やFCP(First Contentful Paint)は機械的に判断できる部分であり、FMP (First Meaningful Paint)、ユーザーがページ表示されたと判断できる部分といえば、多少わかりやすくなるでしょうか。
ケイティー・ヘンピニウス(Katie Hempenius)氏の解説ツイートは以下の通りとなっています。
TLDR; of Paint Metrics
– First Paint (FP):
hen *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) October 21, 2019
コンテンツの定義はページによって異なります。
簡単に説明すると、ブログ記事の場合は見出しとファーストビューのフォントが適応されたテキスト、検索エンジンの場合は検索結果、ECの製ページなどの画像がないと意味がないページの場合は、その製品に関する画像が表示されます。
ページのヘッダーやグローバルナビゲーションが表示されていたり、アイコンだけが示されていたりするだけではFMPとはみなされません。






