LCPとは？スコアが悪化する3つの原因と改善方法を紹介！

1. LCPとは

LCPは｢Largest Contentful Paint｣の略称で、Core Web Vitalsの指標のうち「メインコンテンツが読み込まれる速度」を指しています。

Webメディアの全コンテンツが表示される速度を計測するものではなく、最も大きなコンテンツを表示する速度を計測しています。

さまざまな計測ツールで測定できるLCPは、下記の3段階で評価されます。

・2.5秒未満⇒良好
・4.0秒以内⇒改善が必要
・4.0秒以上⇒不良

Webメディアにアクセスした際、メインコンテンツが読み込まれる速度が2.5秒未満であれば良好なので改善する必要はありません。

2.5秒以上であれば改善が必要で、とくに4.0秒以上の場合は早期の改善が求められます。

LCPの数値が不良だと、GoogleからUXが悪いWebメディアだと認識されマイナス評価を受けます。つまり、検索順位へ悪影響を与えてしまうというわけです。

LCPは、ユーザーファーストの良質なWebメディアを作る際の重要な指標です。コンテンツを作成する際は、重要な視点として必ず押さえておきましょう。

2. そもそもCore Web Vitalsとは

そもそもCore Web Vitalsが何なのかを理解していなければ、LCPの仕組みを完璧に把握しているとはいえません。

Core Web Vitalsとは、Googleが発表したUXの向上における重要な指標です。

・LCP
・FID
・CLS

Core Web Vitalsは、メインコンテンツが読み込まれる速度を図るLCPの他、ユーザーの初期アクションに対する応答性を測るFID、コンテンツの視覚的な安定性を測るCLSという3つの指標で構成されています。

Googleは、すべてのWebメディアでCore Web Vitalsを改善していく必要性を提唱しており、SEOにも影響を与えると公言しています。

Core Web Vitalsの平均スコアをク

3. LCPの計測方法

WebメディアのLCPを計測する時は、下記ツールの利用をおすすめします。

・Google Search Console
・Lighthouse
・PageSpeed Insights

ここからは、LCPを計測できる各ツールの特徴を紹介します。

3-1. Google Search Console

WebサイトがGoogleからどのような評価を受けているかを測定できる『Google Search Console』は、さまざまな課題を特定する際に重宝できるツールです。

記事コンテンツの平均順位や表示速度など、Webメディア運営に関わるさまざまな情報が集約されており、Googleの公式ツールなので無料で利用できます。

LCPの指標は「Webに関する主な指標」から確認することができ、レポートは下記の三段階で端的に提示されています。

・良好
・改善が必要
・不良

詳細を選択すると対象のURLが表示されますので、不良から優先して改善してください。しかし、具体的な改善策についての提示はありません。

3-2. Lighthouse

Webメディアの評価を行う『Lighthouse』は、LCPを始めとするCore Web Vitalsの指標をチェックできるGoogle Chromeの拡張機能です。

拡張機能をインストールして利用できる無料ツールで、LCPを計測したいWebメディアのページを開くだけで自動的にパフォーマンスを測定してくれます。

Lighthouseでは、Webメディアを下記の5つの要素にわけて測定しています。

・Performance
・ProgressiveWebApp
・Accessibility
・Best Practices
・SEO

5つの要素のうち、LCPに関わるのはPerformanceです。

緑が良好、黄色が要改善、赤が不良という色分けで表示されており、Google Search Consoleとは違い改善点の詳細を教えてくれるので、実用性は高いです。

提供元：https://innova-jp.com/core-web-vitals-lcp/

3-3. PageSpeed Insights

測定したいWebメディアのURLを入力するだけでLCPを測定できる『PageSpeed Insights』は、下記2点の測定ができる計測ツールです。

・フィールドデータ
・ラボデータ

フィールドデータは、実際にユーザーがそのページにアクセスした情報に基づくデータで、ラボデータはシミュレーションした結果となります。

架空のブラウザ環境においてフロントエンド体験をシミュレーションしてくれるため、LCPを改善してすぐの状態でもWebメディアの状態を測定することができます。

