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

「Core Web Vitals（コアウェブバイタル・CWV）」とは、2020年5月にGoogleが発表した、Webサイトの健全性・使いやすさを示す重要な指標です。
すでに2021年6月中旬から導入が開始されており、8月にかけて段階的にランキングシステムに追加されていきます。
CWVは検索順位に影響するため改善は必至であり、頭を悩ましているWeb担当者の方も多いのではないでしょうか。
本記事では、CWVの指標の1つである「LCP」（ページの読み込み速度）の改善方法について解説します。

Core Web Vitals（コアウェブバイタル・CWV）とは

Core Web Vitals（コアウェブバイタル・CWV）とは、2020年5月にGoogleが発表し、2021年6月から導入が開始された、Webサイトの健全性、使いやすさを示す重要な指標です。

ユーザーエクスペリエンスと呼ばれる、ユーザーがページに訪れた際に感じること・経験の質を数値で可視化することで、より良いWebサイトをユーザーに届ける狙いがあります。

具体的には、以下の3つの指標で評価されます。

• LCP（ページの読み込み速度）
• FID（インタラクティブ性、応答性）
• CLS（ページレイアウトなどの視覚的安定性）

参考：Web Vitals の概要: サイトの健全性を示す重要指標 | Google Developers

Webサイト制作に関わる方々にとっては、検索順位に大きく影響する可能性が高いため、早急な改善が求められます。

LCP（Largest Contentful Paint）とは

LCPとは、前述の通りコアウェブバイタルの指標の1つであり、ページのメインコンテンツが読み込まれる速度を指します。

参考：最大のコンテンツフルペイント（LCP） | Google Developers

評価基準は以下の3段階です。

• 2.5秒未満：良好
• 4.0秒以内：改善が必要
• 4.0秒越え：不良

後述するツールを利用すれば、簡単に測定できます。

LCPのスコア低下要因（影響要素）

LCPのスコアは、どのような要素が影響し評価されるのでしょうか。
以下、4点解説します。

画像などのリソースの読み込みが遅い

LCPで低スコアになる大きな原因は、主に画像に関するものが多いです。
ユーザーに有益なコンテンツを届ける為に魅力的な画像を活用するのはよいことですが、LCPの観点からは注意が必要です。

Webサイトを作る際には、できるだけ画像を圧縮したり、必要のない画像は添付しないようにすることを心がけましょう。

CSSやJavaScriptによるレンダリングブロック

Webサイト構築におけるCSSやJavaScriptも、読み込み時間に影響を与えます。

私達が目にするWebサイトは、ブラウザが受け取った情報をサーバーに送信し、変換して返信する流れを経て、表示されます。
その際変換されるのは、サイト構築に必要なHTMLやCSS、JavaScriptといったコードです。
中でもCSSやJavaScriptは、イラストや動きに使うものなので負荷もかかります。

そのため、情報量や動きが多すぎると読み込み時間に大幅な遅れが出てしまいます。
言語情報においても、不要なコードの削除や圧縮が必要です。

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

上述のレンダリングと似ており、私達が扱うブラウザに掛かる負荷が影響します。

原因としては、キャッシュの蓄積や、表示する広告の多さなどが考えられます。

先程と同様に、不要なコードの圧縮・削除、キャッシュの活用が有効です。

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

前述の通り、Webサイトの表示はサーバーとの情報交換から成立します。
現在では、レンタルサーバーを活用している方も多いのではないでしょうか。

皆が接続し、サーバーに負荷がかかると、その分表示速度は遅くなります。
常に自分たちが使うサーバーが最適化されているかチェックしましょう。

LCPの測定ツールと確認方法

ここまでご紹介したLCPの低下要因は、全て下記のツールで測定できます。
特に、Google Search ConsoleとPage Speed InsightsはGoogle公式のツールであり、併せて活用すると効果的です。

Google Search Console

Google Search Console は、Webサイトの抱える課題を特定することができます。
自分たちの運営するWebサイトが、全体的にGoogleからどのような評価を受けているのか測定するうえで非常に便利です。

