[レベル: 中級]
ネイティブ Lazy-load を WordPress 5.5 が標準機能として実装します。
<img> タグに loading=”lazy” を自動追加
width 属性と height 属性を追加してある <img> タグには loading="lazy" が記事出力時に自動的に挿入されます。
記事作成者（＝あなた）は何もする必要はありません。
WordPress 側のバックグラウンド処理によりネイティブ Lazy-load が実装され、画像の遅延読み込みが実現します。
もちろん、過去に投稿した記事にも適用されます。
CLS を防ぐために width/height が必要
loading="lazy" を WordPress が追加する画像 (<img> タグ) には width 属性と height 属性が存在していなければなりません。
理由は CLS を防ぐためです。
CLS (Cumulative Layout Shift) は Core Web Vitals の 3 つの指標の 1 つです。
遅延読み込みするということは、画像はあとから読み込まれます。
あとから読み込むことによって、それまでなかった場所に画像が出現します。
このときに、コンテンツ要素の移動が発生する可能性があります。
しかしながら、width 属性と height 属性があるとブラウザは画像のアスペクト比（縦横の比率）を計算し事前に画像のスペースを確保できます。
画像が表示される前でも、その画像を表示するスペースが決まっているためズレが発生しません（Web担当者Forum の連載コラムで詳しく説明しました）。
width 属性と height 属性がない画像には loading="lazy" を WordPress は追加しないので注意してください。
なお、WordPress の機能である「メディアの追加」で挿入する画像は、WordPress が自動的に画像サイズを取得し、width 属性と height 属性を設定してくれます。
つまり、WordPress のメディア追加機能を使って画像を挿入しているかぎりは、ネイティブ Lazy-load は有効になるということです。
細かなカスタマイズ可能
次の画像に loading="lazy" を WordPress はデフォルトで追加します。
- 記事の中の画像
- 抜粋の中の画像
- テキストウィジェットの中の画像
- アバターの画像
wp_get_attachment_image()を利用しているテンプレートの画像
特定のコンテンツや記事の画像の ネイティブ Lazy-load を有効/無効にしたりすることができます。
ネイティブ Lazy-load を完全に無効にもできます。
また現状では <img> タグに対して loading="lazy" を追加しますが、ほかのタグも対象にすることができます。
たとえば、<iframe> でも loading="lazy" は機能します。
WordPress のフィルタをいじれる人は iframe でも自動 ネイティブ Lazy-load を有効にしてもいいでしょう（<iframe> のネイティブ Lazy-load もウェブ標準になりました。画像だけではなく iframe もネイティブ Lazy-load の対象に将来的にデフォルトになるかもしれませんね）。
カスタマイズに関する技術的な仕様の詳細は公式アナウンスで参照できます。
何にもしなくても自動でネイティブ Lazy-load が有効になるのは、WordPress ユーザーにはありがたい改良です。
WordPress 5.5 のリリースを楽しみに待ちましょう。
これで、Safari がネイティブ Lazy-load をサポートしてくれれば、さらに言うことなしです（試験的機能として現在は提供）。