WordPress5.5以降 Lazy Loading 停止方法 Native Lazyload
![eyecatch_787](https://kobewing.com/wp-content/uploads/2021/03/eyecatch_787.jpg)
問題点
WordPress5.5以降に採用されるようになった、Native Lazyloadを停止させて、画像にLazyloadを無効にさせる必要が出た。
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を無効にすることも可能です。
オススメ記事
![eyecatch_567](https://kobewing.com/wp-content/uploads/2021/02/eyecatch_567-150x150.jpg)
WordPressで使用しているプラグイン一覧 ConoHa Wing 2021…
WordPressプラグインリスト 2021年2月現在、Co…
![eyecatch_626](https://kobewing.com/wp-content/uploads/2021/02/eyecatch_626-150x150.jpg)
inputタグのCSSに「:focus」を使用時に出る青色の枠を消す方法…
問題点 HTMLのinputタグのCSSに「:focus」を…
![eyecatch_1154](https://kobewing.com/wp-content/uploads/2023/06/eyecatch_1154-150x150.jpg)
WordPress Jetpack 12.1.1 重要なセキュリティーホール対策…
問題点 2023年5月30日、WordPressの人気プラグ…
ディスカッション
コメント一覧
まだ、コメントがありません