【2024年10月版】コアウェブバイタルの計測と対策・改善方法

皆さんこんにちは。taneCREATIVEの「ちほうタイガー」です。
この記事は2024年10月16日に改訂しています。

本記事は、WEBプロダクション年鑑（2022）に特集として掲載された「コアウェブバイタルの計測と対策～PageSpeed Insightsで WordPressサイトを 『良好』にする方法～」を、2021年12月に出版元である株式会社アルファ企画様の承諾を頂いてコラムとして公開していた記事でしたが、PageSpeed Insightsの項目の変更も少なくなく、またWebサイトの高速化（LCP対策）のご相談も依然としてあることから、最新の情報に改訂させていただくことになりました。

この記事では、企業のWeb担当の皆様に向けて、コアウェブバイタルの測定の仕方、対策と改善方法について解説していきたいと思います。

少しでも皆様のお役に立てる記事にできればと思います。
どうぞよろしくお願い致します。

この３つのコアウェブバイタルである、「LCP」「INP」「CLS」は、モバイルとデスクトップに分けた上で、総ページロード数の75パーセンタイル（最小値から数えて75%に位置する値）をしきい値として設定されており、3つの指標すべてにおいて「良好」を達成すると、そのページは合格として判定されます。

Googleは、このページエクスペリエンスのランキングに与える影響について、次のように公表しています。

「ページエクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページエクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。優れたページエクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。しかし、同様のコンテンツを含むページが複数ある場合は、ページエクスペリエンスが検索ランキングで非常に重要になります。」

上記表現から、ページエクスペリエンスとコアウェブバイタルの重要度は低いので、それほど重視する必要はないと考える方々もおられます。

確かに、コンテンツの品質と比較すればコアウェブバイタルの重要度は低いことは間違いないでしょう。

しかしながら、良好なコアウェブバイタルを達成しているサイトは、特にユーザーエクスペリエンスの面で改善が見られ、最終的にはトラフィックの増加やコンバージョン率の向上に繋がっていると結論付けている調査結果が数多く見つかります。

また、競争の激しいキーワードでは、ほぼ上記の「同様のコンテンツを含むページが複数ある場合」にあたります。
そして、このような場合、「検索ランキングで非常に重要」になることはGoogleが公表している通りです。

つまり、コアウェブバイタルとSEO対策の関係についてまとめると、次のようになります。

・コアウェブバイタルは検索ランキングシグナルである。

・コアウェブバイタルは数多く存在するランキングシグナルの一つであり、これをクリアすれば質の低いコンテンツでも上位表示できるというものではない。

・あくまで総合的に優れた情報を含むページ（高品質なコンテンツ）が上位表示される。

・コアウェブバイタルを改善すれば、ユーザーエクスペリエンスが向上し、その結果トラフィックの増加やコンバージョン率の向上が見込める。

・競争が激しいコンテンツでは、コアウェブバイタルが非常に重要になる。

このコアウェブバイタルを測定するためのツールとしては、Chrome User Experience Reportや、ウェブに関する主な指標レポート等がありますが、最も簡単な手法は、PageSpeed Insightsになります。

使用方法は、計測したいページのURLを入力して分析をクリックするだけで、レポートが作成されますので、是非担当されているWebサイトで試してみてください。
以下、当社のコーポレートサイトのHOMEページをPageSpeed Insightsでレポーティングした結果を使いながら、解説させていただきます。

そういった理由によるかは定かではありませんが、2021年6月頃より、【サイト全体】のデータについて、【最低限2つの指標（LCP、CLS）】において、データが十分に蓄積されていれば、「オリジン」（旧UIのOrigin Summary）として、サイト全体のLCP、INP、CLSデータが表示され、コアウェブバイタルが判定されるようになりました。

本ページを例にすると、「このURL」だけではデータが不足しているため、「オリジン」データが表示されておりますが、サイト全体としてはLCP、INP、CLSについてデータが十分に蓄積されていることから、その情報に基づいてコアウェブバイタルが「合格」と判定されています。

一方で、全ての監査項目がコアウェブバイタルに関係しているわけではありません。

そこで、「次に関連する監査を表示」という欄からはFCP、LCP、TBT（INPに関する相関性を有する指標）、CLSに絞り込むことで、コアウェブバイタルの対策・改善における優先順位策定の参考にすることができます。

LCPは、ページが読み込まれてからページ内の最大のコンテンツが表示されるまでの速度を計測したものです。
Webサイトのデザインにもよりますが、多くのケースではファーストビューに存在するキービジュアル画像・動画の表示速度を指すことになるかと思います。

その為、そもそもページ内の最大画像をそこまで大きな画像にしなければ、更に言えばキービジュアル画像・動画を無くせば、LCPは自ずと向上します。
大抵のWebサイトでプライバシーポリシーなどテキストだけのページでLCPの点数が高いのはそのためです。

