WordPress5.5 画像の遅延読み込みがデフォルトになった

2020年、loading属性（lazy-loading）がHTMLの標準仕様になりました。

WP5.5はそれに合わせて、デフォルトでimgタグにloading="lazy"を自動追加します。

Lazy-Loadingとは？

最近のWebサイトでは画像を最初に読み込まず、スクロールで画像のところに来てはじめて読み込みが行われます。

これをLazy Loadingと言います。

これまではJavaScriptで処理を行なっていましたが、2020年、HTML5の標準仕様になりました。

もともとGoogle Chromeが独自に開発した機能ですが、HTMLの仕様を策定するWHATWGが取り入れました。

WordPress5.5はデフォルトで画像遅延読み込み

HTML5の標準仕様になったことで、WordPress5.5では画像の遅延読み込みがデフォルトになりました。

ユーザーはとくに何もする必要はありません。次の機能を使って画像をHTMLに出力しているものは<img>にloading="lazy"が自動追加されます。

（過去記事も追加される。更新しなくていい。）

これらの機能を使って画像のHTMLを取得すると、いっしょにwidth, height属性も付けてくれます。

至れり尽くせりですね？

しかし、自分でテンプレートなどに直接書き込んだ<img>タグには自動追加しません。

そこは自分で対応することになります。

<iframe>は未対応

YouTubeなどの動画はめ込みに使う<iframe>も遅延読み込みができますが、WordPressでは未対応です。

まぁ、自動再生でもしないかぎり問題はないでしょう。

対応するとは言ってませんが、『まだimgしかありませんが』という文言があるくらいなので対応するでしょう。それを待ってもいいかなと思います。

画像遅延読み込みのカスタマイズ

『自動追加されると困るんだけど？』という人のためにカスタマイズ用のフィルターが用意されています。

フィルターでごちょごちょするのは、WordPressのカスタマイズでは毎度おなじみなのでかんたんです。

サイト全体を変更することもできるし自動追加を関数ごとにもできます。

Lazy-Loadingの有効/無効

まずは、自動追加されるLazy-Loadingを無効化する方法です。

ぜんぶ無効化することもできるし関数ごとに設定もできます。一応、HTMLタグごとにもできますが、WP5.5では<img>だけなので参考程度に。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

return falseを返すだけなら用意されている __return_false() を使うだけなのでかんたん。次は、wp_get_attachment_image() を使って表示したimgの遅延を無効化したサンプルです。

add_filter( 'wp_lazy_loading_enabled', function( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
        return false;
    }
    return $default;
}, 10, 3 );

<img>のloading属性値の変更

WP5.5で自動追加する<img>のloading属性値は 'lazy' です。これを変更します。

サンプルでは、特定の画像に対してLazy-Loadingを無効化しています。

（さっきのフィルタではできなかった画像ごとの無効化もできる。）

add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image, $context ) {
    if ( 'the_content' === $context ) {
        $image_url = wp_get_attachment_image_url( 42, 'large' );
        if ( false !== strpos( $image, ' src="' . $image_url . '"' ) {
            return false;
        }
    }
    return $value;
}, 10, 3 );

これはimgタグ用なので気をつけましょう。おそらく<iframe>に対応するときには、別のフィルタが用意されるはずです。

画像取得時に無効化

テンプレートやPHPプログラムで、画像HTMLを取得時にLazy-Loadingを無効化することもできます。

echo wp_get_attachment_image(
    42,
    'large',
    false,
    array( 'loading' => false ),
);