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

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

高速化

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

2021年6月からGoogle検索ランキングの要因に組み込まれた、Webページのユーザーエクスペリエンス(UX)に関する重要指標であるコアウェブバイタル(Core Web Vitals)。

コアウェブバイタルの3つの指標の中で「表示速度」に関わっている指標がLCP(Lrgest Contentful Paint)です。

本記事では、 LCP(Lrgest Contentful Paint)とは何を表しているのか・どう測定するのか・どう改善するのかといった疑問を抱えている方に向けて解説します。

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

LCPとは

LCP(Largest Contentful Paint)とは、ユーザーがページ内にアクセスしてから、メインコンテンツを見ることができるようになるまでの時間を指し、ユーザーの認識としての「ページ表示速度を測る指標」で、PageSpeed Insightsだと下の画像の赤枠部分に表示される部分です。

PageSpeed InsightsのLCP(Largest Contentful Paint)

Largest Contentful Paintは、「最大コンテンツの描画」の意味があります。

ここにいうメインコンテンツとは、ユーザーや運営者によって依存する部分があるので、はっきりと「どのようなコンテンツがメインコンテンツである」とは定義することが難しいのが現状です。

現在は、ページ内でメインとなる画像や動画、見出しなどがこれに当たると考えられています。

LCPの判断基準は秒数で表され、ページ読み込みから2.5秒未満なら「良い」、4秒以下なら「要改善」、4秒を超えると「不十分」と判断されます。

LCPの測定方法

GoogleはLCPやコアウェブバイタルを測定するツールを提供しています。ここでそれらのツールについて紹介します。

Web Vitals

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

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

Light House

Light HouseはGoogle Chromeの拡張機能です。

測定したいページを開き、Generate reportと書かれている箇所をクリックすると、パフォーマンスの部分にメトリック(測定基準)が表示されます。

PageSpeed Insights

PageSpeed Insights(https://developers-jp.googleblog.com/)にアクセスし、調査したいホームページのURLを入力して、分析をクリックします。

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

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

LCP低下の原因

LCPはページ表示速度の指標ですが、具体的に「データ生成・データ転送・コンテンツ描画」の3つに分けることができます。

これらを踏まえたうえで、LCPが低下する原因は下記の通りです。

  • ・サーバー応答時間が長い
  • ・JavaScriptやCSSのレンダリングブロックされている
  • ・リソースの読み込み時間が遅い
  • ・不要な画像・容量の重い画像が配置されている
  • ・ユーザー側のレンダリングが遅い

LCPの改善方法

それでは LCPを改善するにはどのようにすれば良いか、表示速度が低下する原因も踏まえて解説します。

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

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

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

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

【改善方法②】JavaScriptやCSSからのレンダリングブロックを削除する

レンダリングブロックの削除とは、不要な部分の削除を表します。

具体的には、以下の方法が有効です。

  • ・初期の読み込みで不要なJavaScriptは後から読み込む
  • ・コード内のスペースやコメントを削除する
  • ・DOMサイズを小さくする

【改善方法③】リソースの読み込み速度を改善する

読み込み速度に影響を与えるものとして、最も多い要素が画像です。

これを解決するには、画像の圧縮と「JPEG2000」「JPEG XR」「WebP」といった次世代フォーマットの使用が有効的です。

【改善方法④】ユーザー側のレンダリングを改善する

ユーザー側のレンダリング速度の改善には、以下の施策が有効的です。

  • ・JavaScriptの最小化
  • ・JavaScriptの非同期化
  • ・サーバーサイドレンダリングを使用する

まとめ

今回はコアウェブバイタルの3指標の一つである「LCP」について、その概要や改善方法について解説してきました。

コアウェブバイタルにおける他の指標についての解説は下記のページを参考にしてみてください。

コアウェブバイタル(Core Web Vitals)とは?SEOに与える影響と対策方法についてわかりやすく解説します!

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

弊社では、コアウェブバイタルをはじめとした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診断を行います。