しかしデザインやコンテンツ内容の兼ね合いで大きなコンテンツを手放せない場合は、地道にLCP低下の原因をつぶしていく必要があります。

LCPを改善する方法として、PageSpeed Insightsの監査項目を参考にしながら、バックエンドの高速化、ネットワークの高速化、レンダリングの高速化に分類して対策・改善を実施していきます。

この高速化対策については、当社の「WordPressの高速化対策」サービスのページをご覧ください。

コアウェブバイタルの対策で最も対策が必要な指標が、このLCPになります。

INPは、ユーザーがページで行ったインタラクション（クリック、タップ、キーボード入力など）が画面に反映されるまでの遅延時間を測定する指標です。

しかしながら、ユーザーがクリック・タップなどの操作を行ってからブラウザが実際に処理を行うまでの時間については、通常の処理であればユーザーを100ミリ秒以上待たせるようなことはまず考えにくく、入力遅延の多くは、メインスレッドにおいてはJavaScriptファイル等の解析と実行が混み合っており、ブラウザがビジー状態になっていて、ユーザーの操作に対応できない時間がある場合に起こります。

この為、メインスレッドがブロックされることで、入力の応答性が妨げられる時間を計測した指標であるTBT（Total Blocking Time、合計ブロック時間）の対策と改善が、INPの対策・改善に役にたつことになります。

TBTの改善方法は、メインスレッドにおいてJavaScriptファイル等の解析と実行が混み合わないようにすることですので、基本的には前述した「WordPressの高速化対策」サービスのページにあるレンダリングの高速化対策を実施することで改善を目指すことになります。

また、「過大なDOMサイズの回避」項目で監査が失敗になる条件は以下の通りです。

・合計で1,500を超えるノードがある。

・深さが32ノードを超える。

・60を超える子ノードを持つ親ノードがある。

DOMのノードは要素のことを指しますので、htmlのタグ一つ一つとイメージすると分かり易いでしょう。
htmlのタグ数を多くしすぎないこと、階層を深くしすぎないこと、一つのタグ内に子要素を設けすぎないことをマークアップの時に意識することが、TBTやINP対策として有効と言えるでしょう。

既存サイトの場合でも、スライダーの表示数（隠れているが、見えない要素の数）等を減らすことでノードを減らすことができます。

CLSは、Webページで起きるレイアウトのずれを計測したものです。

コアウェブバイタルの対策で、LCPに次いで対策が必要な指標がCLSとなりますが、CLSの対策・改善は、LCPよりもシンプルで、原則としてCLSに関連する３つの監査項目をクリアすればCLSの対策・改善が可能です。

特にWordPressで構築されたWebサイトに関してはCLSの問題は起こりにくいので、その点も付記していきたいと思います。

①合成されていないアニメーションは使用しない

合成されていないアニメーションは、ローエンドのモバイルデバイスや、メインスレッドでパフォーマンスの重いタスクが実行されている場合に、滑らかに表示されないことがあります。
しかしながら、この監査項目については、アニメーションを合成せずに使用することは実務上ほぼ考えにくい為、この監査項目については特に問題にならないのではないかと考えております。

②レイアウトが大きく変わらないようにする

レイアウトが変わると判定されるケースで当社が把握しているものは、ユーザーの操作によらずにバナーやボタンが動くケース（JavaScriptでスクロールに追随するバナー・ボタンなどを設置している等）や、スライダーで大量の画像の読み込みに時間がかかってしまいレイアウトが動くケース、Webフォントの読み込みに時間がかかってしまいレイアウトが動くケース、Lazy Loadでの代替画像と遅延読み込みされた画像のサイズが異なる場合等があります。

対応策としては、スクロール追随型のバナーやボタンを使用しないようにする、スライダーは使用しないか最初から表示領域を確保する、Webフォントは極力使用しない、Native Lazyloadを利用するなどがあり、当社のコーポレートサイトでもこれらの対応でレイアウトが大きく変わらないようにしています。

③画像（imgタグ）や動画にwidth, heightの値を指定しておく

画像や動画にwidthやheightが指定されていないと、実際に読み込まれるまで画像のサイズがブラウザで判別されないため、これらを指定しておくことでレイアウトのずれを防止します。

また、CSSでアニメーションを行う際はtransformプロパティを使用し、width, heightやleft, topなどの値自体を変更しないようにします。

前述のように、コアウェブバイタルはランキングシグナルであり、SEO対策としても重要な指標です。

しかしながら、例えば、WordPressのような動的なCMSを使用しながら、「モバイル」でパフォーマンス100点を取るのはWeb制作会社であっても至難の業です（「PC」で100点を取るのは比較的容易です）。