前回に引き続き、パフォーマンス改善の話です。
WordPress 5.5から画像やiframeタグに自動的に遅延読み込みとなるloading="lazy"が追加されるようになりました。これにより、ネイティブLazyloadが有効となり、コアウェブバイタルの1要素である Largest Contentful Paint（LCP）の改善に繋がります。
パフォーマンス改善のため、5.9からはネイティブLazyloadに関するwp_omit_loading_attr_thresholdフィルタが追加され、最初の1つ画像にはネイティブLazyloadが適用されなくなり、その後6.3では3つの画像が適用されなくなるという仕様となりました。
今回は、このフィルタを利用しloading ="lazy" を適用させる画像を変更させるコードをご紹介します。
目次
WordPress 5.5から始まったネイティブLazyloadとは
WordPress 5.5では、画像がスクロールして表示されるまで画像の読み込みを待機させます。技術用語では「遅延読み込み (lazy loading)」といいます。
WordPress 5.5「エクスタイン」 – WordPress.org 日本語
Pagespeed Insightsで「オフスクリーン画像の遅延読み込み」項目として表示され、対処しているケースもあるかと思いますが、5.5からはWordPress側で遅延読み込み処理をしてくれるようになりました。imgタグ自体に loading ="lazy" が追加されるいわゆる「ネイティブLazyload」となり、IEを除く主要ブラウザで正式にサポートされている遅延読み込み方式です。
loading 属性を 要素に（または loading 属性を 要素に）設定することで、ユーザーが近くにスクロールするまで、画面に表示されている画像や iframe の読み込みを延期するように、ブラウザーに指示することができます。
遅延読み込み – ウェブパフォーマンス | MDN
これにより、正しく画像を遅らせて読み込ませることができ、特に画像が多い記事や固定ページでパフォーマンス改善につながると言えます。
WordPress 5.9で最初の画像にはネイティブLazyloadが適用されない仕様に変更
全ての画像にloading ="lazy"が付与されていましたが、この場合、LCPに影響を与えることが判明。そのため、バージョン5.9では最初の1つ目の画像にloading ="lazy"を付与させないように仕様が変更されました。
Enhanced lazy-loading performance in 5.9 – Make WordPress Core
また、スキップさせたい画像を簡単に制御できるよう、wp_omit_loading_attr_thresholdフィルタが新しく追加されました。
wp_omit_loading_attr_threshold() – Function | Developer.WordPress.org
今回の機能強化で、LCPが全体的に改善され表示速度が最大30％速くなったという報告もあります。
WordPress can only make educated guesses around that and not be 100% certain, but an analysis taking into account 50 popular themes showed that the enhancement brought LCP improvements across the board, up to 30% faster page load.
Enhanced lazy-loading performance in 5.9 – Make WordPress Core
WordPress 6.3ではスキップする画像の数が3つに変更
バージョン6.3では、loading ="lazy"を付与させない画像が3つに仕様変更されました。つまり、4つ目の画像から遅延読み込みが始まる、ということです。（iframeが含まれていればそれも含める）
一般的なブログ記事であれば3つ程度は遅延読み込みせず、4つ目の画像やiframeから遅延読み込みが始まれば問題ないかと思います。
一方で、アイキャッチ画像がファーストビューを多く占めていて2つ目の画像からloading ="lazy"を適用させたいケースなどがあるかと思います。
フィルタを利用してloading=”lazy”を適用させる画像を変更させる
上述の通り、wp_omit_loading_attr_thresholdフィルタがWordPress 5.9から利用可能となりました。これによりloading ="lazy"を適用させはじめる画像を任意に変更可能です。またYoutube等の埋め込みコンテンツが上部に含まれている場合、iframeも数に入ります。
以下の例では、最初の画像はloading ="lazy"が付与されず、2つ目の画像からloading ="lazy"が付与されるようになります。
function custom_lazy_loading_threshold( $omit_threshold ) {
return 1; // 最初の1つの画像のみスキップ
}
add_filter( 'wp_omit_loading_attr_threshold', 'custom_lazy_loading_threshold' );
iframeタグも数に数えられる
Youtube動画を上部に埋め込むこともあるかと思います。wp_omit_loading_attr_thresholdフィルタはimgとiframeが対象のため、Youtube動画も対象となります。先ほどのコードの例だと、3つ目にあたるYoutubeコンテンツのiframeはネイティブLazyload対象ですが、
先程のコードを3つの画像をスキップするように設定変更してみると、正しくiframeが遅延読み込みせず、その次の画像から遅延読み込みしているのがわかります。
変更した箇所は return 3; のみです。
function custom_lazy_loading_threshold( $omit_threshold ) {
return 3; // 1から3へ変更
}
add_filter( 'wp_omit_loading_attr_threshold', 'custom_lazy_loading_threshold' );テーマに応じて遅延読み込みを開始する画像を制御する
このフィルタを利用することで、シンプルなコードで遅延読み込みの開始箇所を簡単にコントロールすることが可能です。これにより、より細かいパフォーマンス改善に繋がります。結果、Pagespeed InsightsやLighthouse改善に寄与します。
今回ご紹介したカスタムコードはWordPressテーマ内の functions.php に追加することで動作します。WordPressのカスタマイズが初めての場合は子テーマを作成して行うことをおすすめします。
コメントを残す