CWV（コアウェブバイタル）とは？SEOとの関連性と改善方法8選

CWV（コアウェブバイタル）という言葉を聞いたことはありますか？

CWVとは、Googleが提唱するWebサイトのユーザー体験を評価する指標で、ページの表示速度に関わるものです。

本記事では、CWVの詳細とそれを改善するための具体的な方法をご紹介します。

参考：『Core Web VitalsとGoogle検索の検索結果について | Google検索セントラル』
関連記事：『Webページの表示速度を上げる改善策7選！計測方法も紹介』

CWV（コアウェブバイタル）について

Core Web Vitalsは2021年5月にGoogleが発表したUX（ユーザー体験）についての指標です。

Core Web Vitalsには、 「LCP」「INP（FID）」「CLS」 の3つの指標があり、Googleではそれぞれ以下のように説明されています。

• Largest Contentful Paint（LCP）: 読み込みパフォーマンスの尺度。優れたユーザー エクスペリエンスを提供するには、ページの読み込み開始から2.5秒以内にLCPを実現するようにします。

• First Input Delay（FID）: インタラクティブ性の尺度。優れたユーザー エクスペリエンスを提供するには、FIDを100ミリ秒未満に収めるようにします。2024年3月以降、Interaction to Next Paint（INP）がFIDに代わってCore Web Vitalsの一つになります。

• Cumulative Layout Shift（CLS）: 視覚的安定性の尺度。優れたユーザーエクスペリエンスを提供するには、CLSスコアを0.1未満に収めるようにします。

引用：『Core Web VitalsとGoogle検索の検索結果について | Google検索セントラル 』

それぞれのスコアは 「Good（良好）」「Needs Improvement（改善の必要あり）」「Poor（内容の見直しが必要）」の3つで評価されます。

引用：『Google Search Console』

また、いずれかの指標に問題があるとサーチコンソールで警告が表示されます。

参考：『Core Web VitalsとGoogle検索の検索結果について | Google検索セントラル』
参考：『【専門家が解説】Core Web Vitals（コアウェブバイタル）とSEOとページ表示速度』
関連記事：『Googleサーチコンソールの使い方とは？7つの機能でSEO対策』

Largest Contentful Paint（LCP）

引用：『Largest Contentful Paint（LCP）- web.dev 』

LCPは、ページ上で最も大きなコンテンツ要素が表示されるまでの時間を測る指標です。

具体的にはトップページのメインビジュアルとなっている画像やスライダーが挙げられます。

ユーザーがページの主要なコンテンツをどれだけ早く見ることができるかを示しており、時間が短いほど、ユーザーにとってストレスのない素早い体験が提供されるとされています。

LCPの目標値は以下の通りです。

LCPは、メインビジュアルとして使用している画像やJava Scriptなど読み込むファイルが大きいと長くなる傾向があるため、使用する画像を可能な限り軽量化するなどの対応が求められます。

参考：『Largest Contentful Paint（LCP）- web.dev』
参考：『LCP(Largest Contentful Paint)とは？改善方法やSEOへの影響』

Interaction to Next Paint（INP）

引用：『Interaction to Next Paint（INP）- web.dev』

INPは、ユーザーがページでインタラクション（クリックなどの行動）をしてから、ブラウザが応答するまでの時間を測定します。

例えば、リンクをクリックしたり、フォームに入力したりといったユーザーのアクションに対して、どれだけ早くページが反応するかといった指標になります。

2024年3月以前は、FIDと呼ばれる指標で、最初のインタラクションのみが対象でしたが、 INPではユーザーがページに滞在している間のすべてのインタラクションが対象になりました。

引用：『Interaction to Next Paint（INP）- web.dev』

INPの目標値は以下の通りです。

INPが低下する原因はJava Scriptを多用している、画像が多いまたはサイズが大きい、サーバー負担が大きいなどが挙げられます。

