Googleの、Search Consoleの「ウェブに関する主な指標」で不良のURLがありました。
引っかかっていたのは「CLS に関する問題: 0.25 超（モバイル）」です。
他の指標としてはLCP（Largest Contentful Paint: コンテンツの初回ペイント）やFID（First Input Delay: 初回入力遅延）がありますが、今回問題のCLSを中心に画像読み込みについて調べました。
Cumulative Layout Shift (CLS)
累積レイアウト変更。
ページを読み込んだときに、後から画像や動画が読み込まれて、その下の画像やテキストががくんと下がるものです。
Search Consoleでは値が大きいほど良くないとされ、0.25を超えると「不良」と言われます。
テキストよりも画像や動画の方が容量が大きいため、読み込みが遅れて一瞬レイアウトが崩れてしまいます。
解決法
画像が読み込まれる前に、あらかじめ画像の表示領域を確保しておくというものです。
方法1：imgタグに width と height 属性を設定する
先にhtmlの width と height の値を読んで領域確保→画像を読み込む、という動きなのでしょう。
しかしレスポンシブなページに固定値は書けない...その場合は元画像のサイズを入れておく、という記事も見かけました。
☆ちなみにwidth、height 属性の値はピクセル値（「px」不要）または%で指定します。
方法2：cssでレスポンシブな箱を用意する
img 要素をさらに div や p 要素で囲います。
レスポンシブな背景画像を配置するように、親要素（div や p）に 画像の縦横比に合う padding-topを、さらに position: relative。子要素（img）には position: absolute をかけます。
個人的には position: absolute を乱用するのは気が進まないのですが、用法用量を正しく守れば問題ないでしょうか。
他にいいcssの書き方がないか探していきたいです。
widthとheightを指定すると画像の表示は早くなる？
という記事を見かけたのですが、それが上記のようなcssでもいいのか、htmlで書かなくては意味がないのか、そもそも表示速度に関係がないのか、はっきり分かりませんでした。
ここで累積レイアウト変更の問題は一旦解決なのですが、画像の最適化を考える上では大事な「画像の遅延読み込み」について調べました。
画像の遅延読み込み
ページ読み込み時に一気に画像を読み込まず、スクロールで表示領域に入ったときに読み込むものです。
実装方法
方法1：プラグインを使う
以前の記事でちらっと書いた「Lozad.js」でも実装できるみたいです。
他には「lazysizes」や「yall.js」などがあります。
遅延読み込みの仕組みはプラグインごとで異なりますので、使う前に知っておきたいです。
方法2： Chromeで loading 属性を入れる
Chromeがネイティブlazy-loadをサポート、JSなしで画像を遅延読み込み可能に – 海外SEO情報ブログ
Chromeでは img 要素にloading 属性を入れるだけで遅延読み込みになるようになっています。
3種類の値を loading 属性に設定できます。
● loading="lazy": lazy は lazy-load を必ず適用させます。Viewport（スクリーンに見えるエリア）に画像が近づくと画像を読み込みます
● loading="eager": eager は lazy-load を適用せずに、ページのロードと同時にコンテンツを読み込みます
● loading="auto": auto は lazy-load するかどうかの判断をブラウザに任せます。
loading 属性の値が設定されていないとき (loading 属性だけのとき) は、loading="auto" が適用されます。
他のブラウザも対応できるようになってほしいところです。
WordPressの5.5場合、遅延読み込みが標準
htmlの width、height 属性がついている画像には自動的に loading="lazy" が入る仕様になったそうです。
画像の遅延読み込みが標準機能に【WordPress5.5の新機能】
たしかにWordPressのページのimgタグを見てみると入っている...width、height 属性には元画像のサイズが入っています。
話は戻りますが、これでレイアウトシフトが起こっていなければhtmlでimg要素にwidth、height 属性を入れた方がいいことになります。
（ざっと検証した感じでは、がくんとなっていないようです...！）
その他WordPressが自動で入れてくれる srcset や sizes 属性などもちゃんと理解していないので、いつか知りたいです。
WordPressが生成したコードをもとにあれこれ勉強するのもいいかと思います。
読み込み速度と見た目を考慮した遅延読み込み
人がいいなと思うページを検索上位に上げたい、というのがGoogleの目指すところらしいです。
見出しに挙げた、早く、かつ自然なページ表示が閲覧者の理想だと思いますが、それに近づけるための方法を調べました。
方法1：画像が読み込まれる前にダミー画像を用意しておく
ダミー画像だったり、プレースホルダー画像と呼ばれています。 真っ白なところに突然画像が表示されるよりは、見た目がユーザビリティにもよいということで、先に容量の小さい画像を表示させておく方法です。
オリジナル画像を小さくして引き伸ばしてぼかした画像をはじめに表示させ、オリジナル画像読み込みのタイミングで差し替えます。
フェードしながら画像を遅延読み込みする機能を実装する方法 | 株式会社LYZON
方法2：ダミー画像なし
プログレッシブJPEGでWEBパフォーマンスを向上させるアイデア
1つのオリジナル画像を段階的に読み込むということで無駄は少なく感じますが、難しそう。
ベースラインJPEGとプログレッシブJPEG
JPEGには2つのモードがあります。
通常がベースラインで保存されています。Photoshopで保存時にプログレッシブで保存できます。
たしかにありますね。
プログレッシブモードの方が、ベースラインよりも容量が若干小さいようです。
表示のされ方も違うので、2つのJPEG画像の表示を見ると「ああ見たことあるー！」と思いました。
最後に
ページ表示の速度改善はアプローチが様々で、Search ConsoleやPageSpeed Insights の言われるがままにあれもこれもと改善を試みると終りが見えません。
ただ、最適な書き方を知っておくのは大事だと思うので、Googleの示す数字に固執せずに、気になったら都度少し対策、を心がけたいと思います。
