[レベル: 中級]
WordPress 5.9 がリリースされました。
このバージョンでは、ページで最初の画像および iframe のネイティブ Lazy-load が無効になっています。
ページ表示速度の向上がサイトによっては期待できます。
WP のネイティブ Lazy-load サポート
ネイティブ Lazy-load は、画像の <img> 要素と iframe の <iframe> 要素に loading="lazy" 属性を付けることで、ブラウザの標準機能として遅延読み込みを可能にします。
JavaScript による実装を必要としません。
HTML コードを書くだけなので、簡単に実装できるのが最大の長所です。
<img="cat.jpg" alt="ネコ😺" width="800" height="600" loading="lazy" >
WordPress は、
を標準でサポートするようになりました。
<img>/<iframe> に loading="lazy" を自動で追加してくれます。
📝すずき補足: width/height 属性が設定されていることが条件
ネイティブ Lazy-load が LCP を悪化させる
スクリーンの外にある画像/iframe の読み込みを遅らせることにより、ページの表示速度を速くするのがLazy-load の目的です。
ところが、ページを開いたときにすぐに表示されるべき画像や iframe にまでネイティブ Lazy-load を適用すると、かえってページの読み込み速度、特に LCP が悪化することが明らかになっていました。
📝すずきメモ: LCP はコア ウェブ バイタルの 3 指標の 1 つ
そこで WordPress 5.9 では、最初に設置された画像と iframe にはネイティブ Lazy-load を適用しないように仕様が改良されることになっていました。
当初の予定より遅れましたが、2022 年 1 月 25 日にバージョン 5.9 がリリースされました。
5.9 へのアップデートで LCP の改善が期待できます。
ページエクスペリエンス アップデートの PC 検索への導入が来月（2月）に迫っています。
5.9 への早めのアップデートを検討するといいでしょう。
ただし、最初の画像がファーストビュー内に出現するかどうかはテーマのデザインにも大きく依存します。
同じコンテンツでも、テーマによって、最初の画像がファーストビュー（スクロールせずに表示されるスクリーン領域）に出てくるか出てこないかが変わってくることがありえます。
したがって、必ずしも LCP がよくなるとは限りません。
それでも、ポジティブな影響が出てくるサイトは確実に存在します。
最初の画像でも遅延読み込みの対象にしたければ、img タグに loading="lazy" 属性を明示的に記述しておきます。
自分でコードした場合は、WordPress はそれを上書きしません（loading="lazy" を勝手に削除しない）。
また 2 つ目（以降）の画像もファーストビュー内にあってすぐに読み込ませたいなら loading="eager" 属性を明示的に追加します。
遅延読み込みさせずに、ページを表示したときに読み込みが必ず始まります。
<img="2nd-cat.jpg" alt="2 匹目のネコ😺" width="800" height="600" loading="eager" >
なお、ネイティブ Lazy-load が適用されるのは記事内の画像/iframe です。
ヘッダーやフッター、サイドバーなどの画像には自動では設定されません。