参考：『Interaction to Next Paint（INP）- web.dev』
参考：『Core Web Vitalsの新指標「INP」とは？計測方法、改善方法を解説』
参考：『注目の新指標INPとは？FIDとの違いや改善方法、計測ツールまで徹底解説』

Cumulative Layout Shift（CLS）

引用：『Cumulative Layout Shift（CLS）- web.dev』

CLSは、ページの読み込み中や読み込み後に、コンテンツがどの程度安定しているかを測定します。

例えば、ページを表示中に、広告が表示されてコンテンツがずれた経験はないでしょうか？

このようにページを読み込んでいる途中で広告が表示されて記事がずれたり、画像の読み込みが遅れて他のコンテンツの位置が変わったりするような現象を定量化します。

これらの予期せぬレイアウトの変化は、ユーザー体験を著しく損なう可能性があるためです。

CLSの目標値は以下の通りです。

数値は移動要素の大きさと距離で算出されます。

CLSは画像サイズやifreamのサイズが指定されてない、動的コンテンツの挿入、Webフォントの多用などが低下の原因となります。

参考：『Cumulative Layout Shift（CLS）- web.dev』
参考：『累積レイアウトシフト(CLS)対策の基礎知識』
参考：『CLSとは？ 低下要因と改善方法をわかりやすく解説』

CWVとSEOの関連性

では、この CWVは実際にSEOにどのような影響を与えているのでしょうか。

CWVはSEOや検索順位への影響力はそれほど大きくないとされています。

実際に、SEOツールの開発・提供を行う『Mozの調査』では、CWVの基準をいずれも満たしていないサイトは一定期間の間で順位を大きく落としたのに対し、基準を満たしたサイトはそれほど順位が変化していないと発表しています。

しかしながら、Googleが公開した『Core Web Vitalsのビジネスへの影響』では、CWVの指標によるWebページの変更で売り上げや滞在時間、ページビューを改善したケーススタディが紹介されています。

• cdiscount では3つの指標がすべて改善され、ブラックフライデーセールの収益が6%増加しました。

• Wixは、Core Web Vitalsに合格したモバイルオリジンを前年比で250%以上増やしました。

• Nykaaでは、LCPが40% 改善したことで、T2とT3の都市からのオーガニックトラフィックが 28%増加したことが確認されました。

• LCPを18%改善した結果、セッションあたりのページビュー数が9%増加。

• NDTVは、LCP を半減させた後、その他のプロダクトの変更とともに直帰率を50%改善しました。

• LCPが70%改善したAgrofy Marketは、読み込みの放棄が76%減少しました。

引用：『 Core Web Vitals のビジネスへの影響 | web.dev 』

CWVの改善はユーザー体験の向上だけでなく、実際のビジネス指標にも影響を与えていることが分かります。

このことから、CWVの3つの基準はあくまでWebページのユーザー体験を向上させるための要素であり、SEOに関しては全体における一部分であることが分かります。

CWVの改善だけで順位が大幅に向上するわけではなく、コンテンツの質や外部リンクの獲得など、他の要素とのバランスが重要です。

参考：『Core Web Vitals のビジネスへの影響 | web.dev』
参考：『【専門家が解説】Core Web Vitals（コアウェブバイタル）とSEOとページ表示速度』
参考：『コアウェブバイタルとは？指標やSEOへの影響、対策方法までわかりやすく解説』
参考：『Performance as a Ranking Factor: State of the Web and CWV – Moz』

【指標別】CWVを改善する方法8つ

CWVは、SEOに大きく影響する指標ではありませんが、 CWVの指標に沿ってないWebサイトに順位低下のリスクがあることを考えると、外して考えることはできません。

また、指標に沿った改善を行う効果は売り上げ、コンバージョンの増加やPVの改善など多岐にわたります。

では、実際にCWVを良好にするにはどんな方法があるのか、8つの主なアプローチについて解説し、具体的な実践方法をお伝えします。

