Web担当者なら誰もが気になる「コアウェブバイタル」。Googleの検索順位に影響するとされていますが、具体的にどう対応すべきか悩んでいる方も多いのではないでしょうか。

この記事では、コアウェブバイタルの基本的な概念から、各指標の意味、効果的な改善方法まで、実務に役立つ情報をわかりやすく解説します。

サイト運営やSEO対策に携わる方々にコアウェブバイタル対策に取り組むためのヒントとなれば幸いです。

コアウェブバイタル(Core Web Vitals)とは

コアウェブバイタルとは、Webサイトのユーザー体験(UX)を評価するための指標です。

2021年からGoogleの検索ランキング要因の一つとして導入され、「ページの読み込み速度」、「操作への反応性」、「視覚的な安定性」の3つを測定します。

Webサイトの品質を評価する際、Googleはコンテンツの質を最も重視していますが、同じような質のコンテンツがいくつも存在する場合、コアウェブバイタルのスコアが良好なページが上位に表示されやすくなる可能性があります。

上位表示を狙うためにも、コアウェブバイタルを改善する必要があるでしょう。

ImageFlux画像変換・配信エンジンとは?

コアウェブバイタルの3つの指標とは

コアウェブバイタルは、LCP、INP、CLSという3つの指標で構成されています。

指標 概要
LCP(Largest Contentful Paint) 読み込みパフォーマンスの測定
INP(Interaction to Next Paint) インタラクティビティの測定
CLS(Cumulative Layout Shift) 視覚的安定性の測定

【参考】web.dev|Web Vitals

2024年3月12日、それまでFID(First Input Delay)として使われていた指標が、より包括的に測定できるINP(Interaction to Next Paint)に置き換えられました。

この変更により、ページ全体の応答性をより正確に評価できるようになりました。

【参考】web.dev|3 月 12 日に「Interaction to Next Paint」がウェブに関する主な指標に

LCP(Largest Contentful Paint)

LCPは、ページ内の最も大きなコンテンツが表示されるまでの時間を測定する指標です。ユーザーがページの主要なコンテンツをどれだけ早く見ることができるかを示します。

たとえば、ブログ記事であれば本文やメイン画像、ECサイトであれば商品画像などが表示されるまでの時間を計測します。

良好なユーザー体験を提供するには、LCPを2.5秒以内に抑えることが推奨されています。2.5秒から4.0秒は改善が必要とされ、4.0秒以上は遅いと判断されます。

【参考】web.dev|Largest Contentful Paint(LCP)

INP(Interaction to Next Paint)

INPは、ユーザーがページ上で行う操作(クリックやタップ、キーボード入力など)に対して、ページがどれだけ素早く反応するかを測定する新しい指標です。

具体的には、ユーザーの操作から次の画面更新までの時間を計測します。たとえば、ボタンをクリックしてから反応が表示されるまでの時間や、フォームに入力してから文字が表示されるまでの時間などが含まれます。

良好なユーザー体験を提供するには、INPを200ミリ秒未満に保つことが推奨されています。200ミリ秒から500ミリ秒は改善が必要とされ、500ミリ秒を超えると質が低いと判断されます。

【参考】web.dev|Interaction to Next Paint(INP)

CLS(Cumulative Layout Shift)

CLSは、ページの読み込み中や読み込み後に、コンテンツの位置が予期せず移動する度合いを数値化した指標です。

たとえば、記事を読んでいる途中で広告が突然表示されてテキストが押し下げられたり、画像の読み込みによってレイアウトが変化したりする現象を測定します。

このような予期せぬ移動は、ユーザーの操作ミスを引き起こしたり、読んでいた箇所を見失わせたりするため、ユーザー体験を著しく低下させます。

良好なユーザー体験を提供するには、CLSを0.1未満に抑えることが推奨されています。0.1から0.25は改善が必要とされ、0.25を超えると不十分と判断されます。

【参考】web.dev|Cumulative Layout Shift(CLS)

コアウェブバイタルのSEOへの影響

コアウェブバイタルが検索順位に与える影響について、Googleは公式見解として以下のように述べています。

