FCP（First Contentful Paint）とは？改善方法・低下原因・測定方法を解説

2021年6月に実施されたページエクスペリエンスアップデートで、コアウェブバイタル（Core Web Vitals）が検索ランキング要因に組み込まれるなど、昨今のSEOにおいて、ページ表示速度の改善はより一層大切になってきました。

また、コアウェブバイタル以外にも、ページスピードに関連する指標は多数あり、その内の一つがFCPです。FCPを知っているか知らないかで、そのコンテンツにおけるユーザー体験の質を左右します。

本記事では、FCPとは「何を表しているのか・どう測定するのか・どう改善するのか」について詳しく解説していきます。

FCPとはURLがクリックされてからレンダリングするまでの時間

FCP（First Contentful Paint）とは、ユーザーがURLをクリックしてから、サイトがレンダリングを開始する（データを読み込んでブラウザで表示を開始する）までの時間を指します。

FCPは秒数で表し、速度の分類については、0～1 秒未満の場合は「高速」、1以上～2.5 秒の場合は「平均」、2.5 秒以上の場合は「低速」とされています。

なお、似た言葉にLCPがありますが、LCP（Largest Contentful Paint）は、ユーザーがページ内にアクセスしてから、メインコンテンツを見ることができるようになるまでの時間を指します。

LCPについては下記の記事で解説しております。

参考：LCPの改善方法とは？測定に便利なツールや確認方法を解説

そもそもFCPやFP、FMPとは？違いは？

サイト表示スピード改善で出てくる「FCP」、「FP」、「FM」という言葉ですが、それぞれの違いを明確に説明できますか？

まずは、これらの意味の違いについて解説します。

FCP（First Contentful Paint）

FCP（First Contentful Paint）は、ページの読み込みが始まってから、ページ内のコンテンツのいずれかの部分が画面上にレンダリングされるまでの時間のことです。

ページ内のいずれかのコンテンツが表示されたときのことを指しています。そのページの主要な情報とは限らず、ヘッダーやメニューの可能性もあります。

参考：https://web.dev/i18n/ja/fcp/

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はそのページのメインとなるコンテンツが表示されたタイミングを測ります。

参考：https://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):
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) October 21, 2019

コンテンツの定義はページによって異なります。

簡単に説明すると、ブログ記事の場合は見出しとファーストビューのフォントが適応されたテキスト、検索エンジンの場合は検索結果、ECの製品ページなどの画像がないと意味がないページの場合は、その製品に関する画像が表示されます。

ページのヘッダーやグローバルナビゲーションが表示されていたり、アイコンだけが示されていたりするだけではFMPとはみなされません。

FCPの測定方法

GoogleはFCPを測定するツールを提供しています。それらについてみていきましょう。

Web Vitals

Google Chromeの拡張機能であるWeb Vitalsは、測定したいページをブラウザで表示すると右上に表示されます。

しかし、テスト環境におけるシミュレーションの結果を表示するデータであるため、本来のユーザーが取得したデータの結果と異なる数字が表示される可能性があり、注意が必要です。

PageSpeed Insights

PageSpeed Insightsにアクセスし、調査したいホームページのURLを入力して、分析をクリックします。

表示された数値結果から判定が可能です。

また、こちらもWeb Vitalsと同じで「テスト環境におけるシミュレーションの結果」のデータが表示されるため、注意が必要となります。

FCP低下の要因

FCPが低下する原因は下記の通りです。

• サーバー応答時間が長い
• 不要な画像・容量の重い画像が配置されている
• ファーストビューの表示に不要なファイルの読み込みが行われている
• Webフォントの読み込み

FCPを改善するには

では、これらのCLSの原因を改善するには何を行えばいいのでしょうか？ここからその改善方法について紹介します。

【改善方法①】画像サイズを指定する

ブラウザは画像よりもデータの軽いテキストから読み込みを始め、同時に画像の読み込みを開始します。

このため、画像サイズがwidth要素とheight要素で指定されていないと、ブラウザが画像を表示する範囲を判断できなくなり、レイアウトのズレに繋がります。

よって、サイズの指定がされていない画像が問題になる場合は、画像が読み込まれる前に画像を表示する範囲を予め確保することで、解決できます。