LCPの改善

LCPを改善するためには、主にページの読み込み速度を向上させることが求められます。

具体的には、サーバーの応答時間を短縮し、リソースの優先順位を最適化することが効果的です。

また、ページのロードを遅くしている要素を排除することで、ユーザーに対する初期コンテンツの表示速度を向上させることが可能です。

画像やHTML、CSSの軽量化

Webページを構成する主要な要素である画像、HTML、CSSをを最適化することで、ページの読み込み速度を向上させることができます。

例えば、JPEGやPNG形式の画像はWebPなどの次世代フォーマットに変換することで、画質を保ちながらファイルサイズを削減できます。

実際にGoogleは、WebPの可逆圧縮をした画像は、通常のPNG画像と比較して26％もファイルサイズを削減することができると述べています。

※WebPとは、画像の質を落とさずに復元できる「可逆圧縮」と画像の質をあまり落とさずにファイルサイズを抑えて復元する「非可逆圧縮」が可能な最新の画像形式を指します。

また、ツールを使って画像を圧縮し、不要なメタデータを除去することで、表示速度の向上を図ることも推奨されます。

HTMLとCSSは不要なスペースやコメント、改行を削除など記述を最小限にすることで、コードのファイルサイズを縮小できます。

さらに、外部スタイルシートやJavaScriptファイルの読み込みを最適化し、CSSを可能な限りシンプルにすることで、LCPに影響を与えるページの構造が素早く描画されるようになります。

参考：『LCPを劇的に改善？サイトが遅いと思ったらまずチェックすべき5つの方法』
参考：『LCP改善で快適なWebサイトを実現！問題点や改善方法を解説』
参考：『WebPとは？メリットやほかの画像ファイル形式との違い・変換方法を詳しく解説』
参考：『ウェブ用の画像形式 | WebP』

画像の遅延読み込み（Lazy Loading）の導入

Lazy Loadingは、ユーザーが画面にスクロールして画像が表示されるタイミングで初めてその画像を読み込む技術です。

通常、画像はページ読み込み時にすべて一斉にロードされますが、大量の画像が含まれるページでは、LCPの遅延の原因となります。

Lazy Loading によりページの初期読み込み時にすべての画像を一度に読み込む必要がなくなり、LCPの指標に大きく影響するファーストビューの表示が高速化されます。

さらに、Lazy Loadingは、サーバーへのリクエスト数を減らすため、全体の読み込み時間を短縮し、データの節約にもつながります。

Lazy Loading の基本的な仕組みは以下のようになっています。

Lazy Loadingは以下のような実装方法があります。

参考：『LCPを劇的に改善？サイトが遅いと思ったらまずチェックすべき5つの方法』
参考：『LCP改善で快適なWebサイトを実現！問題点や改善方法を解説』
参考：『Lazy Loadとは？メリットや注意点・実装方法を解説』
参考：『Lazy Loadとは？メリットやデメリット・実装する方法をわかりやすく解説』

サーバーの応答時間を短縮する

サーバーの性能が低い、サーバーのスペックに対してWebサイトページの容量が大きい、訪問者が多すぎるなどの原因で、サーバーの応答時間が長くなる場合があります。

サーバーがページリクエストに対して迅速に応答できれば、ユーザーに最も重要なコンテンツが早く表示され、ページ全体のパフォーマンスが向上が期待できます。

応答時間はサーバーの性能によるところが大きいため、まずWebページのコンテンツや訪問者数にあったサーバーを選択しましょう。

また、サーバーにキャッシュなど不要なファイルが多い場合はキャッシュを削除することで応答時間が改善することがあります。

コンテンツデリバリーネットワーク（CDN）の導入も効果的です。

CDNとはユーザーの地理的に近いサーバーからコンテンツを配信する仕組みです。

複数のサーバーを利用することで、Webサイトのホストとなっているサーバーから直接データを配信する場合に比べて読み込みの遅延を減らすことが可能です。

