[2021/05/25]
画像要素にwidthとheightを指定してCLS改善
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 が明示的に指定されていない」という項目を改善すると、Core Web Vitalsの中では「視覚要素の安定性(CLS)」の改善に繋がります。
画像要素にwidthとheightの指定があると、画像読み込み時に予め表示領域が確保できている状態なので、レイアウトにズレが生じません。反対にwidthとheightの指定がない画像を含むページが読み込まれている際には、一度画像の表示領域が無視され、その後画像が読み込まれるといったレイアウトの動きが生じます。
このように、突然レイアウトが動くような事を「レイアウトシフト」と呼びます。
レイアウトシフトが起こる事のデメリットは、特定の場所をクリックしようとしたところ、表示がズレ、意図しない情報に誘導されてしまったり、クリックし損ねたりすることです。
このようなレイアウトシフトは、Page Speed Insightsの別の項目である「レイアウトが大きく変わらないようにする」といった部分の改善と同様で、画像要素にwidthとheightの指定をしていく事で、「レイアウトのズレ=レイアウトシフト」が無くなり改善する事ができます。
レスポンシブデザインのページはwidthやheightを指定していない?
昨今のウェブサイトは、レスポンシブデザインを取り入れているサイトが多いのではないかと思います。
レスポンシブデザインというのは、1つのhtmlファイルで、パソコン表示用のページとモバイル表示用のページを管理する方法です。
レイアウトや文字サイズなどの調整はCSSにより指定する事で1つのファイルでの運用・管理ができる点が魅力です。
本ブログを運営するSEO Packもレスポンシブデザインで作られています。
コーディングの記憶を辿ると、レスポンシブデザイン導入前の「過去」に作成したサイトは、わりとwidthやheightを指定し、ガチガチに崩れないようにしていた記憶があります。その後、レスポンシブデザインのサイト作成時には、あまりwidthとheightを指定しない方法で作成する方法に移行しました。
「画像要素で width と height が明示的に指定されていない」項目の改善方法
画像要素それぞれに、widthとheightを追加していきます。
その際に、縦横比が崩れないようにcssの方ではwidth:100%;height:auto;を指定しておくと良いでしょう。

webp形式の画像を指定している場合には、img要素にwidthとheightを指定すると縦横比が保たれながら表示されます。
実際に改善しました
実際に、Page Speed Insightsの改善項目で「画像要素で width と height が明示的に指定されていない」が出ていたページを改善しました。

ページ中28個の画像にwidthとheightを指定した結果、審査結果が▲だったのが、合格した監査の項目に移動しました。
ページ自体のスコアは14から25と、多少スコアに改善がみえます。

また、CLSの項目については、改善前も「0」だったため改善後も「0」のまま変化は見られませんでした。
CLSスコアについて
CLSはスコアは0が一番下の値です。スコアが低いほど(0に近いほど)レイアウトシフトが無く、良好な表示となります。
CLSが0.1未満で「良好」、CLS 0.1〜0.25で「改善が必要」、0.25を超えると「悪い」といった判定となります。
まとめ
ご紹介したように、「画像要素で width と height が明示的に指定されていない」という項目を改善するためには、対象ページ内の画像にwidthとheightを指定していく必要があります。運用歴が長ければ長いほど作業量が多くなってしまうかもしれませんが、コツコツと改善していくしかないですね。

この記事が役に立ったらSNSで共有してください。