Core Web Vitals(CWV)とは?

SEOの今「Core Web Vitalsとは?」

Googleの順位を評価基準に「Core Web Vitals」という新基準が追加導入されます。これは「ページエクスペリエンス」と呼ばれるページの使いやすさに関する項目です。
この項目は今すぐに導入開始されるわけではなく、来年(2021年)以降の導入予定ということです。今回のペライチSEOブログ「SEOの今」はこのCore Web Vitals(CWV)について取り上げたいと思います。

Core Web Vitals(CWV)とは?

Core Web Vitalsの3要素

Core Web Vitalsには上の画像のようにLCP、FID、CLSの3つの要素があります。おそらくこの用語を聞いただけでは、皆さんよくイメージを持てないと思うので解説します。
LCPはページの表示速度、ページが表示されるまでコンテンツが見えるようになるまでの時間
FIDはページの反応速度、タップして次の動作に移るまでの時間
つまり、リンクをタップしたのにしっかりと押せたのかわからないくらい反応が遅い(次の動作までに時間がかかる)ページは減点されるようになります。
CLSは視覚の安定性です。こちらはGoogle公式ブログの中の動画を使って説明します。

動画のようにNoをクリックしようとして途中でコンテンツが増えたことで画面の位置がずれて誤ってYesをクリックしてしまう。
皆さんも次のような体験を経験したことありませんか。ブログを見ていて、次のページのボタンをクリックしようとしたらその上に遅れて広告が出てきて広告の方を誤ってタップしてしまったようなこと。項目がズレて画面の表示内容が安定(視覚の安定)しないことがCLSと呼ばれる要素で判断されます。
新たにこの説明した3つの要素が来年2021年以降、順位に影響するようになります。

広告収入の目的で運営しているサイトの中には、広告読み込みだけをわざと遅くして、来訪者に広告の誤クリックを誘発する行為があります。今まではこのようなサイトもマイナス評価にならない為、Googleの検索結果の上位に表示されることもありましたが、Core Web Vitalsの導入後はサイトの順位を下げることになります。もちろんこのような行為はユーザーにとって良い体験(ページエクスペリエンス)が阻害されているので、順位が下がるのは当然です。しかし、もし意図的でなくてもバナーなどを表示する為のサーバー環境が影響して、広告の読み込みが遅い状態が起きているのであれば、順位を大きく下げる可能性もあります。今のうちに表示が早くなるように改善されることをお勧めします。

Core Web Vitalsに対応しているか確認する方法

次にこのCore Web Vitalsに対応(合格)しているのかが気になると思います。合格しているかはGoogleが出している以下のようなツールで確認することができます。

  • Chrome拡張機能
  • Lighthouse
  • PageSpeed Insights

なお、私のおすすめのツールはChromeの拡張機能です。

CVW拡張

Chromeに拡張機能をインストールすると確認用のアイコンが表示されるようになります。
アイコンの見方としては赤が不良、黄色が改善が必要、緑が良好なので緑だけが合格です。
赤と黄色は改善して欲しいのですが、赤がより深刻な状態なので赤を優先して改善すると良いです。

このアイコンの表示は毎回読み込み時に判断しているので、リロードボタンを押すと緑色に変化する時もありますが、「初回の読み込み」という条件付けてテストすることをお勧めします。リロードして改善したから良いというわけではなくて、初回読み込みで赤色になっている項目を改善しましょう。

また、Googleサーチコンソールでも確認してみましょう。サーチコンソール入るとメニューの「拡張」というカテゴリの中に「Webに関する主な指標」をクリックすると画面が変わります。モバイルファーストインデックス(MFI)によってモバイルサイトが検索結果の序列に評価されますので、必ずモバイルの項目をご確認ください。詳細項目に入るとデフォルトは赤い項目しかクリックされていない状態なので、黄色の項目もクリックして改善する項目をすべて出します。今は赤が多くても全然順位に影響しないのですが、今から意識してできるだけ改善すると良いと思います。私で確認する限り、特にLCPが赤になる方が多いです。

ペライチユーザーがすぐできるCore Web Vitalsの対策方法

具体的に「どういう対策したらいいの?」と思う方も多くいると思います。
近年iPhoneなどの高性能なスマートフォンで写真を撮って、その写真をペライチのページで使用するということが多いと思います。もちろん、デジカメなどで撮った写真でも同様ですが、画像の解像度が高い事でどうしても画像が重い状態になってしまい、表示に時間がかかる原因になる傾向になります。

こういう時にぜひ試してほしいのが画像の最適化です。最適化の方法は「画像の圧縮」と「画像リサイズ」の2つがお勧めです。画像のリサイズは簡単で、例えば3000 x 2000pxの画像を縮小や必要な箇所を切り抜いて最適化します。この時、無理にPhotoshopのような難しいソフトを使わなくても大丈夫です。PCに付属しているペイントのようなソフトで良いので最適化してください。

次に「画像の圧縮」ですが、画像の圧縮は専用のツールを使って加工します。多くのソフトがありますのでお好みの物を使用してください。お勧めはCopessor.ioかTinyPNGです。いずれもオンライン上に写真をアップロードするだけで画像の圧縮が完了します。画像圧縮しただけで70~80%程度容量が軽くなると思いますのでぜひお試しください。

画像の圧縮

最後に

Core Web Vitalsはページエクスペリエンスの項目なのでしっかりと対応することでGoogleの検索順位の対策に留まらず、クリック率や滞在時間などページの改善にも繋がる可能性があります。よって、2021年以降の導入だからまだ先の対応で良いと考えるのではなく、できるだけ早く対応しましょう。

 

Core Web Vitalsに関して杉浦が話している動画がYouTubeにアップされています。
こちらも確認して知識を深めて頂けると幸いです。