Googleは自然検索によるランキングの決定要因としてCWVを追加しました。

CWVを構成する3つの指標の中で、特にページの読み込み時間などに関わる指標がLCPです。

ページの表示速度はユーザーの離脱率などにも深く関わるので十分に気を付けなければなりません。

今回の記事ではそんなLCPの改善方法や低下の原因について解説します。

LCPの低下がCWVにもたらす影響やLCP計測に使える無料ツールについても紹介しますので、ぜひ参考にしてください。

LCPの概要

speed

LCP（Largest Contentful Paint）はGoogleが定めたCWVを構成する3つの指標のうちの1つです。

ページの表示速度に関する指標で、特にそのページで最も大きなサイズのコンテンツを読み込むのにかかる時間が問題となります。

LCPが2.5秒以内なら問題はありませんが、それ以上かかるようならランキングに影響する可能性があるので改善する必要があるでしょう。

 

SEO対策の事例はこちら

 

Core Web Vitalsの重要性

ビジネスマン　白いグラフ背景

Googleが定めたCWV（Core Web Vitals）が重要なのは、それがランキングの決定に大きく関わる指標だからです。

CWVの3つの指標はいずれもユーザーエクスペリエンスの向上を意識したもので、これはGoogleの経営理念に合致します。

サイトを上位にランクインさせたいのであれば、CWVを深く理解し、Googleの理想にかなうサイトを作るほかありません。

ユーザビリティの高いサイトには自然と人が集まります。ユーザー視点のサイト作りはSEO対策以上の意味を持つことでしょう。

 

SEO対策の事例はこちら

 

Core Web Vitalsの各指標の特徴

3

CWVには重要な指標が3つあり、いずれもユーザーエクスペリエンスに深く関わっています。

どの指標も計測して具体的な数値を得ることができるので対策を取りやすいといえるでしょう。

計測した結果、数値が適正範囲になければ、そのページは改善してランキングを上げられる可能性があるということです。

この項目ではCWVの3つの指標の特徴についてそれぞれ詳しく解説します。

LCP

プログラミング中のモニター　画像

Core Web Vitalsの3つの指標、1つ目はLCP（Largest Contentful Paint）です。

先の項目で触れた通り、そのページ内で最もサイズの大きなコンテンツを表示するのにどれくらいの時間がかかるかを測定します。

Googleから問題なしと評価されるためにはLCPの値が2.5秒未満でなければなりません。

2.5秒以上4秒未満で「要改善」、4秒以上かかるようなら「不十分」です。

コンテンツの中でも動画や画像はデータが重いので、動画や画像の表示速度を改善するアプローチをすることになるでしょう。

FID

ゆがむ時計のイメージ　画像

Core Web Vitalsの3つの指標、2つ目はFID（First Input Delay）です。

FIDは初回入力遅延と呼ばれる指標で、ユーザーが最初にページを操作してからブラウザが応答するまでにかかる時間のことです。

FIDが100ms以内なら何も問題ありませんが、300ms以上かかるなら要改善という評価が下されることになるでしょう。

ユーザーが閲覧以外の何らかの操作を行うページでは特に重要な指標だといえます。

CLS

作戦、注意点

Core Web Vitalsの3つの指標、3つ目はCLS（Cumulative Layout Shift）です。

CLSは累積レイアウト変更と呼ばれる指標で、視覚的な要素の安定性に関わるものとして知られています。

たとえばサイトの記事を読み始めた瞬間、少し遅れて広告が現れ、記事が下にずれて困惑したという経験はないでしょうか。

CLSはこうしたユーザーが意図しないレイアウトのずれをGoogle独自のスコアで評価します。

LCP低下の影響

悩む　男性

LCPの低下がもたらす影響は以下の通りWebサイト運営にとって非常に深刻です。

  • 検索ランキングのランクダウン
  • ユーザーの直帰率の増加
  • コンバージョンの減少

特にWeb中心の集客を行っている企業の場合、ユーザーエクスペリエンスが低下すると大きな打撃を受けることになるでしょう。

ユーザーはWebサイトのクオリティと企業のサービスの質を結びつけて考えがちだからです。

あまりにもLCPの数値が高い場合、ユーザーはレスポンスの遅さを嫌って他社のサイトへ流れる可能性があります。

 

