2021年08月17日 -

LCP(Largest Contentful Paint)とは?SEOへの影響や測定方法、改善方法などについて徹底解説!

皆さんはLCPをご存知ですか?LCPとは、UXの向上に重要なCore Web Vitalsの1つで、主にメインコンテンツの読み込み時間を測る指標です。今回はLCPの概要や効果、指標の測定方法、改善方法などについて解説します

LCP(Largest Contentful Paint)とは?

画像引用元:Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標

LCP(Largest Contentful Paint)とは、あるメインコンテンツの読み込み時間を測る指標です。ページ内のメインコンテンツがダウンロードされてから、ユーザーが操作できるまでにどの程度時間がかかるかを表します。

多くのWebサイトにとって、LCPはUX向上に重要な指標と考えられており、検索順位にも影響を及ぼすCore Web Vitalsの指標でもあります。

そもそも「Core Web Vitals」とは?

Core Web Vitalsとは、UXの向上において特に重要とされる以下の要素を意味します。

概要
LCP(Largest Contentful Paint) メインコンテンツの読み込み時間を測る指標
FID(First Input Delay) Webサイトやページのインタラクティブ性を測る指標
CLS(Cumulative Layout Shift) コンテンツの視覚的な安定性を測る指標

LCPの評価基準

不良 改善が必要 良好
LCPの評価基準 4.0秒以上 4.0秒以内 2.5秒以下

LCPの評価が「良好」と判断されるためには、コンテンツが読み込みを始めてから2.5秒以下に表示されることが理想的と言われています。

LCPのメインコンテンツはどのように確定するのか

引用:Largest Contentful Paint (LCP)

LCPのメインコンテンツがどのように確定するかを理解するのに重要なのが、FCPです。こちらはFarst Contentful Paintの略で、最初に読み込まれたコンテンツを表します。
これがそのままLCPになるとは限らず、右図のように読み込みとともにLCPは変化していきます。

引用:Largest Contentful Paint (LCP)
※GIFは画像を参考に弊社でオリジナルに作成しています

LCPが一定で変わらない例

引用:Largest Contentful Paint (LCP)
※GIFは画像を参考に弊社でオリジナルに作成しています

LCPの低下要因

・画像などの読み込み速度が遅い
・JavaScriptやCSSが原因でレンダリングがブロックされている
・サーバーの応答時間が遅い

ここでは、LCPのよくある低下要因についてみていきます。主に3点あるので、それぞれについて詳しくみていきましょう。

画像などの読み込み速度が遅い

画像などの読み込み速度が遅いことは、LCPの低下要因になりえます。リソースの数やサイズが大きくなればなるほど、その分読み込み時間が遅延する可能性があるため、使用する画像の大きさなどには注意が必要です。

JavaScriptやCSSが原因でレンダリングがブロックされている

JavaScriptやCSSが原因で、レンダリングがブロックされることもLCPの低下要因になりえます。

レンダリングとは、表示される現物データをもとに、内容を整形して再表示することです。
基本的にWebサイトなどのコンテンツは、ブラウザが受信した情報をサーバーに送信し、そこで必要に応じて画像や内容を最適化し、サーバーから帰ってきたデータが表示されています。レンダリング前には、リソースのダウンロードやCSSの解析、JavaScriptの実行などが行われており、それらの作業が終了するまでレンダリングは止まります。

レンダリングが遅れるとコンテンツ自体の読み込みが遅れるため、結果的にLCPの低下につながります。

サーバーの応答時間が遅い

サーバーの応答時間が遅いことも、LCPの低下要因になりえます。

先ほども解説しましたが、Webサイトなどのコンテンツはレンダリングを経てユーザーに表示されます。レンダリングの際、なんらかの問題が生じ、サーバーに負荷がかかると、その分表示速度が遅くなるため注意が必要です。

なお、サーバーの応答時間はTTFB(Time to First Bite)という指標で確認可能です。TTFBはサーバーからデータを取得する際、最初の1バイトを取得するまでにかかる時間を表します。ちなみに、GoogleによるTTFBの推奨値は200ミリ秒以下です。TTFBはGoogleが提供するLCP測定ツール「PageSpeed Insights」や、「Chrome Dev Tool」で確認できます。

ブラウザ(クライアントサイド)のレンダリングが遅い

ユーザーが扱うブラウザにかかる負荷もLCPの低下に影響します。キャッシュの蓄積や広告表示などが原因で発生するため、注意が必要です。

LCPの改善方法

・画像を最適化する
・レンダリングを早くする
・サーバーの応答時間を速くする

ここでは、LCPの改善方法についてご紹介します。
主な改善方法は上記の3つです。

画像を最適化する

画像ファイルの読み込み速度を改善するために画像を圧縮し、コンテンツに応じて最適化することは、LCPの改善につながります。Webでコンテンツを制作する際は、最適な画像サイズを意識しながら、できるだけ画像を小さく圧縮したり、不必要な画像は添付したりしないのがLCP改善に有効です。