Core Web Vitals は、Google のランキング システムで使用されます。検索で成功し、全般的に優れたユーザー エクスペリエンスを確保するには、サイト所有者が優れた Core Web Vitals を達成することをおすすめします。Search Console のCore Web Vitals レポート やサードパーティ ツールなどのレポートで良い結果が得られても、ページが Google 検索結果の上位に表示されることを保証するものではないことに注意してください。優れたページ エクスペリエンスには、Core Web Vitals スコア以上の要素があります。これらのスコアは、ユーザー全体にとってサイトを改善するのに役立つことを目的としており、SEO の理由だけで完璧なスコアを取得しようとするのは、時間の無駄になる可能性があります。
※日本語訳(原文は英語)

【引用】Google Search Central|Understanding page experience in Google Search results

ここからわかることは、コアウェブバイタルは確かに重要な要素の一つですが、それだけで上位表示が保証されるわけではないということです。

一方で、コアウェブバイタルという指標の本質的な価値は、サイトを訪れたユーザーの体験をより良いものにすることです。
コアウェブバイタルがGoogleのランキングシステムに組み込まれた背景には、Google検索をしたユーザーを、よりユーザー体験価値の高いページにランディングさせたいという意図があります。この意図を加味しつつ、コンテンツの品質向上と併せて改善に取り組むことで、めぐりめぐって検索順位の向上を見込むことができるでしょう。

コアウェブバイタルの計測方法

コアウェブバイタルの計測にはいくつものツールが用意されており、目的や用途に応じて使い分けることができます。

こうしたツールは、実際のユーザーデータを使用した「フィールドデータ」と、シミュレーション環境での「ラボデータ」の2種類に大きく分けられます。

各ツールとそれが有効なケースを表にまとめました。

ツール 有効なケース
Google Search Console
  • サイト全体の傾向を把握したい
  • 問題のあるページを特定したい
  • モバイルとPCを比べたい
  • 改善の進捗を継続的に監視したい
PageSpeed Insights
  • 特定のページを詳しく分析したい
  • 実ユーザーデータと技術的な分析のどちらも必要
  • 具体的な改善を提案してほしい
  • モバイルとPCの両方を確認したい
Chrome UX Report
  • 競合サイトと比較したい
  • 業界全体をベンチマークしたい
  • 大規模なデータ分析をしたい
  • 過去のトレンドを確認したい
Lighthouse
  • 開発環境でテストしたい
  • 技術的分析が必要
  • CI/CDパイプラインに組み込みたい
  • パフォーマンス以外の指標も確認したい
Web Vitals
  • リアルタイムでの計測が必要
  • 特定のページを継続的に監視したい
  • ブラウザ拡張機能として使いたい
  • 簡易的な確認をしたい
Lumar
  • 大規模サイトを一括で分析したい
  • 高度なテクニカルSEO分析が必要
  • カスタマイズされたレポートが必要
  • 自動化された監視が必要

Google Search Console

Google Search Consoleは、Webサイトの所有者向けに提供される無料の計測ツールです。「ウェブに関する主な指標」のセクションで、コアウェブバイタルの状況を確認できます。

