WordPressが画像にloading=”lazy”を付与する条件は、「ファーストビュー以外の画像」でも「メインコンテンツの1枚目の画像」でもありません。ローディング属性の管理に役立つメカニズムを解説します。

WordPressは1枚目の画像にlazyを付与すると言われるが

GoogleのPageSpeed InsightsではLargest Contentful Paint（LCP）という読み込み速度に関わる指標を測定できます。LCPは、Webサイトの表示や速度を計測するCore Web Vitalsの一つです。

GoogleがCore Web VitalsをSEOランキング指標に組み込んだため、Webサイト運営者の注目を集める中、WordPressも対策を立てました。

それが、LCPを悪化させる恐れのある画像にはloading=”lazy”を付与して、より優先して読み込みを完了し表示させたい画像には付与しない、というメカニズムの開発です。

このメカニズムは一般的に「ファーストビュー以外の画像にローディング属性を付与する」でも「メインコンテンツの1枚目の画像には付与しない」と理解されることが多いですが、もっと複雑な処理が行われていることがわかりました。

2枚目にも3枚目にもローディング属性が付与されない？

WordPressのローディング属性付与のメカニズムを検証するため、WordPress 6.8.1、ブロックテーマ環境の投稿に画像をブロックを挿入し複製して4枚まで増やしました。

期待した挙動は1枚目以外にloading=”lazy”が付与されることです。しかし、すべての画像に付与されません。

ローディング属性付与のメカニズム

\wp-includes\media.phpで定義されたwp_get_loading_optimization_attributes関数を読み、試行錯誤した結果次のことがわかりました。

• imgとiframeが付与対象
• ファーストビューに表示される画像は付与対象外
• 3枚目以降に付与されやすい（wp_increase_content_media_count関数で管理）
• 独自のHTMLで<img>を出力すると対象外
• wp_lazy_loading_enabledが無効化すると対象外

「メインコンテンツに配置された画像をカウントしている」で気付き、複製した画像ブロックを削除し、異なる画像を4枚並べたところloading=”lazy”の付与に成功しました！

ローディング属性の付与の条件には次のものがあったのです。

• 同一の画像は1枚と数えるため、異なる画像が3枚以上ある

同一画像を並べているとloading=”lazy”はつきませんが、fetchpriority=”high”は全画像に追加されました。奥が深いですね。
リリース：WordPress 6.3 での画像パフォーマンスの強化

ローディング属性の検証のすすめ

ローディング属性の挙動を確かめたい場合は、次の条件で試してみてください。

ローディング属性は、ファーストビューに表示されず、異なる画像が3枚以上ある場合、3枚目以降に付与されやすい。

最初に勘違いをして、コアアップデートのタイミングでloading=”lazy”が非推奨になり、fetchpriority=”high”が推奨になったのかと考えたのですが、深堀りしてみることで思わぬことを発見するものです。