Fix langsame Hero-Images & Core Web Vitals

Wie man langsame Hero-Images repariert - kurz gesagt

Hero-Images sind große Bilder oben auf einer Webseite. Diese Hero-Images verursachen einen langen Largest Contentful Paint, wenn die Hero-Images nicht optimiert sind. 9 von 10 Seiten, die ich optimieren soll, haben Probleme mit den Hero-Images. In diesem Artikel zeige ich Ihnen verschiedene Techniken, wie Sie Hero-Images beschleunigen können.

Was ist ein Hero-Image?

Ein Hero-Image oder manchmal auch 'Hero-Header' genannt, ist ein großes Bild mit Text, das oft oben auf einer Webseite platziert wird. Ein Hero-Image dient als erster Blick eines Benutzers auf Ihr Unternehmen und Angebot aufgrund seiner prominenten Platzierung oben auf einer Webseite, die sich normalerweise über die volle Breite erstreckt.

Eine kurze Erinnerung: Hero-Images, die Core Web Vitals und der Largest Contentful Paint

Aufgrund der Größe des Hero-Image (es erstreckt sich normalerweise über die gesamte Breite der Seite und einen guten Teil der Höhe des sichtbaren Viewprots) wird dieses Element in fast allen Fällen zum Largest Contentful Pain Element.

Der Largest Contentful Paint ist eine wichtige Core Web Vitals Metrik. Das Largest Contentful Paint Element ist das größte Element, das im sichtbaren Viewport des Browsers gemalt wird.

Da nicht optimierte Bilder dazu neigen, viel Bandbreite zu beanspruchen und daher lange zum Laden brauchen, verursachen Hero-Images oft schlechte Largest Contentful Paint Metriken.

Optimierung des Hero-Image und des Largest Contentful Paint

Es gibt viele Techniken zur Optimierung der Hero-Images und des Largest Contentful Paint. Ich werde sie hier erklären. Die meisten Techniken können für noch bessere Ergebnisse kombiniert werden!

1 Preloaden Sie das Hero-Image oder senden Sie 103 Header

Wenn Sie möchten, dass ein Element so schnell wie möglich im Browser verfügbar ist, können Sie dieses Element preloaden. Preloading beinhaltet die Verwendung von Resource Hints. Resource Hints sagen dem Browser etwas über die Priorität eines Elements und lösen einen sehr frühen Download dieser Ressource aus.

<link 
  rel="preload" 
  as="image" 
  href="wolf.jpg" 
  imagesrcset="hero_400px.jpg 400w, hero.jpg 800w, hero_1600px.jpg 1600w" 
  imagesizes="50vw">

In naher Zukunft werden 103 Early Hints von Chrome-Browsern unterstützt. Dies ermöglicht es, Resource Hints zu senden, BEVOR die endgültige HTML-Antwort gesendet wurde. 103 Early Hints werden voraussichtlich ein Game Changer sein, wenn es um die Verbesserung des Largest Contentful Paint geht. Wenn Sie daran interessiert sind, mehr über Early Resource Hints zu erfahren, schauen Sie sich meinen Artikel an.

2 Komprimieren Sie das Hero-Image & verwenden Sie Next-Gen-Formate

Das Komprimieren von Bildern verkleinert deren Dateigröße. Kleinere Dateigrößen beanspruchen weniger Bandbreite und stehen dem Browser so schnell wie möglich zur Verfügung. Das Komprimieren von Bildern kann in Ihrem Fotoeditor, in Ihrem CMS (Tipp: Ihr Entwickler kann das WordPress-Kompressionslevel einstellen) oder mit einem Online-Bildkomprimierungstool erfolgen.

Die meisten langsamen Hero-Images sind langsamer als nötig, weil sie im 'falschen' Bildcontainer wie PNG oder JPEG bereitgestellt werden. Es gibt viel schnellere Alternativen zu JPEG und PNG wie WebP und AVIF. 

Für viele CMS-Systeme gibt es Konvertierungs-Plugins, die Ihre Bilder in das Next-Gen-Format konvertieren. Wenn die Bildkonvertierung schwer in Ihre Website zu integrieren ist, könnte ein CDN mit Bildkonvertierungsunterstützung die Lösung sein, nach der Sie suchen.

3. Verwenden Sie keine Hintergrundbilder, verwenden Sie normale responsive Bilder

Ihr Hero-Image sollte ein normales Bild und niemals ein Hintergrundbild sein. Der übliche Weg, Hero-Images zu erstellen, besteht darin, dem Hero-Container ein Hintergrundbild hinzuzufügen und die background-size dieses Containers auf cover zu setzen. Dies stellt sicher, dass das Hero-Image in allen Fällen auf den Bildschirm passt.

