06. Core Web Vitals

この章では、Core Web Vitalsを学びます。

Core Web Vitalsは、ページの読み込み、操作への反応、表示の安定性を測る指標です。

検索のためだけでなく、ユーザーが快適に使えるページを作るためにも重要です。

Core Web Vitalsとは

Core Web Vitalsは、実際のユーザー体験に関係する指標です。

Googleは、次の3つをCore Web Vitalsの主な指標として示しています。

どれも、Webサイトを見る人の体験に直結します。

表示が遅い、クリックしても反応が遅い、読んでいる途中に画面がズレる。

こうした問題は、サイトの印象や成果に影響します。

LCPは、Largest Contentful Paintの略です。

ページ内の主要な大きな要素が表示されるまでの時間を見ます。

たとえば、ファーストビューの大きな画像や見出しが対象になることがあります。

LCPが遅くなりやすい原因には、次のようなものがあります。

改善では、画像の圧縮、適切なサイズ、不要な読み込みの削減などを考えます。

INPは、Interaction to Next Paintの略です。

ユーザーの操作に対して、ページがどれくらい速く反応するかを見ます。

たとえば、クリック、タップ、キーボード入力などが関係します。

INPが悪くなりやすい原因には、次のようなものがあります。

Web制作では、必要以上にJavaScriptを重くしないことが大切です。

CLSは、Cumulative Layout Shiftの略です。

ページ表示中に、要素がどれだけズレるかを見ます。

たとえば、読んでいる途中で画像が読み込まれて本文が下に押し出されたり、広告やバナーが後から出てボタン位置がズレたりする場合です。

CLSが悪くなりやすい原因には、次のようなものがあります。

改善では、画像や埋め込み要素の表示領域を事前に確保します。

Core Web Vitalsは、ページ体験に関わる要素です。

ただし、良いスコアを取れば必ず上位表示されるというものではありません。

検索では、ページ内容の関連性や役立つ情報も重要です。

Core Web Vitalsは、ユーザー体験を改善するための指標として考えます。

SEOのためだけでなく、見た人が快適に使えるサイトにするために改善します。

Web制作者が確認しやすい項目は次の通りです。

ツールとしては、PageSpeed Insights、Lighthouse、Search ConsoleのCore Web Vitalsレポートなどを使います。