8月11日にリリース予定のWP5.5には、画像を遅延読み込みさせるための loading属性を自動で追加してくれる機能が標準で実装されているとのこと。プラグインをインストールしたり自前でカスタマイズしたりの煩わしさから解放されると思うと嬉しいです。
標準機能になったといっても、どんな画像 <img> にも片っ端から loading=”lazy” を追加してくれるわけではないので注意が必要です。プラグインのときもそうでしたが、 width属性と height属性をもつ <img> でなければloading属性は追加されません。そうじゃないとレイアウトシフトが起きてしまいますからね。また、現時点では<iframe>には適用されないそうなので、<iframe>でも有効にしたい場合はカスタマイズが必要になります。
デフォルトで対象になるのは次の画像
- 記事内の画像 ( the_content )
- 抜粋内の画像 ( the_excerpt )
- テキストウィジェット内の画像 ( widget_text_content )
- 投稿者プロフィール画像 ( get_avatar )
- テンプレートなどで wp_get_attachment_image() を使って出力している画像
wp_get_attachment_image() を使うときに Lazy-load を無効にしたければ第4引数に ‘loading’ => false を追加すればいいようです。そもそも自動で追加するのを止めたいなんて場合は、 wp_lazy_loading_enabled をフックすることで可能なようです。具体的な仕様やカスタマイズ方法については公式からアナウンスされています。気になる方は参照してみてください。
