WordPress5.5がデフォルトでLazy-loadをサポート、画像の遅延読み込みが自動に

WordPress5.5がデフォルトでLazy-loadをサポート、画像の遅延読み込みが自動になります。

公式ブログ内で仕様やカスタマイズ方法など見てみましょう。

これまでLazy-load（画像の遅延読み込み）を実現させるためにプラグインを利用していた方も多いかと思われます。

WordPress5.5からはプラグインなしで、デフォルトでサポートされることになりました。

Contents

Lazy-loadの対象となる画像コンテンツ

記事によると、デフォルトで以下のエリアにある画像に対しloading=”lazy”という属性を追加します。

投稿コンテンツの画像（the_content）

抜粋の画像（the_excerpt）

テキストウィジェットの画像（widget_text_content）

アバター画像（get_avatar）

wp_get_attachment_image()（wp_get_attachment_image）を使用したテンプレート画像

この際、レイアウトシフトの問題を避けるため、widthとheightの属性が必ず必要になります。

もっともWordPressのエディタでメディアを追加している場合はこの属性はあらかじめ付加されていますから、一般に利用する場合は特に問題なくloading=”lazy”が追加され、遅延読み込みが利用できます。

wp_lazy_loading_enabled という新しいフィルタにより、機能のオンオフ切り替えが可能です。

このフィルターはサイト全体（コアを通るもの）について適用されます。

たとえば完全にLazy-loadをオフにしたい場合、

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

1	add_filter( 'wp_lazy_loading_enabled', '__return_false' );

上記のスニペットでオフにできます。

サイト全体のカスタマイズを可能にするこのフィルタに対して、特定の画像だけをコントロールするための wp_set_image_loading_attr というフィルタも用意されています。

機能テスト用のプラグインが公開されていますので、5.5に向けてテストをお勧めします。