なお、cssアスクペクト比率を設定して、画像が表示される前から、予定する画像領域を確保することも有効です。

【改善方法②】広告表示領域を予約する

広告の表示範囲を指定することも、画像と同じで有効的です。

しかし、広告を最大サイズで予約をすると空白ができる可能性があります。その結果、ユーザーに違和感を与えることに繋がってしまうので注意が必要です。

広告は、コンテンツに適した画像サイズを予約することが重要です。

【改善方法③】Webフォントの使用を最小限に抑える

Webフォントとは、あらかじめWebサーバー上に置かれているフォントデータです。インターネット上で配布されているフォントデータ自体を読み込んで利用します。

ユーザー側の閲覧環境に影響されず、サイトの製作者が意図したとおりのデザインで閲覧してもらえるというメリットがあります。

一方で、FOUT（Flash of Unstyled Text）やFOIT（Flash of Invisible Text）が生じる可能性があるといったデメリットも存在するので注意しましょう。

FOUTとは、Webフォントがブラウザに読み込まれるまで代替フォントが表示される仕組みです。フォントが切り替わる際にレイアウトが崩れるため、CLSを低下させる要因となります。

また、FOITとは、Webフォントが読み込まれるまでテキストが表示されない現象のことを指します。こちらもCLSを低下させます。

これらの現象を防ぐためには、CSSプロパティやWebフォントのレンダリングの最適化を行うことが大切です。

WEBフォントを改善してサイトを高速化するおすすめの施策５選！

①WEBフォントの数を減らす
②遅延読み込みの設定
③リソースを圧縮化
④リソースを非同期でロード
⑤リソースをフラグメント化

②～⑤が代表的な施策ですが、①が原因としては多いので、高速化をするなら極力数を減らしましょう😅

— 田中雄太 / ADAMTECHNOLOGIES,Inc. (@yuuta_tanaka88) August 26, 2021

【改善方法④】サーバー応答を改善する

現在使用しているレンタルサーバーより応答速度が速いレンタルサーバーに乗り換えることが、サーバーの応答を改善するのに最も効果的な方法です。

また、それ以外の効果的な方法としては以下が挙げられます。

• ユーザーから地理的に近いCDNを活用する
• サードパーティの接続時間を早める
• キャッシュの活用

まとめ

今回は、ページスピードに関連する指標の一つであるFCPについて解説してきました。

コンテンツの質が検索順位に影響することを踏まえると、1つずつ改善を加えていくのが望ましいでしょう。

低下した原因を確認してそれぞれを丁寧に改善することで、ユーザーにとってさらに使いやすいWebサイトとなり、結果検索順位が上昇することも期待できます。

しかし、FCPを的確に分析しながら改善していくことに、難しさを感じるご担当者様もいらっしゃるかと思います。特に社内にノウハウがない場合、他のプロジェクトと並行してSEO改善をすることはかなり困難でしょう。

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善する「WEBサイト表示スピード高速化サービス」をご用意しています。ご相談は無料ですので、以下のサービスページからお気軽にお問い合わせください。

表示速度改善のサービスページはこちら

SEOにお困りなら【無料SEO診断】

株式会社デジタルアイデンティティでは、創業から14年以上、SEO対策に注力してきました。
検索エンジンをハックするようなブラックハットな手法に頼ることなく、Googleの推奨に沿ったホワイトハットな手法で上位表示を実現してきました。

そんな弊社のSEOナレッジを50以上の項目に落とし込んだSEO診断を無料でご提供しています！
（毎月先着10社様限定とさせていただいています）

無料SEO診断はこんな方におすすめ！

• SEO対策をどこから始めればいいかわからない…
• 自社でSEO対策をしているが思うように順位が上がらない…
• 他社にSEO対策を依頼しているがセカンドオピニオンが欲しい…
• なぜ競合サイトの検索順位が高いのか知りたい…
• 現在のSEO対策が正しいのか確認したい…

弊社の無料SEO診断でわかること

• 現在のSEO評価
• SEO項目ごとの改善方法
• SEO項目ごとの優先度

正しい現状認識は、SEO対策で効果を出す上で何よりも重要です。

自社のSEO対策について、少しでも気になる方は以下のリンクからお気軽にお申し込みください。

【簡単1分】無料SEO診断に申し込む