SEO対策-Core Web Vitals編（2021年6月中旬アルゴリズムアップデート）

「Googleの検索アルゴリズムアップデート」

SEO対策をする方の頭をいつも悩ませますね。

2021年の6月中旬実施されるのはCore Web Vitalsについてのアップデートです。

Core Web Vitals-GoogleにおけるUI/UX面の指標-

この「Core Web Vitals」とはなんだ？というところと、

Core Web Vitalsを構成する3つの要素について説明していきます。

まず、Web Vitalsとは、GoogleがWeb上で優れたUXを提供するために不可欠である考えであり、UXを向上させるためのガイダンスとしてGoogleが提唱したものです。

その中でも、特に重要な3つの要素を「Core Web Vitals」と呼んでいます。

構成する要素としては以下の3項目が挙げられます

LCP：読み込み速度
CLS：視覚的安定性
FID：操作の応答性

Core Web Vitalsその２-どのような変更なのか-

結論から言うと、

「Core Web Vitalsは最終判断基準的に使われる」と言って良いでしょう。

Googleの検索結果が作られる仕組みを非常に簡単に言うと、

①GoogleのボットがWEB上をクロール（サイト探す）
↓
②インデックス（データベースに保存）
↓
③検索結果の表示（データベースから抽出）

という流れです。

次にGoogleのアルゴリズムアップデートの目的や重視するものの遍歴を、とてつもなくざっくり言うと、

2010初頭：ネガティブなものの排除（低品質、悪質なもの排除）
2010年代半ば：コンテンツ重視
現在：UX重視

となります。

最終判断基準的に使われるということは、これらの目的や重視するものを抑えたWEBサイトに差をつけるときに使われるということです。

同じようなサイトにおいて、高品質で有用なコンテンツが含まれているとするならばCore Web Vitalsで優っているほうが検索順位が上に来ます。

ニュースサイトのように、どうしてもコンテンツの内容が似通ってしまうようなサイトは、Core Web Vitalsの強化が必要になってくると思われます。

逆に言えばCore Web Vitalsをしっかりと対策してもコンテンツがユーザーにとって有用でなければ、順位を上げることは難しいと言えます。

それでは、Core Web Vitalsを構成する3つの要素について解説していきます。

最初はLCPです。

LCP-Largest Contentful Paint-

LCPはWEBサイトの読み込みパフォーマンスの指標です

こちらのスコアは、
WEBサイトの最大コンテンツやファーストビューの描画を早くすることで上昇します。

最大コンテンツのデータ量の削減では、
・レスポンシブ対応できているなら、スマホ用の画像を用意する

・次世代画像フォーマットの使用

・スクリプトを削減する

などで実現できます。

また、ファーストビュー内のメインコンテンツ以外を削減、ファーストビューより下に配置されるものは、スクロールに応じて読み込みさせるなどといった対策が考えられます。
遅延読み込みは、NativeLazyLoadといったものを利用すると良いでしょう。

今までのようにしっかりと有用なコンテンツを提供しつつデータ量の削減となると、かなり取捨選択が迫られるものとなりますね。

しっかり考えて対策していきましょう。

CLS-Cumulative Layout Shift-

CLSは視覚的な安定性のことです。

こちらのスコアを上げるには

誤タップなどを起こさないレイアウト、
ページ上でレイアウトのズレを生じないようにするということが重要です。

こちらの図を見てください

上の画像のように表示される広告によってメイン画像の位置が変わってしまう。というようなことが起きないようにしましょう。

また、上の画像の場合、読み込みが遅かった場合は、広告への誤タップも誘発してしまいます。

このようなことを避けるためには、

・cssで画像などのwidth、height属性を設定しておく

・上の画像のような場合、広告表示領域をあらかじめ設定しておき、最大値の下部に次コンテンツを描画するようにする

・途中で別コンテンツが入り込むようなことがないようにする（ページの途中でスクロール値をトリガーとしてボタンを出現させないなど→最初から出しておくか表示領域を設定しておく）

・WebフォントはCDNを利用したり、font-display:swapを指定する

といった対策が挙げられます。

FID-First Input Delay-

ユーザーへの応答性を示します。

良いUXを提供するためには、ユーザーがアクション（クリックやタップ）をしてから反応するまでの時間を100ミリ秒以下になるようにする必要があります。

大量にJavaScriptなどを導入しているとこのFIDは低くなる傾向にあります。使用していないものは随時削除していきましょう。

長いコードのJavaScriptを導入する際には、Minify化をしてみるのも良いかもしれません。

まとめ

Core Web Vitalsの対策には、コーディングの技術を要求されることが多いです。

1つの会社で対策するとなると部署をまたいだ仕事を要求されるかもしれません。

ただ、しっかり対策できているサイトはまだ多くありませんので、他のサイトと差別化できるケースは多いです。

とはいえ、まずはコンテンツの豊富さや綺麗なコーディングでWEBサイトをの検索順位を上位に定着させられるようにして、最後にCore Web Vitalsの対策をすることをお勧めします。