「CLS」を改善して検索順位を上げよう!?

まず最初に、CLSを改善したとしても、検索順位に対する即効的な効果はおそらく期待できません。
とはいえ、UX(ユーザー体験)の改善にはつながりますし、ボディブロウのように検索順位に影響を与える可能性はありますので、無駄な施策ではないことは間違いありません。

ここまで読んで「そもそもCLSって何よ?」と思われる方も多いのではないでしょうか。
「CLS(Cumulative Layout Shift)」とは、サイトのレイアウトがどれくらい安定しているかを示す指標のことです。
Webサイトが表示される際、画像やテキストの読み込みが進むにつれて、レイアウトがガチャンガチャン変わっていくサイトを見たことはないでしょうか。
スマホでサイトを閲覧しているとき、記事が表示されたと思ってスクロールしようとしたら、突然、広告バナーが表示されて、意図せず別のサイトに飛ばされてしまったなどという経験も珍しくないと思います。

CLSとはそういった不愉快な体験をさせないよう、安定したレイアウト表示をさせているサイトであるのかを評価するための指標です。
最近になって提唱され始めた指標ではありますが、今後のスタンダードとなっていくと見なされています。

CLSを改善する方法とは?

さて、ではCLSを改善するにはどのようにすればよいのでしょうか。
まだまだ情報の少ない中、その点に触れた記事がありましたので、紹介しておきます。

コア ウェブ バイタルのCLSをチョー簡単に改善する方法(めっちゃカンタン)【SEO情報まとめ】
https://webtan.impress.co.jp/e/2020/07/03/36562

ここで紹介されている手法はごく簡単なもので、「img要素に、width属性とheight属性を設定する」という内容。

情報端末やブラウザの横幅に応じてレイアウトを可変させるレスポンシブデザインの台頭もあり、近年、影が薄くなってきていたimg要素のwidth属性とheight属性ですが、まさかここにきて再び脚光を浴びることになるとは思ってもみませんでした。

実を言えば、CSSすらほとんど使われていなかったWebの黎明期、「img要素に、width属性とheight属性を設定する」手法は、ページを高速に表示させ、レイアウト崩れを防ぐために必須とされていた手法でした。
当時のブラウザも、img要素のwidth属性とheight属性を見て、ページレイアウト内に画像が表示される領域を事前に確保していました。これによりWebページを高速表示できるようにしていたのです。

PCをはじめとする情報端末の高速化とネット環境の向上により、ないがしろにされてきた要素が、さらなる高速化、安定化を求める中で再評価されるというのも、なんとも面白い現象ですね。

光回線などのブロードバンドの普及により、必要以上に高品質、大容量になっていたWebサイトの画像ファイルが、スマホの普及により、適度な品質、小容量へと回帰していったときのことが思い出されます。

執筆者:M.S