背景画像は害悪である

ウェブサイトで背景画像を避けるべき理由、背景画像を素早く見つける方法、そしてこの問題の修正方法を学びましょう

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2024-11-27

背景画像は害悪である

私のことを知っている方、または私の講演を聞いたことがある方は、背景画像について話しているのを聞いたことがあるかもしれません。知らない方のために：私は背景画像が本当に本当に嫌いです。この記事では、背景画像が嫌いな理由、背景画像のあるページを素早く見つける方法、そしてそれを修正する方法を簡単に説明します！

背景画像がCore Web Vitalsに悪影響を与える理由

ウェブページを読み込む際、すべての要素には適切なタイミングと場所があります。遅延読み込み、プリロード、非同期読み込み、スケジューリング、fetchpriorityの定義などの最新技術を使えば、すべての重要なリソースをほぼ制御できます。背景 画像を除いて！ 

この実例を見てみましょう：

日常的に、主にWordPressサイトでこのパターンを目にします。通常の画像はすべて遅延読み込みされていますが、一部の画像（この場合はフッターのソーシャルアイコン）は背景画像です。何が起こるか想像できますか？

<html>
<head>
    <style>
        footer {
            /* a margin of 100 vh wil make the footer off-screen !*/
            margin-top: 100vh;
            >.social {
                >.facebook {background-image: url('img/facebook.jpg');}
                >.instagram {background-image: url('img/instagram.jpg');}
                >.linkedin {background-image: url('img/linkedin.jpg');}
                >.email {background-image: url('img/email.jpg');}
            }
        }
    </style>
</head>
<body>
    <!-- yes this image is lazy loaded, because tiny mistakes happen! -->
    <img loading="lazy" src="img/hero.jpg"></img>
    <footer>
        <div class="social">
            <span class="facebook"></span>            <span class="instagram"></span>            <span class="linkedin"></span>            <span class="email"></divspan        </div>
    </footer>
</body>
</html>

お察しの通り、画面外の背景画像はダウンロードキューにおいて、通常ページのLargest Contentful Paint要素となるはるかに重要な'hero.jpg'画像 よりも先に並びます。

lazy lcp with bg img

しかし、それだけではありません！

先ほど言った通り、背景画像は害悪です！なぜなら、時々おかしな優先度が付けられること以外にも、背景画像には通常の画像が持つ便利な機能がないからです！

  • 遅延読み込みなし：背景画像にはloading属性がありません
  • 非同期デコードなし：背景画像にはdecoding属性がありません
  • fetchpriorityなし：背景画像には fetchpriority 属性がありません
  • レスポンシブ画像ソース：背景画像の image-set()属性は、適切なレスポンシブデザインで得られる機能と同等のパワーを持っていません。
  • widthとheight属性なし。シンプルなwidthとheight属性を設定できないため、コードを必要とする回避策を使うことになります（同じ複雑さならコードが多いほど常に遅くなります！）
  • altテキストなし：これは

ページ上のすべての背景画像を素早く見つける

ウェブページに背景画像があるかどうかを調べるにはどうすればよいでしょうか？ネットワークインスペクターを確認し、画像でフィルタリングし、メニューバーを右クリックし、イニシエーター列を有効にしてイニシエーターを確認することもできますが、このコードをデベロッパーコンソールに貼り付ける方がはるかに簡単です。

Ctrl-Shift-Iでデベロッパーコンソールを開き、コンソールタブに移動して、このコードを貼り付けるだけです。ページ上のすべての背景画像が表示されます
let bgimg = performance.getEntriesByType('resource')
  .filter(rs => rs.initiatorType == 'css')
  .map(rs => {
  return {
    name: rs.name,
    initiator: rs.initiatorType
  }
}) || [];

(bgimg.length > 0)?
    console.table(bgimg):
    console.log('No background images on this page!');

これにより、すべての背景画像の名前とイニシエーターがきれいにフォーマットされたテーブルで表示されます

background img console table

背景画像を避ける方法

背景画像は簡単に回避できます。その方法は画像自体によって異なります。大きく分けて2つの方法があります。

「通常の画像」の場合

信じられないかもしれませんが、背景画像を見つけるケースの大半では、画像の背景部分に目的すらありません。画像は単に「ページのどこかに配置する必要がある」だけで、background-image:url() がその目的で誤用されているのです。
この場合は、通常のimageタグを追加して、スタイルシートから背景画像を削除するだけです。

カバー画像の場合：

カバー画像とは、親コンテナを完全に覆う画像のことです。背景画像をカバー画像として使用することは、かつてはカバー画像を実現する唯一の方法だったため、ある程度理にかなっています。人は慣れたものを使い続けるものです。幸いなことに、現在はより良い選択肢があります。では修正しましょう！
カバー画像の場合は、スタイル   background-image: url(hero.jpg);background-size: cover;を削除し、同じコンテナに通常の画像を配置して、CSSを次のように編集します：

<style>
.img-container {
    position: relative;
    > img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       position: absolute;
       z-index: 1;
   }
}
<style>

<div class="img-container">
  <img 
       height="500" 
       width="300" 
       decoding="async" 
       loading="lazy" 
       src="hero.jpg"
       srcset="hero-320w.jpg, hero-480w.jpg 1.5x"
       alt="alt text"
       fetchpriority="low"
  >
</div>


Make decisions with Data.

You cannot optimize what you do not measure. Install the CoreDash pixel and capture 100% of user experiences.

Create Free Account >>

  • 100% Capture
  • Data Driven
  • Easy Install
背景画像は害悪であるCore Web Vitals 背景画像は害悪である