コアウェブバイタル（Core Web Vitals）とは？LCP・FID・CLSの意味＆ランキング改善方法

モバイルフレンドリー

モバイルフレンドリーとはWebサイトがスマートフォン対応しているかどうかを評価する指標です。

モバイルフレンドリー化をしていなければ、検索順位の低下などの無視できない影響が出てしまいますので、しっかりと対応しておきましょう。

Webサイトがモバイルフレンドリーなのかどうかはモバイルフレンドリーテストで確認することができます。

セーフブラウジング

セーフブラウジングとは悪意あるコードやソフトウェアなどによって感染したWebサイトや不正なWebサイトにアクセスした時に、ブラウザ上に警告を表示させる仕組みのことを指します。

Webサイトが安全に閲覧できるかどうかの確認は「セキュリティの問題」レポートをご覧ください。

HTTPS

HTTPSは「Hypertext Transfer Protocol Secure」の略で、安全にデータをサーバーとWebブラウザなどの間でやり取りする際の「通信手順」を意味します。

ページのURLがhttps~ではなくhttp~で始まっている場合は、第三者によるデータの閲覧・改ざんのリスクにもなるため、対応が必要です。

邪魔をするインタースティシャルがない

インタースティシャルとは「隙間」のことで、邪魔をするインタースティシャルがないとは「ページのコンテンツにユーザーが容易にアクセスできること」を示します。

どれだけインタースティシャルによってコンテンツへのアクセスが困難になるか？は下記のページ（日本語未対応）が参考になります。

Lumar（旧：DeepCrawl）

Lumar（旧：DeepCrawl）は自動解析でトラフィックを改善するための、世界水準テクニカルSEOツールです。Lumar（旧：DeepCrawl）を活用することで、クロール中にコアウェブバイタル指標を測定することができます。

Lumar（旧：DeepCrawl）を使用したラボデータはJavaScriptレンダリングを有効化している場合に検出でき、大規模なスコアの計測に役立ちます。

他のツールを使用してページ毎に個別のテストを行う場合と比較して、かなりの時間を節約することが可能です。

PageSpeed Insights

こちらのサイトではパソコンだけではなくスマホでのデータもパフォーマンスを測定することができます。

近年ではパソコン以外にスマホでネットをチェックする人も増えていますし、パソコンとスマホでは表示の仕様が違います。

そのため、パソコンとスマホの両方の視点でシステムを診断してくれるというのは、非常に便利なツールと言えるでしょう。

ページの読み込み時間などをベースに診断して数値化できるので、具体的にどのようなところを改善すればいいのかということがわかりやすいのが大きな魅力です。

Chrome UX Report

Chrome UX ReportはUX（ユーザーエクスペリエンス）という名が示す通り、サイト上のユーザー体験を最適化するためのツールです。

自社サイトのみならず、何百万ものあるサイトのUXやパフォーマンスを確認できます。Chrome UX ReportはChromeから返された、実際のユーザーデータからなるGoogleの膨大なデータベースです。

ここで使われているデータソースは一般公開されています。データソースはGoogle CloudのBigQueryを使用して参照し、サイトのスコアを確認することが可能です。

ドメインレベルでデータを確認する際はGoogleのデータポータル（現：Looker Studio）を使用します。

ドメインを入力後、詳細なGoogleデータポータルのレポートに移動し、ユーザーデバイス毎のコアウェブバイタルに関する指標（LCP、FID、CLS）を確認して下さい。

Google Search Console（サーチコンソール）

Google Search Console（サーチコンソール）はコアウェブバイタルの対策に限らず、サイト運営者、SEO担当者に必須の無料ツールです。

サーチコンソール内の「ウェブに関する主な指標」にアクセスすると、モバイル、PCそれぞれで、サイト内にどのような問題が生じているのか（または生じていないのか）？を把握することができます。

例えば、PCに関するレポートを開くと、

ステータス：不良
型：CLS に関する問題: 0.25 超（パソコン）

のように問題が表示されます。

Chrome Devtools

Chrome DevTools （デベロッパーツール）はWebブラウザに付随する開発ツールです。

Chromeを使用中、ページを表示した状態でWindowsの場合はF12キー、Macの場合はCommand＋Option＋Iキーを押すと、デベロッパーツールが表示されます。

デベロッパーツール内の“Performance”という項目から、最大コンテンツが何なのか（LCP）？意図しないレイアウトのズレが生じていないか（CLS）？調べることが可能です。

Lighthouse

LighthouseはGoogleChromeの拡張機能を使ったものです。

サイトのパフォーマンスやアクセシビリティなどを基準にユーザー利用時の状況を細かく測定してくれます。

審査項目としては「フォントサイズ」「リンクへの誘導文字のわかりやすさ」「ページ表示の際にプラグインが必要とされないか」など細かなところまで見てくれるので、より使いやすいサイトを作るのに役立ちます。

ただ、このサイトLighthouseは2021年2月時点で英語表示のみで、日本語には対応していません。これからの成長が期待されるサイト機能の一つです。

Web Vitals Extension

こちらのサービスWeb Vitals Extensionは、Google Chromeに追加をすることによっての拡張機能を使って簡単に設定をすることができます。

閲覧しているページのコアウェブバイタルデータ（LCP・FID・CLS）をバックグランドで自動計測してくれるので、特別な操作は必要ありません。

計測中のデータは、Chrome上の右上に出るアイコンをクリックすることでいつでも簡単にチェックすることができます。今見ているサイトの情報を知りたいという時に気軽に利用することができるので、使い勝手が良いのが大きな魅力です。

LCP（Largest Contentful Paint ）の改善方法

LCP改善のためには、まず上記で紹介した各ツールを使用し「何が原因でLCPが低下しているのか？」を見つけ出す必要があります。

コアウェブバイタルの中で、LCPは最も問題が生じやすい指標です。

LCPのパフォーマンスが低下してしまう原因として、Optimize Largest Contentful Paint（LCPを最適化する）には、共通して4つの原因が考えられると書かれています。

• サーバーの反応時間の遅延
• JavaScriptとCSSのレンダリングブロック
• リソースの読み込み時間の遅延
• クライアント側のレンダリング

原因に応じて、1つ1つ対処していきましょう。

FID（First Input Delay ）の改善方法

Optimize First Input Delay（FIDを最適化する）によると、FIDが起きる主な原因は、JavaScriptの実行量が多いことです。

サイト上でJavaScriptの解析、編集、実行を最適化することで、FIDが改善されます。

長いタスクは分割にする、インタラクションの準備のためにページを最適化する、Webワーカーを使用する、JavaScriptの量を減らすなどして、少しでも負担がかからないように調整していくことが大切です。

CLS（Cumulative Layout Shift ）の改善方法

CLSが起こる原因として、Optimize Cumulative Layout Shift（CLSを最適化する）には、

• 表示されている画像や広告などのサイズ指定がなされていない
• コンテンツが動的に埋め込まれる
• Webフォントの読み込み

といった原因が指摘されています。

これらを防ぐためには、サイト上の画像のサイズをあらかじめ指定しておき、動きが出かないように設定していくことが大切です。広告などもページのズレの原因になるので、こちらもサイズを決めておくようにしましょう。

動的コンテンツは多用しすぎると表示のズレの原因にもなりかねないので、使いすぎないように気をつけましょう。