【2021年版SEO】Core Web Vitalsの基礎と対策

2021-01-25

コアウェブバイタル（Core Web Vitals）はサイトの健全性を示す重要指標です。

GoogleはSEOの評価基準の一つとして、2021年5月からCore Web Vitalsを正式に検索ランキング要因に組み込むことを発表しています。

Core Web VitalsはUX（User Experience：ユーザーエクスペリエンス）に関わる3つの指標が土台となります。

LCP：ページの表示速度を表す指標
FID：ページの応答性を表す指標
CLS：ページの安定性を表す指標

この記事では、Core Web Vitalsの3つの指標の基礎や確認方法を解説し、それぞれ実施すべき対策をわかりやすく解説します。

2021年最新のSEO対策を実施したい方、アフィリエイト初心者の参考になれば幸いです。

2021年もブロガー・アフィリエイターとして生き残るためには、Core Web Vitalsへの対策は必須です。

タカ

とはいえ、僕もこれから本格的に対策していく予定です。ぜひ、理解して仲間にも教えてあげて下さい。

Core Web Vitalsの基礎知識

ウェブバイタル（Web Vitals）

コアウェブバイタル（Core Web Vitals）を理解するには、その大元となるウェブバイタル（Web Vitals）を知っておく必要があります。

ウェブバイタル（Web Vitals）とは、ユーザーエクスペリエンスに関わる、ユーザー満足度を高めるためのGoogleの取り組みのことです。

バイタル（Vitals）は「重要」「本質的」という意味があり、ウェブサイトで守るべき重要ルールといった意味合いがあります。Google公式による定義は以下の通り。

「ウェブで優れたユーザーエクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みです。」
出典：Google Developers Japan Web Vitals の概要: サイトの健全性を示す重要指標

そして、ウェブバイタル（Web Vitals）の中核を成すのがコアウエブバイタル（Core Web Vitals）です。

Core Web Vitalsには満たすべき3つの指標「LCP」「FID」「CLS」があるので、順番に解説していきます。

タカ

3つの指標を最適化することがコアウエブバイタル（Core Web Vitals）の主な対策です。

LCP（Largest Contentful Paint）

LCPとは？

LCP

出典：web.dev | Largest Contentful Paint (LCP)

LCP（Largest Contentful Paint）はページの表示速度を表す指標です。Largest Contentful Paintを日本語に直訳すると「最大コンテンツの描画」です。

LCPは下記数値で表され、その良し悪しは数値と共に色付けで視覚化されています。数値が小さいほど UX（User Experience：ユーザーエクスペリエンス）が良いです。

良好：2.5秒以内
要改善：2.5秒から4秒
不良：4秒以上

つまり、LCP要件はページの読み込み開始から終了まで2.5秒以内が望ましいということです。

LCP の具体的な改善方法は後ほど解説します。まずは、実際にLCPを確認してみましょう。

LCPの確認方法

LCPの確認方法は主に3種類あります。

PageSpeed Insights
サーチコンソール
Chromeの開発者ツール

基本的には、3つの指標は一番目のPage Speed Insightsが一番確認しやすく、かつ改善もしやすいです。

しかし、今回は3番目のChrome開発者ツールでの確認方法を解説します。次の3ステップで簡単に確認可能です。

Chrome 開発者ツールを開く（F12）
Perfomanceタブをクリック
更新アイコンをクリック

赤で囲った部分が手順2と3です。画面の配置は初期設定で多少異なります。

そうすると、しばらく読み込みした後で下記の画面が表示され、画面中央の右側にLCPが表示されます。

下記画像は小さいので、スマホではピンチイン、パソコンではクリックして拡大表示してください。中央の右側に小さくLCPと表示されています。

全体図（スマホから拡大できます）

LCPの部分を拡大表示すると下記の通り。

LCPの拡大図

最近投稿した記事を確認したところ、LCPが約2,190msでした。かなり遅い方ですが、基準値の2.5秒以下（2,500ms）をなんとか満たしていました^^;

なお、確認方法は下記記事を参考にしましたので、より詳しく知りたい方は合わせて確認してみてください。

参考：株式会社レクタス LCPについて

タカ

LCPは「ページの読み込み速度」なので、直感的にも分かりやすいですね。

FID（First Input Delay）

FIDとは？

FID

出典：web.dev | First Input Delay (FID)

FID（First Input Delay）はサイトのインタラクティブ性を測る指標です。日本語で直訳すると初回入力遅延です。

最初に何らかの操作（クリック、タップ、JavaScriptの実行）をした際のブラウザの反応時間を指します。

たとえば、JavaScriptが実行され、完了するまでの時間などです。これが遅いとストレスに感じるので、ユーザーエクスペリエンス的にも重要ということ。

FIDは下記数値で評価され、その良し悪しは色付けで視覚化されています。数値が小さいほど UX（User Experience：ユーザーエクスペリエンス）が良いです。

良好：100ms以下
要改善：100ms～300ms
不良：300ms以上

つまり、FID要件はページの操作イベント発生から終了まで100ms以内が望ましいということです。

FIDの確認方法

FIDはPage Speed Insightsで確認できます。

PageSpeed Insightsにアクセスして、入力窓にURLを入力して実行すると表示されます。

試しにYahoo!のトップページをページスピードインサイトで分析してみました。

Yahoo!の場合、FIDが74msであり、100ms以下なので良好であることがわかります。

実はコアウェブバイタル（Core Web Vitals）の3つの指標（FID、LCP、CLS）は全てPage Speed Insightで確認できます。

Page Speed Insightで表示されるのは4つ指標で、コアウェブバイタル（Core Web Vitals）と似た指標としてFCPがあります。FCPとLCPの違いは以下の通り。

FCP（First Contentful Paint）：何らかのコンテンツが表示される時間を表す指標
LCP（Largest Contentful Paint）：ページのメインとなるコンテンツの読み込みに時間を表す指標

FCPはページにとって重要でないコンテンツ表示までの速度、LCPはより重要なコンテンツが表示までの速度です。

Page Speed Insightsではコアウェブバイタル（Core Web Vitals）の3つの指標（FID、LCP、CLS）が表示されない場合があります。

その場合は別の方法（サーチコンソール、Chrome開発ツールなど）で確認しましょう。

CLS（Cumulative Layout Shift）

CLSとは？

出典：web.dev | Cumulative Layout Shift (CLS)

CLS（Cumulative Layout Shift）は視覚要素の安定性を示す指標です。

サイト読み込み途中に表示される広告によって文章ががずれることはよくあります。そのズレによる影響を数値化したのがCLSです。

CLSの計算方法は、例えばスマホの画面中央にボタンが出現し、要素のズレによって影響受ける場合を想定すると下記のように計算できます。

ボタンが画面のちょうど中央から下に出現したため、影響を受けた面積の割合は0.5です。
出現したボタンの大きさがviewportの高さの15%であったとすると、下半分の要素が移動した距離は0.15となります。
これにより、CLS = 0.5*0.15 = 0.075 と計算されます。
出典：SEO研究所サクラサクラボ