自社内にサーバーがある場合は CPUやメモリ、ストレージなどのサーバーリソースを増強や負荷分散システムの導入も検討しましょう。

参考：『LCPを劇的に改善？サイトが遅いと思ったらまずチェックすべき5つの方法』
参考：『LCP改善で快適なWebサイトを実現！問題点や改善方法を解説』
参考：『CDNとは | CDNの仕組みとメリット』
関連記事：『UIとUXはSEOに関係ある?知っておきたい12のポイントを解説』

INPの改善

INPの改善は、ページの応答性を高め、ユーザーがストレスなくサイトを操作できるようにします。

ユーザーが操作するフォームやボタン、メニューなどのインタラクティブ要素の応答速度を向上させることで、全体的なユーザー体験を大幅に改善できます。

INPの改善は、まず問題がどこで起きているかの究明が重要です。

データの処理中か、表示中での遅延か、フィールドの入力時に発生するかでどのファイルを修正するか対応が異なります。

不要なJavaScriptの削減

フィールドが多いなど、JavaScriptが多用されるページでは、処理が重いスクリプトがユーザーの操作に対する応答を遅延させ、インタラクションの遅さに直結します。

これを解消するには、不要なJavaScriptコードを削減し、ページの読み込み時に実行するスクリプトを最小限に抑えるのが効果的です。

不要な JavaScriptを削減する方法は以下が挙げられます。

以下は、筆者の経験に基づいた「不要な JavaScriptを削減する方法」となります。

最適化の過程では機能性を損なわないよう注意が必要です。

また、定期的にコードを見直し、継続的な最適化を行うことも重要です。

参考：『注目の新指標INPとは？FIDとの違いや改善方法、計測ツールまで徹底解説』

ブラウザのメインスレッドの負荷を減らす

スレッドとは、コンピュータがプログラムを実行する際の基本的な処理単位を指します。

ブラウザは複数のスレッドを使用して、ユーザーがWebページを操作する際の様々なタスクを同時に実行しています。

その中でも、メインスレッドは、HTMLやCSSのレンダリング、ユーザーの操作に対するイベント処理、JavaScriptの実行など、ページのインタラクションに直結する重要な役割を担っています。

メインスレッドが過負荷になると、ページの応答が遅くなり、INPが悪化します。

メインスレッドの負荷を軽減するには以下の方法が挙げられます。

また、WordPressなどのCMSなどを利用している場合は不要なプラグインを削除するなどの対応ができます。

参考：『Interaction to Next Paint（INP）とは？Core Web Vitals の新たな指標を解説』
参考：『メインスレッド速度改善でSEO対策：PageSpeed Insightsに基づくリスクと対策5選』
参考：『メインスレッド処理の最小化」の意味と対処法を分かりやすく解説！』
参考：『Speed Index（SI）とは？概要から改善方法まで解説』

CLSの改善

CLSの改善は、ページのレイアウトが動くのを最小限に抑制することが重要です。

高いCLSスコアは、ページ読み込み中や操作中に予期せぬレイアウトの変化が頻繁に発生していることを意味し、誤クリックや読み間違いの原因となります。

レイアウトが崩れる原因は、画像や動画、Webフォント、広告のいずれかが適切に設定されていないといったパターンが多いです。

画像と動画のサイズ指定

画像や動画が読み込まれる際、サイズが指定されていないと、ブラウザはそれらをロードするまで領域を確保しないため、ページ全体のレイアウトが突然変わる原因になります。

このような予期せぬレイアウトシフトは、ユーザーの操作ミスや不快な体験を引き起こす可能性があります。

サイズを指定することで、ブラウザはメディアのロード前に適切な領域を確保でき、読み込みが完了していない間でもページのレイアウトが安定します。

これにより、テキストや他の要素が急に動くことがなくなり、スムーズな表示が実現されます。

