WordPressでブロック要素の背景画像を指定できるテーマは多いと思います。便利なのでホイホイ使っているとPage Speed Insightでオフスクリーン画像の遅延読み込みの警告が出て、はてどうしたものか?となる人は多いでしょう。
背景画像のlazyloadに対応したプラグインもありますが、基本HTMLにインラインスタイルで書く必要があり、テーマが勝手にCSS側に出力してしまっている場合は、対応難しくなります。
困って色々調べていたら、簡単な方法があったのでまとめておきます。
CSS background-imageのlazyload手順
lazyloadスクリプトを用意する
Intersection Observerを使ったJavscriptを使います。
背景画像を遅延読み込みしたいclass名をbg-lazyと決めていますが、お好きに変更できます。
add_action('wp_footer',function(){
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".bg-lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.classList.remove("bg-lazy");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".bg-lazy");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('bg-lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
})
</script>
<?php
});
The Complete Guide To Lazy Loading Images | CSS-Tricks
Wondering how lazy loading images works? It's an important thing to understand as it can really speed up the loading of ...
background-imageを適用しているブロックにclassを追加
背景画像のlazyload適用classをbg-lazyと決めているので、背景画像を適用しているブロックにbg-lazy classを追加します。
background-imageを指定しているセレクタを探す
.section {
background-repeat: no-repeat;
background-image: url(https://hogehoge.com/wp-content/uploads/2021/10/1.jpg);
background-position: 50% 50%;
background-attachment: fixed;
}
background-image:noneのCSSを追加する
.section.bg-lazy {
background-image: none!important;
}
まとめ
背景画像のlazyloadに対応しているlazyloadスクリプトは多くありますが、自動的に処置してくれるのは、インラインスタイルでbackground-imageになっている場合ぐらいです。CSSで背景画像になっているケースはほぼ絶望的な状況だったのですが、今回CSSとJSを組み合わせることで簡単に対応できることがわかりました。
背景画像を多用しているサイトでは役に立つかもしれません。