Last Updated on 2023年5月07日 by ワードプレスの学校 学長 柳内郁文
Googleが最近言い出したSEOの指標でCLSというのをご存知でしょうか?
Cumulative Layout Shiftの頭文字を取ってCLS(シーエルエス)と言います。
Googleが提供するPage Speed Insightsで表示スピードをチェックした際の指標のひとつです。
これはとあるサイトの例ですが、赤く表示されている部分が多くあまり良い数値とは言えません。
CLSとは?
では、CLSとは何か?
簡単に説明するとサイトが表示され始めた後、サイトが下方向に「ガクン」と下がることを指します。
英語の「レイアウト・シフト」のとおり、レイアウトが下にシフトしてしまうサイトを指しています。
画像をレイジーロードで遅延読み込みしている場合でも、その画像位置を予め用意しておいて、後から表示させる方法はOKですが、画像を後から読み込まれることによって、画像の下のコンテンツ(レイアウト)が下にシフトしてしまうのはNGという訳です。
たまにクリックしようとしたら、レイアウトが変わってクリックしたいところではなく別のリンクをクリックしてしまうということありませんか?
やはり、ユーザービリティが良くないですよね?
Googleが一番気にするのはユーザービリティですので、改善が必要です。
CLS まとめ
CLSを改善するプラグインは今のところ見つかっていません。
今のサイトがCLSについてGoogleから指摘を受ける構造の場合は、その部分を見つけてデザイン変更する必要があると思います。
今後もSEOについての情報をお送りする予定ですので、宜しければチェックしてみてください。
【追記:2023年4月】
グーグルはこのCLSを数値化しています。
その他の指標の単位は「秒」ですが、CLSだけは数値です。
たとえば、高さの違う画像でスライドショーを設定した場合、画像が切り替わるごとに高さが変わりスライドショーの下のコンテンツはガクンと下にずれたかと思うとまたガクンと上に戻るということを繰り返します。
このガクンをすべて足し算するととてつもない数値になってしまいます。
そこでグーグルは一定時間を数値化するように指標を変更しました。
詳しくはグーグルの記事でご確認ください。