SEO対策の事例はこちら

 

LCP低下の原因

メリット　男性

LCP低下の原因は複数あります。

クライアントサイド・サーバーサイドの両面についてそれぞれ検証しなければなりません。

LCP低下の原因として、この項目では4つの問題をピックアップしてご紹介します。

測定したLCPの値が適性なものでない場合、これらの原因について1つずつ改善策を講じていく必要があるでしょう。

画像の読み込みの遅さ

LCP低下の原因、1つ目は画像の読み込みの遅さです。

画像や動画はユーザーへの効果的なアピールに欠かせないものとして近年Webサイトで多用されています。

しかし、適切な処理をしないまま無駄に多くの画像や動画を表示させようとすると、LCPの低下を招いてしまうことでしょう。

画像や動画は乱用しないよう心がけ、最低限必要と思われるものだけを適切に処理した上で使うことが重要です。

Webサイトの作成や運用にあたっては、LCPの値を検証しつつ、画像や動画を精選する作業も必要となるでしょう。

レンダリングブロックリソースの存在

LCP低下の原因、2つ目はレンダリングブロックリソースの存在です。

レンダリングブロックとは、画面を描画するための処理が重いせいで表示に遅延が発生してしまうことをいいます。

CSSやJavaScriptの処理が多くてDOM構造の階層が深すぎるとレンダリングに時間がかかるので注意しましょう。

幅や高さ未指定の要素の存在やCSS・Javascriptの外部ファイルへの記述などレンダリングブロックの原因は様々です。

考えられる原因を1つずつ検証し、対処していく必要があるでしょう。

クライアントサイドのレンダリングの遅さ

LCP低下の原因、3つ目はクライアントサイドのレンダリングの遅さです。

現在、多くのサイトではクライアント側のJavaScriptを使ってブラウザで直にページをレンダリングしています。

ただこの時、JavaScriptの大きなバンドルを使っていて、しかも最適化の処理をしていないとLCPが低下しかねません。

JavaScriptを最小限に抑える処理やサーバー側のレンダリングを使うなどの処理が必要となります。

サーバー応答時間の長さ

LCP低下の原因、4つ目はサーバーの応答時間の長さです。

Webサイトはブラウザとサーバーとの間でコンテンツの送受信が行われることで表示されます。

このやり取りに時間がかかりすぎるとページの読み込み速度が遅くなり、結果的にLCPの値は増加するでしょう。

サーバーの最適化やユーザーのルーティングなどを行ってサーバーの負荷を可能な限り軽減しなければなりません。

LCPの改善方法

メリット、ポイント

ここまでLCP低下の原因について見てきました。この項目ではそれらを踏まえてLCPの改善方法を確認してみましょう。

実行するには専門的な知識が必要な改善策もあるので、社内にリソースがない場合は外部への委託も検討する必要があります。

画像を圧縮・最適化する

LCPの改善方法、1つ目は画像を圧縮・最適化することです。

たとえば手持ちのデバイスで撮影した写真などは、そのままではサイズが大きすぎる場合があるのでリサイズの処理が必要です。

WordPressをはじめとするCMSでサイトを構築している場合、画像を最適化するプラグインを使うこともできるでしょう。

Googleが開発した画像フォーマットである「WebP」を用いるという方法もあります。

WebPはPNGやJPEGよりもファイルサイズを25～35％も小さくできる上、データが失われない可逆圧縮が可能です。

画像をCDN配信化する

LCPの改善方法、2つ目は画像をCDN配信化することです。

CDNとはWebコンテンツを効率的に配信できるよう工夫されたネットワークのことです。

CDNを用いると、コンテンツが大容量かしたりアクセスが集中したりしてもサイトの表示に大きな問題は現れません。

オリジナルコンテンツを複数のキャッシュサーバーにコピー・分散することでオリジンサーバーの負荷を軽減するからです。

このCDN配信の仕組みを導入することによってオリジンサーバーの負担を低減し、画像の読み込みスピードを向上させられます。

Lazy Loadを設定する

LCPの改善方法、3つ目はLazy Loadを設定することです。

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

遅延ロードを設定したブラウザは、ユーザーが閲覧中の箇所にある画像だけを読み込んで表示し、それ以外は読み込みません。

