前書き・経緯：CLS で怒られた時の対応方法

昨年の話ですが、searchconsole で怒られたことがキッカケで、自社サイト内の『画像表示』について検証した経緯・結果などを共有してみようと思います。
※これは単に SEO的な話ではなく、今後のコーディングルールに紐づく内容です

怒られた内容自体は CLS(Cumulative Layout Shift) がイケてないとのこと…
CLS とは、2021年には『検索結果順位に影響を与える』と明言されている指標(Web Vitals)の1つで、Webサイトにおけるユーザー体験向上を目指して Google が導入したもので、視覚要素の安定性 を示す指標です。
ザックリ説明すると『画面表示時にカクっとレイアウトが一瞬崩れるのはイマイチだよ～』っていうものです。

CLS で怒られる要因の多くは『画像表示』に関するもの

まず html にて画像を表示する際に下記のようなソースを書くと思います。

<img src="800×450pxの画像パス" alt="代替テキスト">

しかしこれだと、テキストなどに比べて明らかに画像の方がファイルサイズが重いため、画像表示サイズをブラウザ側で取得するまでは、本来画像が表示される位置には、画像直後の要素が詰められて表示されます。
その後、画像表示サイズをブラウザ側が認識した際に、詰められて表示されていた要素が カクっと 位置自体が可変し、そこに本来表示されるべき画像がパッと現れます…これは 視覚要素の安定性 が悪いと判断されます…まぁ理屈的にはいたって順当な判断ですね^^;

回避策

これを回避する最も簡単な方法は、img要素に width・height属性 を記述することです。
レスポンシブレイアウトが主流になってきた頃から、何故か img要素に width・height属性 を書かないのが一般的になりました…理由は覚えていませんが、そういえば昔は alt属性と同じようにキチンと記述してましたよね。

<img src="800×450pxの画像パス" width="800" height="450" alt="代替テキスト">

こうすることにより、画像ファイル自体を読み込まずとも、画像表示サイズを取得することが出来、レイアウトが担保されることになります。
結果『カクっと崩れ』から解放され、視覚要素の安定性 も良いと判断されます。

実際に施策後には Google さんから『よくやったね、怒ってごめんね』って頭を撫でていただきました。

本題：Web Vitals を意識して画面表示速度検証を行うことにした

実際にどのように画像表示タグを設定するのが、Web Vitals的に一番良いのか検証

検証条件・方法

• 【imgタグにて構築】【chrome + Lazyload にて構築】【amp-imgタグにて構築】の3タイプで検証
  1. imgタグ：いたって普通に imgタグで構築
  2. chrome + Lazyload：imgタグに loading="lazy" を追記して構築
     ※元々 chrome の独自機能でしたが、今現在では Firefox／Edge／Opera もサポート
  3. amp-imgタグ：ampproject.org から、js(70kb程度)を読み込む必要があります
• 違いが少しでも分かりやすくなるようにファイルサイズ大きめの画像にて検証
• ソースコード上で違いがでないように、ほぼほぼ同じソースコードにて実装

実際の検証結果

1. PageSpeed Insights による解析結果
2. PageSpeed Insights による表示速度シミュレーション結果
3. chromeデベロッパーツール(Network)による読込速度結果
4. Pingdom(Webパフォーマンス測定・WRSはchromeではない)による読込概要

imgタグにて構築

chrome + Lazyload にて構築

amp-imgタグにて構築

検証結果対比表

総括：これからのコーディングルールについて

• Google では WRS に chrome を使用している
• 【amp-img】を使用するには ampproject.org から、js(70kb程度)を余計に読み込む必要がある
• SpeedIndex・表示速度シミュレーションの結果からすると【chrome + Lazyload】【amp-img】では、ほぼほぼ同じようなパフォーマンスに思える
• Pingdom の結果からすると、chrome以外のブラウザで閲覧しているユーザーからすれば【imgタグ構築】【chrome + Lazyload】に違いはほぼない

上記からすると、SEO上では【chrome + lazyload】【amp-img】が優れていて、ユーザーファーストでは【amp-img】が一番優れているという結果が読み取れる。

∴ 画像の多いコンテンツでは、諸々鑑みても【amp-img】にて構築するのが良い気がしますね