画像や動画のサイズ指定は、HTMLタグで幅（width）と高さ（height）を設定するか、CSSでそのスタイルを定義することで簡単に行うことができます。

また、レスポンシブデザインを採用する場合でも、相対的なサイズ指定やアスペクト比を使用して、異なるデバイスや画面サイズに応じた適切な表示を維持することが可能です。

これにより、CLSが発生するリスクを減らし、ユーザー体験の向上につながります。

参考：『CLSとは？ 低下要因と改善方法をわかりやすく解説』
参考：『CLSを改善してより良いユーザー体験を！CLSの計測から改善方法までを解説』

Webフォントを多用しない

Webフォントを使用すると、ページの読み込み中にフォントが適用されるまで一時的にテキストがデフォルトフォントで表示され、その後フォントが読み込まれると急にレイアウトが変わることがあります。

これがCLSの原因となり、ユーザーに不快な体験を与える可能性があります。

特に、フォントが遅れて読み込まれる「FOIT（Flash of Invisible Text）」や、フォントが一度デフォルトで表示されてから突然切り替わる「FOUT（Flash of Unstyled Text）」が、レイアウトのシフトを引き起こす原因です。

これを防ぐためには、Webフォントの読み込みを最適化し、必要以上に多用しないことが重要です。

改善策として、システムフォントの利用を検討するのも効果的です。

システムフォントはデバイスにあらかじめインストールされているため、読み込み時間がほとんどなく、CLSを防ぐのに役立ちます。

また、Webフォントを使用する場合は、「font-display: swap」などのCSSプロパティを使って、フォントが読み込まれるまで代替フォントを表示する方法もあります。

参考：『CLSとは？ 低下要因と改善方法をわかりやすく解説』
参考：『CLSを改善してより良いユーザー体験を！CLSの計測から改善方法までを解説』
参考：『font-display – CSS: カスケーディングスタイルシート | MDN』

広告やポップアップの配置を安定させる

広告やポップアップがページ読み込み中に突然表示されると、他のコンテンツが押し下げられるなど、レイアウトが予期せぬ形で変わることがあります。

広告やポップアップの配置を安定させるためには、まずそれらの領域をあらかじめ確保しておくことが効果的です。

広告が読み込まれる前に、指定されたサイズの空間を予約しておくことで、読み込み後にレイアウトが大幅に変わることを防ぐことができます。

また、レスポンシブ広告の場合でも、異なる画面サイズに対応できるよう、広告スペースの最小サイズを指定しておくと良いでしょう。

さらに、広告やポップアップが画面内に急に表示されないよう、非同期で読み込み、ページ上の他の要素に影響を与えないようにすることも重要です。

これにより、ユーザーがページをスクロールしている最中に突然レイアウトが変わることを防げます。

参考：『CLSとは？ 低下要因と改善方法をわかりやすく解説』
参考：『CLSを改善してより良いユーザー体験を！CLSの計測から改善方法までを解説』

CWVの計測ツールを紹介

CWVの計測には、さまざまなツールが提供されており、開発者や運用担当者はこれらを活用して具体的なデータを取得し、パフォーマンスの最適化を進めることが可能です。

本セクションでは、CWVの主要な計測方法や、それをサポートするツールについて解説します。

PageSpeed Insights

引用：『PageSpeed Insights』

PageSpeed Insightsは、Googleが提供する無料のウェブパフォーマンス計測ツールです。

PageSpeed Insightsは、ページの読み込み速度やユーザー体験に関するデータを提供し、「LCP」「FID」「CLS」の3つの主要な指標を分析します。

引用：『PageSpeed Insights』

PageSpeed Insightsでは、ページのパフォーマンスをモバイルとデスクトップの両方で評価し、スコアを提示します。
引用：『PageSpeed Insights』

さらに、PageSpeed Insightsは、具体的な改善提案も提示してくれるため、何をどのように修正すればパフォーマンスが向上するのかが分かりやすくなっています。