LCPの「改善できる項目」というコンテンツを選択すれば、改善方法やポイントを一覧で確認することも可能。非常に有用性が高い無料ツールです。

4. LCPのスコアが悪化する原因

LCPで計測するメインコンテンツが読み込まれる速度は、データ生成・データ転送・受信したデータの描画という3つのフェーズで成り立ちます。

下記では、LCPのスコアが悪化する原因を紹介します。

4-1. リソース読み込み時間の遅延

LCPのスコアは、コンテンツ内のリソースの読み込み遅延が発生すると悪化します。

十分なスペックがあるサーバーを使用しているにも関わらず、WebメディアのLCPが低下する原因のほとんどは、画像などの読み込みファイルサイズが大きすぎるからです。

ユーザーに対して魅力的なコンテンツを届けるためには、画像の活用は必要です。そのため、できるだけ画像を圧縮したり、不要な画像を削除するなどの取り組みが必要です。

4-2. サーバー応答時間の遅延

LCPのスコアは、サーバーの応答時間が長いと悪化します。

Webメディアの表示はサーバーとの情報交換から成立するため、サーバーに負荷がかかるとその分だけ表示速度は遅延していきます。

サーバーのスペック不足は、LCPを含むCore Web Vitalsの全ての数値が悪くなる原因になりますので、常に最適化されているかを確認しておきましょう。

4-3. CSSやJavaScriptのレンダリングブロック

Webメディアを構築する際に使用されるCSSやJavaScriptは、メインコンテンツが読み込まれる時間に大きな影響を与えています。

CSSやJavaScriptは、イラストやWebメディアの動きを扱う領域なので、情報量が多すぎると大幅な遅れが生じてLCPを悪化させる要因になります。

この場合、不要なコードの削除・圧縮・JavaScriptの非同期化などで改善できます。

5.LPCの改善方法

ここからは、LCPを改善するための具体的な方法を紹介します。

5-1. 不要な画像の削除と圧縮

不要な画像の削除やサイズの圧縮により、リソース読み込み時間の遅延を改善できます。

たとえば、スマートフォンなどで撮影した写真をそのままWebメディアで使うと、サイズが大きすぎるためリソース時間を遅延させる要因になります。

画像の圧縮に便利な無料ツールはさまざまあり、WordPressを利用していれば画像の最適化はプラグインの活用で簡単にできるため、すぐに対応することをおすすめします。

さらに、Lazy Loadと呼ばれる遅延ロードを行うJavaScriptライブラリを設定することで、指定ページに含まれる画像の読み込み時間を早くすることも可能です。

5-2. サーバー応答時間の改善

サーバー応答時間の遅延がLCPを悪化させている原因の場合は、今よりも応答時間が早いサーバーへ切り替えることで改善できます。

それ以外の方法としては、キャッシュの活用、広告の表示を減らす、サードパーティーの接続時間を早めるなどの対応で改善可能です。

5-3. レンダリングブロックの削除

LCPは、JavaScriptやCSSの不要部分を削除することで改善できます。

使用していないJavaScriptやCSSの削除方法はさまざまありますが、おすすめはWordpressで提供されている下記のプラグインです。

・Flying Scripts by WP Speed Matters
・UnCSS Online

そもそもコードにはスペース、インデント、コメントなどの不要な文字が含まれているため、それらを削減して圧縮するだけで読み込み速度は大きく変わります。

他にも、ソースコードを圧縮できるツールは「CSS Minifier」や「JS Minifier」など、さまざま提供されています。

6.まとめ

LCPの仕組み、計測方法、スコアが悪化する原因、改善方法を紹介しました。

Core Web Vitalsの1つであるLCPは、UXを向上させるための重要な指標です。検索順位へも影響を与える部分なので、Webメディアを運営者は押さえておく必要があります。

Googleから高い評価を受けるWebメディアを作るため、重要な施策の1つとしてLCPの重要性は必ず把握しておきましょう。