WordPress5.5から、画像に「loading=”lazy”」という属性が追加されるようになりました。
<img loading="lazy" width="800" height="423" src="https://example.com/wp-content/uploads/2020/08/sample.jpg" alt="" class="wp-image-8" srcset="https://example.com/wp-content/uploads/2020/08/sample.jpg 800w, https://example.com/wp-content/uploads/2020/08/sample-300x159.jpg 300w, https://example.com/wp-content/uploads/2020/08/sample-768x406.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">「loading=”lazy”」が追加されることで、画像が遅延読み込みされるようになります。これはネイティブLazy Loadと呼ばれていて、JavaScriptを使わなくても遅延読み込みが実装でき、各主要ブラウザでサポートされています。
サポートされていないブラウザでは、エラーが起こるというわけではなく「loading=”lazy”」が付いていても無視されるだけです。特別な理由がない限りは、そのままで良いかと思います。
ですが、既にJavaScriptで遅延読み込みを実装済み等、「loading=”lazy”」の追加を無効化したいというケースもあるかもしれません。
そんなわけで、画像に「loading=”lazy”」を追加しないようにする方法をご紹介したいと思います。
WordPress5.5から画像に追加されるようになったネイティブLazy Loadを無効化する方法
適用しているテーマのfunctions.phpに以下1行を追加することで、ネイティブLazy Loadを無効化できます。
add_filter( 'wp_lazy_loading_enabled', '__return_false' );元のimgタグから「loading=”lazy”」が消えて、以下のようなimgタグが出力されるようになります。
<img width="800" height="423" src="https://example.com/wp-content/uploads/2020/08/sample.jpg" alt="" class="wp-image-8" srcset="https://example.com/wp-content/uploads/2020/08/sample.jpg 800w, https://example.com/wp-content/uploads/2020/08/sample-300x159.jpg 300w, https://example.com/wp-content/uploads/2020/08/sample-768x406.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">あとがき
JavaScriptの遅延読み込みを使いたいとか、何らかの理由でネイティブLazy Loadを無効化したい時は、ぜひ参考にしていただければと思います。