引用：『PageSpeed Insights』

たとえば、画像の圧縮やJavaScriptの最適化、キャッシュの活用など、技術的な改善点がリスト化されます。

参考：『PageSpeed Insights』
参考：『【徹底ガイド】Google PageSpeed Insights』

Chrome UX Report（CrUX）

引用：『Chrome UX Report（CrUX）』

Chrome UX Report（CrUX）は、Googleが提供する実際のユーザーのブラウジングデータを基に、Webページのパフォーマンスを評価するツールです。

このツールでは、リアルユーザーのデータを集めて、「LCP」「FID」「CLS」を測定し、実際の環境下でのWebページのパフォーマンスがどのようにユーザーに影響を与えているかを正確に把握できます。

CrUXは、Chromeブラウザを使用している世界中のユーザーの匿名化されたデータを収集し、ページのパフォーマンスをグローバルな視点で評価できる点が特徴です。

また、ユーザーのデバイスやネットワーク環境を考慮した指標を提供するため、より現実に即したパフォーマンスデータを取得できます。

さらに、Googleのデータポータルを通じてアクセス可能で、膨大なデータセットを分析し、特定のページやドメインに関する情報を得ることができます。

分析は所有していないサイトでも可能で、競合他社のUX分析もできます。

参考：『競合も分析できる！Chromeユーザーエクスペリエンスレポートの使い方［CrUX］』
参考：『Chrome UX Report APIによるCore Web Vitalsの計測』
参考：『CrUXの概要 | Chrome for Developlers』

Lighthouse

引用：『Lighthouse – Chrome ウェブストア』

Lighthouseは、Googleが提供するオープンソースのツールで、Webページのパフォーマンス、アクセシビリティ、SEOなどを総合的に評価できるツールです。

Lighthouseは、Chromeブラウザの開発者ツールやコマンドライン、またはLighthouse CIなどで実行でき、簡単にパフォーマンスチェックが可能です。

開発者ツールのLighthouseはローカル環境でも動作します。

開発者がローカル環境でサイトのパフォーマンスを調査し、リリース前に問題点を発見することも可能です。

Core Web Vitals（CWV）の計測においては、「LCP」「FID」「CLS」を分析するほか、分析結果に基づき、具体的な改善提案を提供します。

たとえば、画像の圧縮やJavaScriptの削減、キャッシュの最適化など、Webサイトのパフォーマンスを向上させるための詳細なアドバイスが含まれます。

参考：『Lighthouseとは？Google公式SEOツールの機能と改善法を解説！』
参考：『Lighthouseとは？~概要と使用方法を解説~』
参考：『Lighthouse Chrome拡張機能に追加されたSEO監査カテゴリのご紹介 | Google検索セントラルブログ』
関連記事：『SEO対策に必須のChrome拡張機能8選！具体的機能も含めて紹介』

まとめ

Largest Contentful Paint（LCP）、 Interaction to Next Paint（INP） 、Cumulative Layout Shift（CLS）、3つの指標は複雑に見えますが、いずれもWebページの読み込みや操作のパフォーマンスに関わるもので、それぞれ関わる部分もあります。

例えば、 FIDの向上を目指してJavaScriptを軽量化した結果、LCPも改善した、ということも可能です。

この記事を読んで、CWVの最適化が難しいと少しでも感じたら、広告代理店に任せるのも一つの手です。

株式会社Unionでは、Webサイト制作をはじめとするデジタルマーケティング全般のご相談を承っております。

Google広告、Yahoo!広告の正規代理店として認定されており、蓄積されたノウハウから短期間で課題を解決に導きます。

薬機法医療法遵守広告代理店の認証を受けておりますので、広告審査の厳しい薬事・医療系も対応可能です。

お客様のあらゆるニーズに対し分析・調査を行い最適なプランをご提案しますので、お気軽にご相談下さい。