「ウェブに関する主な指標」から確認できます。

弊社運営のデジタルマーケティングブログの測定結果です。

最も直すべきなのは、「不良」項目で、次に「改善が必要」項目になります。

「詳細」を押すと、対象のURLが表示され、その場で次にご紹介するPage Speed Insightsで測定することも可能です。

Page Speed Insights

Page Speed Insightsは、Webサイトが持つ課題を明確に分析することができます。

URLを打ち込み検索すると、モバイル・パソコンそれぞれの評価が点数で表示されます。
100点満点で、Google Search Console同様、50点未満は赤・90点未満はオレンジ・90点以上は緑の結果がでます。

注目するべき箇所は、「改善できる項目」の部分です。

赤で表示された箇所から優先的に改善しましょう。
特に、次世代フォーマットでの画像の配信は重要性が高く、次章で解説します。

Lighthouse

Lighthouseは、Googleの拡張機能またはデベロッパーツールで使用可能な、Webサイトの評価を行うツールです。

評価項目は下記の5つです。

• Performance
• ProgressiveWebApp
• Accessibility
• Best Practices
• SEO

LCPの改善の観点ではPerformance項目をチェックしましょう。
他の指標も合わせて確認したいときに便利です。

Performance

Performance は、Google chromeで使用できるデベロッパーツールです。
検証モードを開いて、ElementsやConsoleなどがある上部バーから利用できます。

画面中部にあるSummaryから各作業に掛かった時間をチェックできます。

Webサイトの何の処理にどのくらい負荷が掛かっているのか確認するのに役立ちます。

Web Vitals

Web Vitalsは、コアウェブバイタルの指標を簡単に確認できるGoogleの拡張機能です。

調べたいサイトを開いた状態で使用すると、ワンクリックで下記のように表示してくれます。

手軽にコアウェブバイタルの対策ができているか確認する際に便利です。

LCPの改善方法

実際にLCPの改善方法を見ていきましょう。
特に、画像やソースコードの削除・圧縮は効果的なため、優先して行います。

リソースの読み込み速度の改善

主に画像に関するもので、不必要な画像の削除・圧縮を行います。

上述のPage Speed Insightsで表示された「次世代フォーマット」へ変換します。

Page Speed Insightsの解説によると、次世代フォーマットとは、JPEG 2000、JPEG XR、WebPなどの画像フォーマットを意味します。

Googleが開発したWebP（ウェッピー）は、JPEGやPNGよりも25~35％ファイルサイズを減らすことができます。
データが失われない可逆圧縮が可能なことも魅力的なポイントの1つです。

参考：WebP画像を使用する | Google Developers

下記画像の圧縮に便利なツールを3つご紹介しているので、自分にあったものを見つけてみてください。

• tinyPNG（https://tinypng.com/）
• Squoosh（https://squoosh.app/）
• Bulk Resize（https://bulkresizephotos.com/ja）

また、WebPについてはブログ記事「WebP(ウェッピー)とは？フォーマットの違いや作成方法をご紹介!」で詳しく解説していますので、合わせてご覧ください。

CSSやJavaScriptによるレンダリングブロックの改善

不要なCSSやJavaScriptのソースコードを削除・圧縮しましょう。

ソースコードの圧縮は、CSS Minifier、JS Minifierが便利です。

また、上記方法はクライアントサイドのレンダリング改善にも有効です。

サーバーの応答時間の改善

日々利用しているサーバーの見直しをします。

改善方法は以下の通りです。

• 都度読み込む設定を変更し、キャッシュを活用する
• CDN（コンテンツデリバリーネットワーク）を利用して、サーバーの負荷を減らす
• 広告の表示を減らす

まとめ

LCPの評価は、主に画像やCSS、Javascriptの刷新で改善できます。
読み込み時間の改善は、ユーザーのより良い体験（UX向上）に直接繋がり、Googleから評価を受ける上でも重要な施策の1つです。
本記事で紹介したツールや方法を参考に、日々Webサイトの改善に努めましょう。

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

---

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。