2021年以降、検索ランキング要因としてGoogleが組み込む予定の指標【Core Web Vitals（コアウェブバイタル）】。
この指標の改善に関しては非常に重要であることを、風俗SEOコラムで取り上げてきました。

この記事ではCore Web Vitalsのうちの１つ「CLSの改善方法」を紹介します。
今回ご紹介する方法でCLSを比較的楽に改善することができます！

ただし、この方法だけを実践しても全体的な改善には繋がりません。
ウェブサイトの問題点はないか？ユーザーにとって使いづらいと感じさせてしまう部分はないか？など、各ウェブサイトの運営者（管理者）が確認し、丁寧に改善していきましょう。

Core Web Vitalsの項目に関しては以下の記事もぜひご覧ください！

Google検索のランキング要因にCore Web Vitalsが導入される！？

CLSとは？

CLSとは、「累積レイアウト移動」という意味です。
たとえば記事を読んでいる途中、急に画像や広告が反映されてしまって、テキストが元々あった場所から、左右にズレたり上下にズレたりしてしまうことってありませんか？

この現象によって、ユーザーの視覚要素が安定せず、読みにくくなってしまうことをGoogleは問題として捉えているのです。

width/height属性で解決！

今回ご紹介する改善方法のポイントは、imgタグの『width/height属性』です。
実は最近になって『width/height属性』の役割が強化されています。
新しく属性が追加されたわけではないので、imgタグの書き方は今までと変わりませんが、ユーザーが意図していないレイアウトのズレを抑えることができるようになっています。

では、実際の改善方法とはどのようなものなのか？というと……。

『画像のimgタグにwidth属性とheight属性を正しく追加しておく』

たったこれだけなのです。

では、なぜこれだけでCLSの改善ができるのか、解説していきましょう。
画像のimgタグにwidth属性とheight属性を記述することで、ブラウザはその画像のアスペクト比が分かります。
ブラウザは、画像のアクセプト比と配置場所が分かっていれば、画像の表示予定サイズを算出することができるのです。表示予定のサイズが分かっていれば、ブラウザは適切な大きさの領域を事前に確保することができます。
これによって、レイアウトのズレが抑制できるのです。

この改善方法はGoogleのアディ・オスマニ氏がTwitterで紹介している方法です。
実際に動画で見てみると、確かに事前に領域が確保されている分、レイアウトのズレは起きていないことが確認できます。

Tip: Set width & height on your <img> elements. This now allows modern browsers to infer their intrinsic size pre-download, reducing layout shifts. pic.twitter.com/yhsIftiJzR

— Addy Osmani (@addyosmani) June 27, 2020

いかがでしょうか。
今回はCore Web Vitalsの中でもCLSの改善方法として、非常に簡単なものをご紹介しました。

その他にもCore Web VitalsにはLCPやFIDといった改善が必要な項目がありますし、先にも述べたようにこれは改善方法のほんの一部です。

この方法だけでCLSが完全に改善されるわけではありません。
その他の改善すべきポイントとともに、しっかり改善していきましょう！