Core Web Vitalsを改善するために背景画像を遅延させる

背景画像を遅延させる

背景画像はCore Web Vitalsにとってほとんどメリットがありません。レスポンシブではなく、ネイティブのloading属性にアクセスできず、優先度をネイティブに制御することもできません。

背景画像はしばしばCore Web Vitalsの問題を引き起こします。重要でない背景画像を遅延させることで、多くの場合Largest Contentful Paintが改善します。

最終レビュー: 2026年2月 Arjen Karel

Web Almanac 2024のパフォーマンスの章（LCP要素タイプのデータを含む最新版）によると、モバイルページの9%でCSS背景画像がLCP要素として使われています。そのうち、preloadされているのはわずか2%です。つまり、約11サイトに1つの割合で、ページ上で最も重要な画像がブラウザのプリロードスキャナから検出されず、読み込みの開始が遅れていることになります。

CoreDashが監視するサイト全体で、LCP要素が通常の<img>タグのページは、LCPがCSS背景画像のページよりもp75 LCPが約620ms高速です。この差のほぼすべてはリソース読み込みの遅延によるものです。ブラウザはプリロードスキャナ経由で<img>を即座に検出しますが、背景画像はCSSのダウンロードと解析が終わるまで待機しなければならないからです。

Webサイトで背景画像を含んだこのアンチパターンを頻繁に目にします。特に、Elementorのようなページビルダーを使用しているWordPressサイトで顕著です。

1. LCP画像（ヒーロー画像）を含むすべての画像がlazy loadingされている
2. それほど重要ではない画像要素（スペーサーや検索ボックスの背景など）が、スタイルシート内で背景画像としてリンクされている

この短い記事では、ページ上のより重要な画像を優先するために、背景画像をlazy loadingする方法を解説します。

注意点

まず注意点があります。背景画像によってLCP要素が遅延している場合、設計に誤りがあります。可能であれば正しい方法で修正してください（LCP画像をpreloadする、LCP画像をlazy loadingしない、背景画像を完全に避ける）。しかし、レガシーコードが多すぎて、最善を尽くしてサイトにパッチを当てる以外に短期的な解決策がないこともあります。そのような時に、ここで紹介する修正が役立ちます。

方法1: すべてを遅延させる

すべてを遅延させる方法は乱暴なアプローチです。しかし実装は簡単で、Core Web Vitalsの改善によく機能します。この方法では、DOMContentLoadedイベントが発火するまで、すべての背景画像を遅延させます。これにより、ブラウザは最も重要なリソースのスケジュールを優先するための時間を少し確保できます。

手順は次のとおりです。まず、背景画像を持つすべての要素に対して、background-imageスタイルプロパティを上書きします。DOMコンテンツが読み込まれたら、この上書きを解除します。その時点では、背景以外の画像はすでにダウンロードのキューに入っています。このタイミングで、重要性の低い背景画像をダウンロードのキューに追加します。

コード

まず、スタイルを作成してページのHEADに配置します。このスタイルタグは後で削除するため、必ずidを指定してください。もちろん、ワイルドカード（*）の代わりに、実際に背景画像を持つCSSクラス名のみを指定することもできます。

<style id="no-bg-img">
    *{background-image:none!important}
</style>

次に、DOMコンテンツが読み込まれた時点で、LCP画像はおそらくすでにダウンロードのキューに入っています。この段階で、背景画像をキューに追加しても安全です。

<script>
    window.addEventListener('DOMContentLoaded',function(){
        document.getElementById('no-bg-img').remove();
    })
</script>

もしLCPの早期ダウンロードがトリガーされない場合、原因はおそらくJavaScriptです。その場合は、「DOMContentLoaded」を「load」イベントに切り替えてみてください。

DebugBearのテストでは、背景画像のLCP要素をpreloadすることで、LCPが3.4秒から1.7秒に短縮されました。リソース読み込みの遅延は、LCP全体の75%からわずか2%に減少しています。

方法2: 背景画像をlazy loadingする

背景画像をlazy loadingする方法は、より丁寧で高度ですが、個別の調整が必要です。

仕組みは次のとおりです。まず、背景画像を持つすべての要素を手動で特定します。それらの要素にクラス名（.lazybg）を追加します。次に、IntersectionObserverでこれらの要素を監視し、表示されるviewportに近づいた時点で背景画像をlazy loadingします。

コード

まず、スタイルを作成してページのHEADに配置します。このスタイルは先ほどと似ていますが、ページ上のすべての要素ではなく、特定のクラス名を持つ要素のみbackground-imageプロパティを無効にします。

<style>
    .lazybg {background-image: none !important}
</style>

次に、DOMコンテンツが読み込まれたら、背景画像を持つ要素の監視を開始します。要素がスクロールしてviewportに入った時点で、.lazybgクラスを削除し、背景のダウンロードをトリガーします。

<script>
window.addEventListener('DOMContentLoaded', (event) => {

  // all elements with background images that should be lazy loaded
  const lazyImages = document.querySelectorAll('.lazybg');

  // options for the observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

  // the observer
  const imageObserver = new IntersectionObserver((entries, imageObserver) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
             showImageBackground(entry.target);
             imageObserver.unobserve(entry.target);
         }
     });
  }, backgroundOptions);


  // observe each image
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // show background image
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

この方法の利点は、表示されるviewport内にない背景画像がダウンロードのキューに入らないことです。これにより、読み込み段階でブラウザのリソースが解放されます。このようなテクニックの詳細については、画面外の画像を遅延させる方法を参照してください。

まとめ

どちらの方法も、Largest Contentful Paint画像のような重要な画像を優先し、背景画像を遅延させるのに有効です。最初の方法は実装が非常に簡単で、すぐに結果が出ます。2番目の方法は背景画像に真のlazy loadingの動作を追加し、PageSpeedの向上にさらに大きく貢献します。

これらの方法を適用する際は注意が必要です。背景画像を遅延させる必要がある時点で、そのページはいわゆる「slow by design（設計レベルで遅い）」状態です。理想的な解決策は、ページを書き直し、背景画像の使用を避けることです。