Hintergrundbilder sind böse

Erfahren Sie, warum Sie Hintergrundbilder auf Ihrer Website vermeiden sollten, wie Sie Hintergrundbilder schnell finden und wie Sie dieses Problem beheben können

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

Hintergrundbilder sind böse

Diejenigen unter Ihnen, die mich kennen oder mich sprechen gehört haben, haben mich vielleicht über Hintergrundbilder reden hören. Diejenigen unter Ihnen, die das nicht haben: Ich mag Hintergrundbilder wirklich nicht. In diesem Artikel werde ich kurz erklären, warum ich Hintergrundbilder nicht mag, wie man Seiten mit Hintergrundbildern schnell findet und wie man sie behebt!

Warum Hintergrundbilder schlecht für die Core Web Vitals sind

Beim Laden einer Webseite hat jedes Element seine Zeit und seinen Platz. Mit einigen modernen Techniken wie Deferring, Preloading, Async Loading, Scheduling, dem Definieren der fetchpriority usw. usw. können wir alle kritischen Ressourcen so ziemlich unter Kontrolle bekommen. Außer Hintergrundbilder! 

Betrachten Sie dieses reale Beispiel:

Täglich sehe ich dieses Muster, meistens auf WordPress-Seiten. Alle normalen Bilder werden lazy geladen und einige Bilder (in diesem Fall die sozialen Icons im Footer) sind Hintergrundbilder Können Sie erraten, was passiert?

<html>
<head>
    <style>
        footer {
            /* ein Rand von 100 vh macht den 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>
    <!-- ja dieses Bild ist lazy loaded, denn kleine Fehler passieren! -->
    <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>

Sie haben es vielleicht erraten: die offscreen Hintergrundbilder werden vor dem viel wichtigeren 'hero.jpg' Bild für den Download in die Warteschlange gestellt, welches normalerweise das Largest Contentful Paint Element auf der Seite werden wird.

lazy lcp with bg img

Aber das ist nicht alles!

Wie ich schon sagte, Hintergrundbilder sind böse! Das liegt daran, dass Hintergrundbilder abgesehen von der seltsamen Priorität, die sie manchmal erhalten, die coolen Funktionen missen lassen, die normale Bilder erhalten!

  • Kein Lazy Loading: Es gibt kein loading-Attribut für Hintergrundbilder
  • Kein Async Decoding: Es gibt kein decoding-Attribut für Hintergrundbilder
  • Keine fetchpriority: Es gibt kein fetchpriority -Attribut für Hintergrundbilder
  • Responsive Bildquellen: Das image-set() Attribut für Hintergrundbilder hat nicht die gleiche Funktionsvielfalt, die Sie mit gutem responsive Design erhalten.
  • Kein width- und height-Attribut. Da man das einfache width- und height-Attribut nicht setzen kann, werden Sie Workarounds verwenden, die Code erfordern (mehr Code ist immer langsamer als weniger Code mit gleicher Komplexität!)
  • Kein Alt-Text: während dies nicht

Finden Sie schnell alle Hintergrundbilder auf einer Seite

Also wie finden wir heraus, ob eine Webseite Hintergrundbilder enthält? Nun, Sie könnten den Netzwerk-Inspektor überprüfen, nach Bildern filtern, mit der rechten Maustaste auf die Menüleiste klicken, die Initiator-Spalten aktivieren und den Initiator überprüfen, aber es ist viel einfacher, diesen Code in die Dev-Konsole einzufügen.

Öffnen Sie einfach die Dev-Konsole mit Ctrl-Shift-I, navigieren Sie zum Konsolen-Tab und fügen Sie diesen Code ein. Er zeigt Ihnen alle Hintergrundbilder auf der Seite an
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('Keine Hintergrundbilder auf dieser Seite!');

Dies zeigt Ihnen eine sauber formatierte Tabelle mit allen Namen der Hintergrundbilder und den Initiatoren

background img console table

Wie man Hintergrundbilder vermeidet

Hintergrundbilder sind leicht vermeidbar. Wie man das macht, hängt vom Bild selbst ab. Es gibt grob 2 Methoden.

Im Fall von 'normalen Bildern'

Sie würden es nicht glauben, wenn ich es Ihnen erzählen würde, aber in den meisten Fällen, in denen ich Hintergrundbilder finde, hat der Hintergrundteil des Bildes nicht einmal einen Zweck. Die Bilder müssen einfach 'irgendwo auf der Seite sein' und das background-image:url() wird für diesen Zweck missbraucht.
Wenn dies der Fall ist, fügen Sie einfach ein normales Bild-Tag hinzu und entfernen Sie das Hintergrundbild aus dem Stylesheet.

Im Fall von Cover-Bildern:

Cover-Bilder sind Bilder, die einen Elterncontainer vollständig bedecken. Die Verwendung von Hintergrundbildern als Cover-Bilder macht irgendwie Sinn, da dies lange Zeit die einzige Möglichkeit war, Cover-Bilder zu erhalten, und ich schätze, die Leute bleiben einfach bei dem, was sie wissen. Glücklicherweise stehen uns bessere Optionen zur Verfügung. Also lassen Sie uns das beheben!
Im Fall von Cover-Bildern entfernen Sie einfach den Stil   background-image: url(hero.jpg); background-size: cover;und platzieren Sie ein normales Bild in demselben Container und bearbeiten Sie das CSS so, dass es wie folgt aussieht:

<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>


CrUX data is 28 days late.

Google provides data 28 days late. CoreDash provides data in real-time. Debug faster.

Get Real-Time Data >>

  • Real-Time Insights
  • Faster Debugging
  • Instant Feedback
Hintergrundbilder sind böseCore Web Vitals Hintergrundbilder sind böse