WordPress5.9では1つ目の画像がlazyloadなしに！設定方法も紹介。

WordPress5.9では1つ目の画像がlazyloadなしに

 

2022年1月にリリースされるWordPress5.9ですが、デフォルトで1つ目の画像がlazyloadなしになる予定です。

参考:Omit lazy-loading attribute on first content image/iframe

 

そもそもなのですが、WordPress5.5以降では、画像がデフォルトでlazy-loadされることになっています。

参考:https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/

 

ところが、これではファーストビューに含まれる画像まで遅延読み込みされてしまい、
Core Web Vitalsの指標の１つであるLCPが低下する原因になっていました。

そもそも画像の遅延読み込みはサイト下部にある画像の読み込みを遅らせることで初めて良い影響をもたらすので、
ファーストビューにある画像まで遅延読み込みされてはいけませんよね。

 

なので、WordPress5.9では１つ目に表示される画像以外にloading=lazyが実装されることになったようです。

 

ただし、トップに画像が出ないときもある。逆に2つ以上出るときもある。

 

ただ、ファーストビューの画像が１つでないときもありますよね。
ファーストビューに画像が0か2つ以上の時です。
なので、そういう場合はこちらで調節する必要があります。

 

そもそも自動でimgタグにloading=lazyがつくのはthe_contentで出力される画像やwp_get_attachment_imageなど一部の関数に限られます。

 

なので、それらがファーストビューにあるのであれば、add_filterなどを用いて書き換えます。

the_post_thumbnailの場合

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

上記コードのfalseをtrueに変えたり、imgをiframeに変えたり、’the_post_thumbnail’をwp_get_attachment_imageに変えたりすることで、他のタグや関数でも適応可能です。
テンプレート単位で出しわけるようにカスタマイズすれば管理などもしやすく良いかと思います！

 

ちなみにすべて無効にする場合は

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

でOKです。

 

もう一つの考え方としてテンプレートに直接記述するのもありです。
メディアのリンクのみを取得して、あとはテンプレートに直接書かれたimgに入れ込みます。

例えばサムネイル画像の場合、

$img_id = get_post_thumbnail_id($post->ID);
$img = wp_get_attachment_image_src($img_id);

等でURLを取得し、

<img src=”<?php echo $img[0]; ?>” alt="" > 

とテンプレートに記述すればOKです。

 

もちろん、これ以外にもいろいろ方法はありそうです。
 

まとめ

 
細かくやれば、どこまででもできるのが、表示高速化です。
画像のlazyloadを効率的に配置してLCPや表示速度を改善していきましょう！！

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

---

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

数時間の作業を一瞬で！PageSpeed Insights最大100ページを一括診断！

PageSpeed Insightsを手動でチェックすると、3〜5分程度かかってしまいます。
一定規模、以上のWebサイトで全ページをチェックしようとすると、数時間以上のリソースが必要になります。

デジタルアイデンティティでは、「トップページ以外の速度状況がわからない」「ページ数が多くて管理しきれない」という企業様向けに、PageSpeed Insightsで最大100ページをまとめて計測する「サイトスピード一括診断ツール」を提供しています。

WebサイトのURLを入力するだけで、モバイル・PC両方のスコアやCore Web Vitals指標を全自動で取得。単なるスコアだけでなく、「どのページから直すべきか」がわかる修正優先度リストや、SEOリスクの可視化レポート（PDF・Excel）を無料で納品します。

こんなお悩み、ありませんか？

• 1ページずつPSIで計測するのが面倒で放置している…
• トップページは早いが、記事や商品ページの速度が不安…
• どのページが足を引っ張っているのか特定できない…
• 社内報告用にサイト全体のパフォーマンスを数値化したい…
• 改善インパクトの大きいページから効率よく対策したい…

「点」ではなく「面」でサイトの課題を把握し、ユーザー体験とSEO評価を底上げしましょう。
サービスリリース記念で今だけ無料で診断いたします！

【今だけ無料】一括診断に申し込む