必要な画像をスクロールに応じて読み込み、表示させることで結果的に全体の処理を軽くしています。

この方法を取ることでページの表示スピードは向上し、LCPの値も改善されます。

コードを軽量化する

LCPの改善方法、4つ目はコードを軽量化することです。

WebサイトはHTMLのコードの記述で構成されています。このコードには、実は不要な部分が含まれていることも少なくありません。

不要なスペースやプログラマが残したコメントを削除することでコードの圧縮や軽量化を図り、表示速度を上げることができます。

また外部ファイルとして存在するCSSやJavaScriptがあればそれをインライン化することによっても軽量化が可能です。

 

ワンポイント
自社サイトの傾向を分析して最も効果が高そうなLCP改善方法を実行しよう。

LCP計測のための無料ツール

アナリティクス

LCPの速度を上げることの重要性や速度低下の影響、改善方法などについて解説してきました。

SEO対策の面からも重要な値といえるLCPの速度ですが、スコアを計測するためにはどのような方法があるのでしょうか。

すぐに取り組むことができる最も簡単な方法は、測定ツールを使って計測することです。

この項目ではLCPの計測に使える無料ツールを3つ厳選してご紹介します。

Google Search Console

LCP計測のための無料ツール、1つ目はGoogle Search Consoleです。

Googleが提供する無料解析サービスで、サイトの掲載順位の監視や管理を行うことができます。

CWVの3つの指標について1つでも改善が必要なものや不良なものがあれば通知してくれるので、サイト管理に役立つでしょう。

管理画面の「ウェブに関する主な指標」をクリックすると不良URL・改善を要するURL・良好URLの推移を表示してくれます。

PageSpeed Insights

LCP計測のための無料ツール、2つ目はPageSpeed Insightsです。

PageSpeed InsightsもGoogle提供のサービスで、ページの表示速度を計測しスコアで知らせてくれます。

PageSpeed Insightsの便利な所は改善対象をサムネイル画像とHTMLコード付きで知らせてくれる点でしょう。

「最大コンテンツの描画」要素としてLCP改善のために修正すべき部分を教えてくれます。

Lighthouse

LCP計測のための無料ツール、3つ目はLighthouseです。

LighthouseもGoogle提供のサービスで、以下の要素についてページのパフォーマンス管理を行うことができます。

  • Performance
  • Progressive Web App
  • Accessibility
  • Best Practice
  • SEO

ページのクオリティを総合的に把握できるので非常に便利です。LCPにはPerformanceが深く関係しています。

 

ワンポイント
無料ツールを試して自社のニーズに適した機能を持つものを選ぼう。

FIDとCLSを改善するには

黒背景　ビジネスマン

CWVを構成する3つの指標はそれぞれに適した改善方法があります。LCPの改善方法は先の項目でご紹介した通りです。

FIDはJavaScriptの調整が重要な鍵です。タスクの細分化やJavaScriptの減量を行って改善できるでしょう。

CLSのスコア低下の原因は画像に高さや幅の指定がないことや動的コンテンツの多用であることがほとんどです。

動的コンテンツを減らしたりCSSの調整を行うことで改善が見込めるでしょう。

 

ワンポイント
CWVの3つの指標はトータルで対処することが重要。

LCPの改善について悩んだら

考える

CWVの指標の中でもLCPは改善のための方法が数多くあります。

ただ中には専門的な知識が必要な方法もあるので、計測と原因究明はできたけれど自社では対処できないという場合もあるでしょう。

もしもLCPの改善について悩んだら、デジマクラスのコンサルタントに相談してみてください。

Webサイトの構築にも精通したマーケティングのプロが親身になってお話をうかがい、適切なアドバイスをさせていただきます。

 

ワンポイント
LCPの改善について悩んだらプロに相談するのが解決の早道。

まとめ

インターネット　イメージ画像

いかがだったでしょうか。今回の記事ではLCPの改善方法や低下の原因について解説しました。

LCPを含むCWVの3つの指標は、ユーザーエクスペリエンスの向上のために決して無視できない重要なものです。

運営中のサイトを常に監視・評価してCWVの各スコアを良好な状態に維持しましょう。本稿がそのための一助となれば幸いです。