LCPの改善方法｜Core Web Vitalsとの関係や測定ツールも解説

Lumar（旧：DeepCrawl）

Lumar（旧：DeepCrawl）はIKEAやNestle、Lenovoなどの企業にも導入されている世界水準のテクニカルSEOツールです。Lumar（旧：DeepCrawl）独自のクローラーが自社サイトをクロールし、検索順位に影響を与える様々な問題点を洗い出します。定期的なクロールの自動化機能や、タスク管理機能も備わっているため、サイト改善のPDCAサイクルを回すのも容易になります。

またLumar（旧：DeepCrawl）では、ページレンダリングサービス（PRS）の機能で、JavaScriptのレンダリングを検証することが可能です。検証にはGoogle botと同じ最新のGoogle Chromeを利用しているため、測定の正確性にも信頼が置けます。

後述するように、JavaScriptのレンダリングブロックはLCPスコアが低下する原因となります。そのため、Lumar（旧：DeepCrawl）のPRS機能は非常に貴重なのです。SEO会社に分析〜改善のすべてを丸投げする前に、Web担当者は一度導入を検討するべきツールだと言えるでしょう。

PageSpeed Insights

PageSpeed Insightsは、パソコン・モバイル両方のページの読み込み速度を測定する無料ツールです。使い方は簡単で、トップページを開くとURL入力フォームがあるので、まずはそこに測定したいページのURLを打ち込みます。

PageSpeed Insightsのトップ画面

「分析」をクリックすると、すぐに分析結果が表示されます。LCPの結果の他に、「改善できる項目」「診断」が列挙され、分析したサイトの改善点を把握することが可能です。

PageSpeed Insightsの測定結果例

Google Search Console

Google Search Consoleは大まかに言えば、Googleがウェブサイトをどう評価しているかを把握するためのツールです。

具体的には、記事コンテンツなどのインデックス状況や平均順位、表示速度などのユーザビリティのレポート、セキュリティレポートなど、サイト運営に関わる様々な情報が集約されています。公式の無料ツールであることからも、Web担当者必携のツールであると言えます。

LCPとの関わりで言えば、「ウェブに関する主な指標」機能でページ読み込み速度のレポートを確認することができます。レポートは「良好」「改善が必要」「不良」の三段階で提示され、問題の状況を端的に把握することが可能です。

Google Search Console ウェブに関する主な指標

しかし、どのような改善が必要なのかは提示してもらえません。したがって具体的な改善策を把握するためには、別途PageSpeed Insightsを活用すると良いでしょう。

Web Vitals

Web VitalsはGoogle Chromeの拡張機能です。Chromeに追加することで開いている（あるいは開こうとしている）ページのCore Web Vitals、つまり「LCP」「FID」「CLS」を自動計測してくれます。

使い方は簡単です。まずは公式ページからWeb Vitalsをダウンロードします。そして「拡張機能を追加」し、調べたいページを開いている時にウィンドウの右上にある四角いアイコンをクリックするだけです。そうすると下の画像のように3つの指標の測定値が表示されます。

https://gmotech.jp/semlabo/seo/blog/core-web-vitals/

Chromeの拡張機能から選択

なお、画像ではFIDの測定値が表示されていませんが、これはページ内でリンクをクリックするなどのアクションを起こした際に計測されるためです。

Lighthouse

LighthouseはGoogleが提供するウェブページのパフォーマンスをトータルに測定するツールです。

「Performance」「Progressive Web App」「Accessibility」「Best Practice」「SEO」の5つの要素を測定することができます（下の画像参照）。

Light House測定結果画面

5つの要素のうちLCPに関わるのはPerformanceです。測定が完了すると、LCPのスコアを数値と、緑（良好）・黄（改善が必要）・赤（不良）の色分けによって表示します。また、LighthouseではPageSpeed Insightsと同様に改善点の詳細も教えてくれるため、実用性が高いと言えるでしょう。

使い方は2通りあります。1つはChromeの拡張機能としてインストールする方法。もう1つはコマンドラインツールとして使用する方法があります。拡張機能として利用する方が使い勝手が良いのでおすすめです。

コマンドラインツールとして利用する場合は、Nodeのバージョン5以上をインストールが必要です。その上で、Lighthouseをグローバルモジュールとしてインストールすることで使用可能となります。インストールが完了したら、デベロッパーツールのLighthouseタブから測定可能です。

画像の最適化・圧縮

適切な処理が施されていない画像は、ページの読み込みを遅らせる主要因となっている場合が多いです。そこでLCPに問題があったときは、まずは画像の最適化・圧縮ができないかを検討しましょう。

スマートフォンなどで撮った写真などはサイズが大きいため、圧縮してから利用すべきです。またWordPressなどのCMSを利用している場合は、画像最適化・圧縮の各種プラグインを利用することで簡単に軽量化が行えます。

コードの軽量化・圧縮

不要なコメントやスペースの削除などによって、コードの軽量化・圧縮ができないかも検討してみましょう。コードの圧縮にはCMSのプラグインや、フリーの圧縮ツールなどが利用可能です。

また少量のコードであれば、JavaScript/CSSを外部ファイルとして読み込むのではなく、インライン化することで全体として軽量化が行えます。

画像のCDN配信化

画像のCDN配信化を行うことによって、オリジンサーバーの負荷が軽減され、結果として画像の読み込みスピードが向上します。CMSならばプラグインによって簡単にCDN配信化が可能です。または、imgタグのURLでCDNを指定するだけでも簡単に行えます。

Lazy Loadの設定

Lazy Loadとは、「遅延ロード」を行うためのJavaScriptライブラリのことです。

ブラウザは基本的に、指定されたURLのページに含まれる全ての画像を同時に読み込もうとします。しかし、ユーザーが最初に目にする画面の外にある画像の読み込みは本来不必要です。スクロールが当該画像に到達した時点で読み込みが完了していれば十分でしょう。

遅延ロードとは、以上の点を踏まえ、画像の読み込みに時間差を設けて画面表示の高速化を図る仕組みのことを指します。そしてLazy Loadを用いることで、遅延ロード処理を簡単に行うことが可能となるのです。