アダムテクノロジーズ運営チーム

FCP(First Contentful Paint)とは?改善方法・低下原因・測定方法を解説

高速化

FCP(First Contentful Paint)とは?改善方法・低下原因・測定方法を解説のサムネイル

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

また、コアウェブバイタル以外にも、ページスピードに関連する指標は多数あり、その内の一つがFCPです。

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

目次 プラスマーク 表示 プラスマーク 閉じる

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

FCP(First Contentful Paint)とは、ユーザーが URL をクリックしてから、サイトを表示させるための要素をレンダリングするまでの時間を指します。

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

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

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

LCP(Largest Contentful Paint)とは?低下の原因や測定方法と改善方法について解説

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

サイト表示スピード改善で出てくる「FCP」、「FP」、「FM」という言葉ですが、それぞれの違うのか明確に説明できますか?
なんとなくわかったような気でいる方もおられるでしょう。
まずは、これらの意味の違いについて解説します。

FCP(First Contentful Paint)

FCP(First Contentful Paint)は、何らかのDOMコンテンツがレンダリングされたときのこと。

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

FP (First Paint)

FP (First Paint)は、視覚的に何か違うものがレンダリングされたときこと。

ページにアクセスしたときに、いずれかの視覚要素が表示されたときです。背景色やヘッダー部分の一部などかもしれません。

FMP (First Meaningful Paint)

FMP (First Meaningful Paint)は、コンテンツとして意味のある部分がレンダリングされたときのことです。

ページ内のメインとなるコンテンツが表示されたときと考えてよいでしょう。

ユーザーが表示速度として認識する部分はFMP

ユーザーがサイトの表示速度として認識するのは、コンテンツとして意味のある部分が表示されるFMP (First Meaningful Paint)だと考えるのが妥当でしょう。

FP (First Paint)やFCP(First Contentful Paint)は機械的に判断できる部分であり、FMP (First Meaningful Paint)は、ユーザーがページ表示されたと判断できる部分といえば、多少わかりやすくなるでしょうか。

ケイティー・ヘンピニウス(Katie Hempenius)氏の解説ツイートは以下の通りとなっています。

かんたんに説明すると、コンテンツの定義はページによって異なり、ブログ記事の場合は見出しとファーストビューのフォント適応されたテキスト。
検索エンジンの場合は検索結果が表示。
ECの製品ページなどの画像がないと意味がないページの場合は、その製品に関する画像。それぞれコンテンツの定義となります。 ページのヘッダーやグローバルナビゲーションが表示されていたり、アイコンだけが示されているだけではFMPとはみなされません。

FCPの測定方法

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

Web Vitals

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

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

PageSpeed Insights

PageSpeed Insights(https://developers-jp.googleblog.com/)にアクセスし、調査したいホームページの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フォントのレンダリングの最適化を行うことが大切です。

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

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

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

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

まとめ

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

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

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

また、うまくFCPを分析し、改善を加えるのが難しいと考えるご担当者様もいらっしゃるかと思います。

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善点を診断する「WEBサイト表示診断サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。

WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」

WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。

しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。

WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。

「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。

「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。

成果報酬型WordPressサイトの高速化サービス 『HP爆速くん for WP』の詳細はコチラ

この記事の執筆者

田中雄太

twitterアイコン Facebookアイコン

アダムテクノロジーズ執行役員 SEOコンサルタント

株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。

DOWNLOAD

資料ダウンロード

資料のイメージ画像

当社でご提供しているサービスの資料ダウンロードはこちらから。
SEOに課題を感じている方は、ぜひご覧になってください。

SEO診断の資料はこちら WEBサイト高速化の資料はこちら

CONTACT

お問い合わせ

大規模サイトにおけるSEO対策上の問題点を解消し、
集客の最大化を実現する相談役として
ぜひお気軽にご連絡ください。
経験豊富な技術者がSEO診断を行います。

アルゴリズム学園で
SEOの最新情報をGET!

アルゴリズム学園ではSEOに関する情報をメールマガジンにて定期的に配信しています。

最新SEO情報から、知っておくべき知識までプロの視点でわかりやすく解説。

>>メルマガ登録はコチラ