Hintergrundbilder sind schlecht für Core Web Vitals. Denken Sie daran! Es gibt keinen guten Grund, jemals Hintergrundbilder zu verwenden.

• Hintergrundbilder werden mit einer niedrigeren Priorität geladen
• Hintergrundbilder sind nicht responsive (außer Sie wollen die Dinge wirklich komplizieren)
• Hintergrundbilder können Core Web Vitals Probleme mit den meisten Lazy Loading Bibliotheken verursachen.
  

Ich mache es so, dass ich ein normales Bild in einer absoluten Position hinzufüge und die object-fit Eigenschaft dieses Bildes auf cover setze. Sobald ich das Hintergrundbild in ein normales Bild geändert habe, kann ich anfangen, responsive Bilder zu verwenden

Responsive Bilder bedeuten, dass für verschiedene Geräte (Mobil, Desktop, Tablet) eine andere Version desselben Hero-Image gesendet werden kann. Für ein Desktop-Gerät könnte ich ein riesiges 1920x1280 Hero-Image senden, während ich für ein mobiles Gerät nur ein kleineres 400*266 Pixel Hero-Image senden müsste. Das sind 25-mal weniger Daten!

• Die Hero-Images werden jetzt mit einer höheren Priorität geladen
• Ich kann jetzt responsive Bilder für das Hero-Image verwenden

style.css

<style>
#herocontainer{
    position:relative;
    padding:4rem 0
}
#heroimg{
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
</style>

index.html

<div id="herocontainer">
<h1>Willkommen auf meiner Seite</h1>
<picture>
    <source 
        type="image/webp" 
        media="(max-width:540px)" 
        srcset="herosm.webp">
    </source>
    <img loading="eager" decoding="async" src="hero.webp" id="heroimg">
</picture>
</div>

4. Servieren Sie Hero-Images von der Hauptdomain & ziehen Sie ein Content Delivery Network (CDN) in Betracht

Viel zu oft sehe ich, dass das largest contentful paint Bild von einer anderen Domain, zum Beispiel 'static.meinedomain.com', bereitgestellt wird. Diese Subdomains zeigen oft auf ein CDN. Während ich die Verwendung eines CDN empfehle (siehe unten), ist ein Setup wie dieses nicht ratsam. Das Bild auf der Subdomain erfordert eine neue Verbindung zu einem neuen Server. Neue Verbindungen sind kostspielig und kosten wertvolle Zeit. Wenn das Bild von der Hauptdomain (www.meinedomain.com zum Beispiel) bereitgestellt wird, können die Bilder viel schneller über die bereits bestehende Serververbindung abgerufen werden.

Wenn es auf der Hauptdomain eingerichtet ist, kann ein CDN einen enormen Geschwindigkeitszuwachs bieten. Besonders wenn Ihre Seiten aus der ganzen Welt besucht werden. Ein CDN hat Server strategisch auf der ganzen Welt platziert, wo Ihre statischen Ressourcen (wie Bilder gecacht werden) für schnelle lokale Antwortzeiten. Das bedeutet, dass Daten nicht um die ganze Welt reisen müssen, sondern von einem lokalen Edge-Server bereitgestellt werden können.

5. Vermeiden Sie Lazy Loading der largest contentful paint Bilder & laden Sie das Hero-Image explizit eager

Stellen Sie sicher, dass kein Lazy Loading auf Ihr Hero-Image angewendet wird. Hero-Images sollten immer eager laden.

Viele Seiten, insbesondere WordPress-Seiten, verwenden eine Art WordPress-Pagespeed-Plugin wie WP Rocket oder WP Core Web Vitals. Diese Plugins leisten normalerweise großartige Arbeit bei der Beschleunigung langsamer Seiten, aber sie können Dummheit nicht reparieren :-)

Diese Plugins werden Bilder lazy loaden, die wie ein guter Kandidat für Lazy Loading aussehen. Wenn die Hero-Images kein Eager-Bild sind, wird dieses Plugin wahrscheinlich auch das Hero-Image lazy loaden.

Dies verursacht bestenfalls eine kleine Verzögerung in den LCP-Metriken. Im schlimmsten Fall, insbesondere wenn JavaScript-basiertes Lazy Loading aktiviert ist, wird dies eine größere Verzögerung verursachen.

Bilder eager laden zu lassen ist ziemlich einfach. Fügen Sie einfach loading="eager" zum Bild hinzu und Sie sind fertig.

<img src="hero.webp"  width="800" height="400">

6. Vermeiden Sie Layout Shifts, die durch das Hero-Image verursacht werden

Ein weiteres häufiges Problem, das ich bei Hero-Bannern und Hero-Images sehe, ist, dass sie einen riesigen Layout Shift verursachen. Diese Layout Shifts können aus verschiedenen Gründen auftreten.