レンダリングを速くする

レンダリングを速くすることも、LCPの改善につながります。レンダリングを速くするためには、リソースのダウンロードやCSSの解析、JavaScriptの実行などの処理を速くする必要があります。そのためにはCSSやJavaScriptの不要なコードは削除し、ファイルを圧縮してサイズを小さくすることが重要です。初回の読み込み時に必要ないコードは非同期で読み込ませるなどで工夫するとレンダリングの加速につながります。
また、クライアントサイドのレンダリング速度を改善する際には、JavaScriptの最小化や非同期、サーバーサイドレンダリングの活用が有効です。

サーバーの応答時間を速くする

サーバーの応答時間を速くすることも、LCPの改善につながります。先ほども簡単に解説しましたが、サーバーの応答時間の改善にはTTFB (Time to First Bite)を参考にしましょう。なお、LCPの測定ツールである「PageSpeed Insight」では、TTFBが600ミリ秒を超えると、何かしら問題があると警告されます。警告された場合は、サーバー環境の調整やキャッシュの活用などで対応しましょう。

具体的なLCPの改善施策例

画像に関する具体的な改善施策

・適切な画像形式を選ぶ
・最適な圧縮レベルにする
・適切なビデオ形式に変換できるGIFを探す
・webPなど次世代型画像フォーマットを使用する
・画像CDNの導入
など

lazy loadの利用による改善施策

・lazy loadを使用して画像を配信する
・lazy loadを利用して動画を配信する
・「ネイティブレイジーロード」の利用
など

JavaScriptに関するLCP改善施策

・JavaScriptを分割して読み込ませる
・不要なJavaScriptコードを削除する
・JavaScriptコードの縮小化
など

Webフォントに関する改善施策

・Webフォントの読み込みとレンダリングの最適化
・Webフォント自体の容量を圧縮する
など

CSSに関する改善施策

・優先度の低いCSSは遅延させる
・CSSファイルの縮小化を行う
・クリティカルCSSの導入
・メディアクエリによる背景画像の最適化
など

LCPの測定ができるツール

ここでは、LCPの測定ツールについて3点解説します。

Google Search Console (Core Web Vitals report)

Google Search Console (Core Web Vitals report)は、Googleが提供する無料解析ツールです。
Google Search Consoleを使うことで、検索KWの順位やアクセス数など、コンテンツの検索順位を下げる可能性のある問題点を確認できます。

主にSEO対策や新規マーケティング施策の検証におすすめのツールです。

PageSpeed Insights

PageSpeed Insightsは、あるコンテンツの表示速度の最適化に重点を置いた監査ツールです。調べたいサイトのURLを入力すれば、速度スコアとともにCore Web Vitalsの数値が表示されます。

モバイル端末やデスクトップの両方のページパフォーマンスに関するレポートを確認できるため非常に便利なツールです。

Chrome DevTools

Chrome DevToolsとは、Google Chromeに搭載されている開発者向けのデバッグツールです。
主にWebサイトのページ表示速度やHTML構成、通信状況などを確認できます。

特別なツールやプログラムを使わずブラウザのみで簡単に確認でき、Webサービスの開発やテスト、デザインチェックの際に便利なツールです。

LCPを改善してUXを高め、SEO対策を始めよう!

今回はLCPの概要や効果、指標の測定方法、改善方法などについて解説しました。どんなにコンテンツの内容やデザインが良くても、画像やファイルの表示速度・読み込み速度が遅いと、ユーザーに大きなストレスを与え、UX低下につながります。

LCPを改善すれば、UXを高められるだけでなく、SEO対策にもつながりますので、ぜひこのページを参考にしてみてください。

もし他にもSEOに関して何かお悩みがあれば、いつでもipe(アイプ)へご相談ください。お悩みに対して、SEOを考慮した最適解をご提示いたします。

コアウェブバイタル集中対策セミナー実施決定!

    必須会社名

    必須部署名

    必須

    必須

    必須メールアドレス

    任意SEO対象サイトURL

    任意電話番号

    任意ウェブ集客に関してお持ちの課題を教えてください。

    個人情報保護方針

    当サイトの運営に際し、お客様のプライバシーを尊重し個人情報に対して十分な配慮を行うとともに、大切に保護し、適正な管理を行うことに努めております。

    【個人情報の利用目的】
    a) お客様のご要望に合わせたサービスをご提供するための各種ご連絡。
    b) お問い合わせいただいたご質問への回答のご連絡。

    取得した個人情報は、ご本人の同意なしに目的以外では利用しません。
    情報が漏洩しないよう対策を講じ、従業員だけでなく委託業者も監督します。
    ご本人の同意を得ずに第三者に情報を提供しません。
    ご本人からの求めに応じ情報を開示します。
    公開された個人情報が事実と異なる場合、訂正や削除に応じます。
    個人情報の取り扱いに関する苦情に対し、適切・迅速に対処します。

    当社規定の「個人情報保護方針」の内容に同意する