WordPress5.5以降 Lazy Loading 停止方法 Native Lazyload

eyecatch_787

問題点

WordPress5.5以降に採用されるようになった、Native Lazyloadを停止させて、画像にLazyloadを無効にさせる必要が出た。

結論:WordPress 5.5以降で自動追加される画像の Lazy Loading を停止したい場合は、テーマ側で `wp_lazy_loading_enabled` フィルターを調整することで対応できます。ただし、Lazy Loading は表示速度改善に役立つ場合もあるため、停止する前にPageSpeedや実際の表示状況を確認してください。

Lazyloadとは

Lazyloadとは、ページの読み込み速度(テキストなどを先に読めるようにする)を上げるために、画像の読み込みを遅延する技術である。WordPress5.5以降は、Native Lazyloadとして標準実装されている。画像のimgタグに自動的に「loading=”lazy”」と入り、機能を動作するようにしている。

Native Lazyload対象は

Native Lazyload対象になるのは、下記条件で出力される画像になります。
※WordPress5.5時点の条件のため、バージョンが上がると変更や追加、削除がある可能性もあり。

images within post content (the_content)
images within post excerpts (the_excerpt)
images within text widgets (widget_text_content)
avatar images (get_avatar)
template images using wp_get_attachment_image() (wp_get_attachment_image)

最初の「the_content」が記事や固定ページに該当されるところです。

Lazy loadingを無効にする方法

WordPress5.5以降で、Lazy loadingを無効にする方法は、下記コードを「functions.php」などに追加すれば可能です。

add_filter( 'wp_lazy_loading_enabled' , '__return_false' );

このコードを追加しますと、Native Lazyloadの機能により、画像のimgタグに自動的に挿入されていた「loading=”lazy”」が入らなくなります。

その他応用例

今回は、詳細を省きますが、「if(is_page~~)」、「if(!is_page~~)」、「if(is_single)」、「if(!is_single)」などを利用して、条件式を組み、特定の記事や固定ページのみ、Lazy loadningを無効にすることも可能です。

あわせて確認したいWordPress関連記事

WordPressの画像読み込み、テーマ設定、アクセスログ確認を見直したい場合は、以下の記事もあわせて確認してみてください。

画像のLazy Loadingだけでなく、トップページの表示内容やアクセスログ確認もあわせて整理しておくと、WordPress運用時の表示速度や原因調査を進めやすくなります。

読者アンケート

このページの広告表示量について

表示されている広告の量を、どのように感じましたか?

今後の表示改善の参考にするため、近いものを1つ選んでください。

個人を特定する情報は保存しません。

WordPress 関連の相談先・運営者情報

WordPress 改修や実装メモの記事を読んだ方向けに、運営者情報と相談先を整理しています。連絡は X を基本窓口とし、内容確認後に対応可否をご案内します。

Xでご依頼・ご相談 ホームを見る

Windowsの不具合対処や更新情報は、確認できた範囲で随時整理しています。内容により個別対応できない場合があります。