お問い合わせはコチラから

CSS background-imageをlazyloadする方法

サイト運営

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を組み合わせることで簡単に対応できることがわかりました。

背景画像を多用しているサイトでは役に立つかもしれません。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました