【SEOの新常識】CLSについて | WordPressのいかし方

【SEOの新常識】CLSについて

Last Updated on 2023年5月07日 by ワードプレスの学校 学長 柳内郁文

Googleが最近言い出したSEOの指標でCLSというのをご存知でしょうか?
Cumulative Layout Shiftの頭文字を取ってCLS(シーエルエス)と言います。

 https://pagespeed.web.dev/

Googleが提供するPage Speed Insightsで表示スピードをチェックした際の指標のひとつです。

【SEOの新常識】CLSについて  | WordPressのいかし方

これはとあるサイトの例ですが、赤く表示されている部分が多くあまり良い数値とは言えません。

CLSとは?

では、CLSとは何か?
簡単に説明するとサイトが表示され始めた後、サイトが下方向に「ガクン」と下がることを指します。
英語の「レイアウト・シフト」のとおり、レイアウトが下にシフトしてしまうサイトを指しています。

画像をレイジーロードで遅延読み込みしている場合でも、その画像位置を予め用意しておいて、後から表示させる方法はOKですが、画像を後から読み込まれることによって、画像の下のコンテンツ(レイアウト)が下にシフトしてしまうのはNGという訳です。

たまにクリックしようとしたら、レイアウトが変わってクリックしたいところではなく別のリンクをクリックしてしまうということありませんか?
やはり、ユーザービリティが良くないですよね?
Googleが一番気にするのはユーザービリティですので、改善が必要です。

CLS まとめ

CLSを改善するプラグインは今のところ見つかっていません。
今のサイトがCLSについてGoogleから指摘を受ける構造の場合は、その部分を見つけてデザイン変更する必要があると思います。

今後もSEOについての情報をお送りする予定ですので、宜しければチェックしてみてください。

【追記:2023年4月】
グーグルはこのCLSを数値化しています。
その他の指標の単位は「秒」ですが、CLSだけは数値です。

たとえば、高さの違う画像でスライドショーを設定した場合、画像が切り替わるごとに高さが変わりスライドショーの下のコンテンツはガクンと下にずれたかと思うとまたガクンと上に戻るということを繰り返します。
このガクンをすべて足し算するととてつもない数値になってしまいます。
そこでグーグルは一定時間を数値化するように指標を変更しました。
詳しくはグーグルの記事でご確認ください。

この記事についてのご質問がある方はワードプレスの学校でお願いいたします。

当社では、WordPressを用いたWebサイト制作を行っております。
ホームページの制作については、こちらからお気軽にお問い合わせください。

制作実績はこちらからご確認ください。
⇒【View Now!】当社の制作事例をチェック!

ノーコードで簡単ウェブ制作なら断然ELEMENTORが便利です。

ワードプレスの学校

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

Join our newsletter

毎週金曜日に最新のワードプレスの情報を配信しています
いつでも解読できますので、お気軽に登録してください

Check New Posts

Join Our School

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

— ワードプレスの学校でワードプレスについて一緒に学びませんか —

ブログを読むより、ユーチューブ動画を見るより、ワードプレスに精通した講師に直接聞いて問題を解決しましょう!ワードプレスの学校は、質問し放題のオンラインスクールです。