• Das Hero-Element wird mit JavaScript erstellt. Einige Hero-Plugins und Page Builder wie Elementor sind dafür bekannt, sich auf JavaScript zu verlassen, um den Hero-Inhalt zu rendern. Obwohl nichts gegen JavaScript spricht, stellen Sie sicher, dass das Hero-Element ohne JavaScript genauso rendert.
• Die Schriftarten im Hero-Element verursachen einen Layout Shift. Das Hero-Element enthält normalerweise großen Text mit einem Call-to-Action und einer Tagline. Stellen Sie sicher, dass diese großen Schriftarten keinen Layout Shift verursachen.
• Fehlende Bildabmessungen. Wenn das Hero-Image kein Cover-Bild ist (entweder als Hintergrundbild oder als absolut positioniertes Bild), verursachen fehlende Bildabmessungen (Breite und Höhe) sicherlich einen großen Layout Shift.

Während das Beheben des Layout Shifts den Largest Contentful Paint nicht verbessert, verbessert es die Core Web Vitals der Seite. Für weitere Informationen zur Behebung des Layout Shifts lesen Sie bitte diesen ausführlichen Leitfaden zur Behebung des Layout Shifts!

7. Verwenden Sie 2-Stage Loading, um die Hero Core Web Vitals zu verbessern

2-Stage Loading ist eine schnelle Technik, die wir auf alle unsere Bilder anwenden. Wir servieren zuerst ein Bild von extrem niedriger Qualität, von dem erwartet wird, dass es viel früher heruntergeladen wird als das größere Bild von hoher Qualität. Sobald das Bild von niedriger Qualität auf den Bildschirm gemalt wurde, wird der Browser ausgelöst, um das Bild von hoher Qualität im Hintergrund abzurufen. Sobald die Bilder von hoher Qualität heruntergeladen wurden, werden die Bilder von niedriger Qualität durch das Bild von hoher Qualität ersetzt.

Es gibt 3 Methoden des 2-Stage Loading. Die ersten beiden sind Methoden, die Sie in Betracht ziehen sollten. Die letzte ist eine, die Sie nicht tun sollten.

1. Vollständiges 2-Stage Loading

Bei vollständigem 2-Stage Loading hat das erste Bild von niedriger Qualität genau die gleichen Abmessungen (Breite und Höhe) wie das ursprüngliche Bild von hoher Qualität.

Das Ergebnis dieses 2-Stage Loading ist, dass das largest contentful paint Element das viel schnellere Bild von niedriger Qualität sein wird (das dann lazy ausgetauscht wird). Das Austauschen des Bildes wird alles so schnell geschehen, dass ein zufälliger Besucher es wahrscheinlich nie bemerken wird. Das Ergebnis dieser Technik ist, dass der LCP viel früher gemalt wird, die Seite viel früher 'bereit' erscheint, was zu einer weitaus besseren User Experience und verbesserten Core Web Vitals beiträgt.

2. Kleinere Inline-Platzhalter

Der kleinere Platzhalter ist eine ziemlich coole Technik, die einen Nachteil hat: Sie verbessert die Core Web Vitals nicht. Es ist immer noch eine großartige Technik, weil sie die User Experience verbessert.

Die grundlegende Idee ist die gleiche wie bei der 2-Stage Loading Technik, aber anstatt eines Bildes von niedriger Qualität mit den gleichen Abmessungen wird ein viel kleineres Bild mit kleineren Abmessungen inline über eine Data-URI platziert. Das endgültige Hero-Image, das das largest contentful paint Bild sein wird, wird immer noch im Hintergrund heruntergeladen. Dieser Trick wird den Largest Contentful Paint nicht verbessern, aber die Seite noch schneller bereit erscheinen lassen als die 2-Stage Loading Technik.

3. Transparente Platzhalter

Eine gängige 2-Stage Loading Technik und eine Methode, den Browser auszutricksen, um eine frühe Largest Contentful Paint Metrik zu senden, ist die Verwendung transparenter SVG-Elemente. Diese Elemente sind klein und können inline platziert werden, genau wie der kleinere Inline-Platzhalter.

Die Verwendung eines Inline-SVG-Elements und dessen Austausch ist eigentlich eine Lazy Loading Technik. Der Vorteil dieser Technik ist, dass sie browserübergreifend funktioniert. 

Lazy Loading sollte natürlich nur auf Elemente außerhalb des Viewports angewendet werden. In diesem Fall wird das transparente SVG-Element nur das echte Hero-Image verzögern und hat keinen Mehrwert für Ihren Besucher. Wo die Paint-Metriken vielleicht großartig sind, wird sich die UX der Seite tatsächlich verschlechtern.

Deshalb sollte das Hero-Image immer eager geladen werden, ohne Tricks, die eine schlechte UX verursachen.