画像要素にwidthとheightを指定してCLS改善

[2021/05/25]

画像要素にwidthとheightを指定してCLS改善

SEOノウハウ

GoogleがCore Web Vitals（コアウェブバイタル）という指標を検索ランキング要因に組み込むと発表した事から、GoogleのPage Speed Insightsを活用し、ページの改善に取り組まれている方も多いのではないでしょうか。

Core Web Vitalsとは、「ページの表示速度（LCP）」「ユーザー操作への反応性（FID）」「視覚要素の安定性（CLS）」の3点を評価しますが、今後SEO対策をする上で無視できない指標となっています。

さて、Page Speed Insightsの診断結果の改善できる項目の中で、診断するページによっては「画像要素で width と height が明示的に指定されていない」という項目が出てきます。

widthとは「幅」、heightとは「高さ」を表しますが、今回は、画像要素に「幅」と「高さ」を指定し、「画像要素で width と height が明示的に指定されていない」という診断項目を改善していきます。

なぜ画像要素にwidthとheightの指定が必要なのか
レスポンシブデザインのページはwidthやheightを指定していない？
「画像要素で width と height が明示的に指定されていない」項目の改善方法
実際に改善しました
- CLSスコアについて
まとめ

なぜ画像要素にwidthとheightの指定が必要なのか

「画像要素で width と height が明示的に指定されていない」という項目を改善すると、Core Web Vitalsの中では「視覚要素の安定性（CLS）」の改善に繋がります。

画像要素にwidthとheightの指定があると、画像読み込み時に予め表示領域が確保できている状態なので、レイアウトにズレが生じません。反対にwidthとheightの指定がない画像を含むページが読み込まれている際には、一度画像の表示領域が無視され、その後画像が読み込まれるといったレイアウトの動きが生じます。

このように、突然レイアウトが動くような事を「レイアウトシフト」と呼びます。
レイアウトシフトが起こる事のデメリットは、特定の場所をクリックしようとしたところ、表示がズレ、意図しない情報に誘導されてしまったり、クリックし損ねたりすることです。

このようなレイアウトシフトは、Page Speed Insightsの別の項目である「レイアウトが大きく変わらないようにする」といった部分の改善と同様で、画像要素にwidthとheightの指定をしていく事で、「レイアウトのズレ＝レイアウトシフト」が無くなり改善する事ができます。

レスポンシブデザインのページはwidthやheightを指定していない？

昨今のウェブサイトは、レスポンシブデザインを取り入れているサイトが多いのではないかと思います。

レスポンシブデザインというのは、１つのhtmlファイルで、パソコン表示用のページとモバイル表示用のページを管理する方法です。
レイアウトや文字サイズなどの調整はCSSにより指定する事で１つのファイルでの運用・管理ができる点が魅力です。

本ブログを運営するSEO Packもレスポンシブデザインで作られています。
コーディングの記憶を辿ると、レスポンシブデザイン導入前の「過去」に作成したサイトは、わりとwidthやheightを指定し、ガチガチに崩れないようにしていた記憶があります。その後、レスポンシブデザインのサイト作成時には、あまりwidthとheightを指定しない方法で作成する方法に移行しました。