Search Consoleに表示される「ウェブに関する主な指標」のCLSの意味と、不良時の改善方法

いままで全然気がつかなかったのですが、Search Consoleを開いてみるとCLS（Cumulative Layout Shift）でエラーが出ていました。
今回はCLSとは何か？とその対処法をまとめておきます。

CLSとは何か？

Search ConsoleにはCLS以外にも「LCP」「FID」の全部で3つの指標があります。
それぞれの指標の意味は下記の通りです。

言葉で説明されると分かりにくいですが、ウェブサイトを読み込んで実際に表示されるまでには少し時間がかかります。
その、読み込み時にページをスクロールしていると、後から読み込まれた画像やYouTubeの埋め込みで、ページのレイアウトがスクロール中にズレたりします。

CLSは、この読み込みしたあとにページがズレる変化量（移動量）がどれくらいかを数値化したものです。
CLSの数値が大きければ大きいほど、読み込み時に「ズレるサイト」ということになります。

LCPはページが読み込まれてから、ブラウザで最初に見える分のコンテンツが描画されるまでの時間の早さで、FIDはリンクがクリックされてからブラウザが応答するまでの時間の早さです。

このように、ページの読み込みや遷移時に、ユーザーに余計なストレスを与えないための指標が「CLS」「LCP」「FID」です。

この3つの指標を合わせて「Core Web Vital」と呼び、将来的には検索結果にも影響されるそうです（新型コロナの影響もあるので2020年には導入されず、導入するときも半年前には告知するとのこと）。

Official Google Webmaster Central Blog

Evaluating page experience for a better web

https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

We’re introducing page experience as a new ranking signal that provides a holistic picture of the quality of a user’s experience on a web page.

Search ConsoleでCLSのエラーが出た場合

Search Consoleの「拡張」→「ウェブに関する主な指標」を開いてみると、自分の場合は「PC」の方で黄色い線になっていました。
全然見ていなかったので気づきませんでしたが、かなり前からなっていますね。

「レポートを開く」から詳細が確認できます。

色は3色でそれぞれ下記の意味になります。

• 赤：不良
• 黄：改善が必要
• 緑：良好

黄色になるのはCLSの数値が「0.1」を超えると表示されるようなので、CLSを0.1未満にすると緑色になります。

どのページに問題があるのかも表示されるので、ページを実際に表示して改善します。

CLSを確認するChrome拡張機能

「Web Vitals」というChrome拡張機能を使うと、開いているウェブサイトの「LCP」「FID」「CLS」の確認が出来ます。

chrome.google.com

Web Vitals

https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

Measure metrics for a healthy site

ページをリロードして、どの辺がズレたか確認しつつ、このChrome拡張機能のアイコンが緑色で表示されるように修正します（赤色だと問題あり）。

具体的には画像の読み込みによってレイアウトが下にズレてしまうパターンが多そうなので、min-heightを指定するなりして読み込まれる前後でレイアウトが移動しないようにCSSで調整すればOKです。

Search Consoleへの修正の確認依頼

修正後はそのまましばらく放っておいても、勝手に反映されて良好に切り替わるとは思いますが、どうせなら修正したことを知らせるために、Search Consoleで修正内容の確認を依頼します。

「CLSエラー」が出ているページに「検証」というボタンがあるので、それを押せば検証が開始されます。
検証には最大28日かかると書かれてありましたが、自分の場合は2週間弱で緑色に切り替わりました。

詳細の「確認」で「合格」と表示されていればOKですが、「失敗」と書かれている場合は、まだCLSが改善されていないということなので、再度ページを見て修正が必要になります。