モバイルとPCそれぞれについて、LCP、INP、CLSの状態が「良好(GOOD)」、「改善が必要(NEEDS IMPROVEMENT」、「不良(POOR)」の3段階で表示されます。

また、問題のあるURLをグループ化して表示するため、優先的に改善すべきページを特定しやすいという特徴があります。

PageSpeed Insights

PageSpeed Insightsは、URLを入力するだけで簡単にコアウェブバイタルを計測できるツールです。実際のユーザーデータに基づく「フィールドデータ」と、シミュレーション環境での「ラボデータ」の両方を提供します。

改善策も表示されるため、技術的な知識が少ない方でも対策を検討しやすいのが特徴です。

モバイルとPCそれぞれについて、スコアと改善のためのアドバイスが得られます。フィールドデータでは過去28日間の実績値が確認でき、ラボデータでは具体的な改善点が示されます。

Chrome UX Report

Chrome UX Reportは、実際のChrome ブラウザユーザーから収集された使用データを基にした報告書です。数百万のWebサイトについて、ユーザー体験データを提供します。

BigQueryを使用してデータにアクセスして、分析が可能です。Origin Summaryでは、ドメインレベルでの評価を確認できます。

競合サイトとの比較や業界全体のベンチマークとしても活用できる点が特徴です。ただし、一定以上のトラフィックがないと十分なデータが得られないというデメリットもあります。

Lighthouse

Lighthouseは、Chromeブラウザの開発者ツールに組み込まれた性能評価ツールです。コアウェブバイタルに加えて、アクセシビリティやSEO、PWA対応状況なども含めた総合的な評価が可能です。

開発環境での継続的なテストに適しており、CI/CDパイプラインにも組み込めます。シミュレーション環境での測定のため、実際のユーザー体験とは異なる場合がありますが、技術的な問題の特定と改善に役立ちます。

また、テスト環境を一定に保てるため、改善前後の比較が容易です。

Web Vitals

Web Vitalsは、Chromeブラウザの拡張機能として提供される計測ツールです。ページを表示しながらリアルタイムでコアウェブバイタルを確認できるのが最大の特徴です。

LCP、INP、CLSの値がブラウザ上部に常時表示され、値の変化も即座に反映されます。開発者やデザイナーが作業中にすぐパフォーマンスを確認できる手軽さが魅力です。

ただし、あくまで簡易的な確認ツールであり、詳しい分析には他のツールと組み合わせる必要があります。

Lumar

Lumarは、大規模なWebサイトの分析に特化した有料の専門ツールです。サイト全体を自動でクロールし、コアウェブバイタルを含む技術的な問題を検出します。

複数のページを一括で分析できるため、大規模サイトの管理に向いているでしょう。また、カスタマイズ可能なレポート機能や、継続的な監視機能も備えています。

SEO対策を本格的に行いたい場合や、大規模なサイトを管理する場合に特に有効です。

コアウェブバイタルの改善方法

コアウェブバイタルの改善には、各指標に特化した対策が必要です。
3つの指標それぞれについて、改善方法を説明します。

LCPの改善方法

LCPを改善するには、ページの読み込み速度を最適化する必要があります。

画像を最適化・圧縮する

画像はWebサイトのコンテンツ容量の大部分を占めるため、画像の最適化は、サイトの表示速度を左右します。
WebPなどの次世代フォーマットを採用し、ImageFluxなどのツールで最適化することで、画質を維持しながらファイルサイズを削減できます。
また、デバイスの画面サイズに応じた適切な画像サイズを提供することも大切です。

ImageFlux画像変換・配信エンジンとは?

必要性の低い画像を削除する

ブランディングやデザイン性を重視するあまり、要らない画像を使用していないか見直しましょう。
装飾的な要素はCSSで代用したり、アイコンはSVGを使用したりするなど、代替手段がないか検討します。

必要性の低い画像を削除することで、ページの読み込み時間を短縮できます。

応答時間の速いサーバーを利用する

サーバーの応答速度は、LCPに直接影響します。レンタルサーバーを使用している場合は、高速なサーバーへの移行を検討しましょう。
また、CDN(コンテンツデリバリーネットワーク)の利用も、応答速度の改善に効果的です。

不要なJavaScriptやCSSは削除・遅延読み込みを設定する

使用していないJavaScriptやCSSファイルを削除し、必要なものは圧縮しましょう。
また、ページ表示にすぐ必要でないスクリプトには遅延読み込みを設定し、初期表示の速度を向上させます。

INPの改善方法

INPを改善するには、ユーザーの操作に対する応答性を向上させる必要があります。

不要なJavaScriptを削除する

広告タグや計測タグなどのJavaScriptコードを見直し、本当に必要なものだけを残します。デベロッパーツールを使用して未使用のコードを特定し、削除することでページの応答性が向上します。
ただし、他のページでの使用有無も確認してから削除するようにしましょう。

必要性の低いJavaScriptに遅延読み込みを設定する

ページの初期表示に必須でないスクリプトには、async属性やdefer属性を設定して遅延読み込みを実装します。
重要なコンテンツの表示を優先しつつ、バックグラウンドでスクリプトを読み込むことができ、ユーザー体験が向上します。

オフスクリーン画像に遅延読み込みを設定する

画面外(オフスクリーン)の画像には、loading="lazy"属性を設定します。簡単な実装で、初期表示時の読み込み負荷を軽減できます。
ただし、ファーストビューに表示される重要な画像には設定しないよう注意が必要です。

長いJavaScriptのタスクは分割する

メインスレッドを50ミリ秒以上占有する処理は、複数の小さなタスクに分割します。
setTimeoutなどを使用して処理を分散させることで、ユーザーの操作に対する応答性を維持できます。
特に重い処理は優先して分割を検討しましょう。

Webワーカーを使用する

UI以外の処理は、Webワーカーを使用してバックグラウンドで実行することで、メインスレッドの負荷を軽減できます。
データの計算や加工など、UIに直接関係しない処理をWebワーカーに移行することで、ページの応答性が向上します。

CLSの改善方法

CLSを改善するには、ページの視覚的な安定性を確保する必要があります。

画像サイズを指定する

すべての画像要素にwidth属性とheight属性を指定しましょう。ブラウザは画像の読み込み前からスペースを確保でき、レイアウトのずれを防ぐことができます。
レスポンシブデザインでも、アスペクト比を維持する設定が大切です。

広告表示領域を確保する

広告が表示される領域は、あらかじめ適切なサイズで確保します。最大サイズの広告に合わせてスペースを確保しつつ、無駄な余白ができないよう注意してください。
また、広告の読み込み状況に関わらず、レイアウトが安定するよう設定することが重要です。

Webフォントの表示を最適化する

Webフォントの読み込みによるテキストのちらつきを防ぐため、font-display: swapを設定し、代替フォントへスムーズに切り替えます。
また、重要なフォントは事前読み込みを設定し、FOUTやFOITによるレイアウトの変化を最小限に抑えることが大切です。

コアウェブバイタルの改善にImageFluxを活用

コアウェブバイタルの改善において、画像の最適化は欠かせないポイントの一つです。さくらインターネットが提供する「ImageFlux」は画像を最適化するサービスです。

ImageFluxは、主に3つの機能でコアウェブバイタルの改善に貢献します。

まず、1枚のオリジナル画像からさまざまなサイズや形式の画像を動的に生成できます。デバイスに応じた最適なサイズの画像を提供することで、LCPの改善につながります。
特にWebPへの自動変換機能は、ファイルサイズを削減しながら画質を維持することが可能です。

また、国内の拠点を活用した高速なキャッシュ配信により、画像の読み込み時間を短縮します。CLSの改善にも役立つでしょう。画像のサイズや形式が事前に確定するため、レイアウトのずれも防ぐことができます。

既存のCDNやストレージと連携して、導入が簡単なことも特徴です。数分の設定で利用を開始でき、日本語による充実したテクニカルサポートも提供されています。
ImageFluxを活用することで、開発者の工数を抑えながら効率よくコアウェブバイタルを改善できます。

まとめ

コアウェブバイタルは、Webサイトのユーザー体験を評価する重要な指標であり、Googleの検索ランキングにも影響を与えます。LCP、INP、CLSの3つの指標それぞれについて、適切な改善策を実施することが重要です。

ただし、コアウェブバイタルの完璧なスコアを追求することよりも、コンテンツの質を維持しながら、ユーザー体験を総合的に改善することを意識しましょう。

各種測定ツールを活用して現状を把握し、ImageFluxなどのサービスも利用しながら、継続的な改善を進めることが望ましいアプローチと言えます。

ImageFluxの無料トライアルを試す

構成・執筆・編集

ImageFluxチーム

さくらインターネットとピクシブで共同開発・提供している、クラウド画像変換サービス・ライブ配信エンジンサービス「ImageFlux」のチームです。

2024年1月30日公開

まずは体験してください。
すべての機能をお試しいただけます。

※サービスの詳細・お申し込みは、各サービスページをご確認ください。