Bilder für Core Web Vitals optimieren

Wie können Bilder die Core Web Vitals beeinflussen?

Bilder spielen eine wichtige Rolle bei der Verbesserung der visuellen Attraktivität einer Website, können aber auch einen erheblichen Einfluss auf deren Ladegeschwindigkeit haben. Core Web Vitals sind eine Reihe von Metriken, die Google verwendet, um die Benutzererfahrung einer Website zu messen, und Bildoptimierung ist ein entscheidender Faktor, um gute Ergebnisse zu erzielen. In diesem Artikel werden wir besprechen, wie Sie Bilder für Core Web Vitals optimieren und die Ladegeschwindigkeit Ihrer Website verbessern können.

Welche Core Web Vitals können Bilder beeinflussen?

Sie werden vielleicht überrascht sein zu erfahren, dass Bilder alle Core Web Vitals beeinflussen können. Bilder, wenn sie während des Renderings spät in die Warteschlange für den Download gestellt werden oder wenn sie einfach zu groß sind, führen normalerweise zu einem hohen LCP Score. Wenn Bildabmessungen nicht festgelegt sind oder sich während der Ladephase ändern, können Bilder auch den CLS-Score beeinflussen. Und schließlich, wenn die Bilddecodierung zu viel Arbeit im Main Thread beansprucht, können sie sogar den INP beeinflussen. Schauen wir uns das genauer an:

Largest Contentful Paint

Einer der Core Web Vitals ist Largest Contentful Paint (LCP), der misst, wie lange es dauert, bis das größte Element auf der Seite (wie ein Bild oder Video) für den Benutzer sichtbar wird. Wenn ein Bild zu spät eingereiht wird oder zu lange zum Laden benötigt, kann dies den LCP-Score der Seite erheblich verlangsamen.

Cumulative Layout Shift

Ein weiterer Core Web Vital ist Cumulative Layout Shift (CLS), der misst, wie stark sich der Inhalt auf einer Seite verschiebt, während sie lädt. Bilder können Layout-Verschiebungen verursachen, wenn sie nicht die richtige Größe haben oder wenn sie in die Seite eingefügt werden, nachdem diese bereits geladen wurde, was dazu führt, dass sich andere Elemente verschieben.

First Input Delay und INP

Schließlich können Bilder auch den dritten Core Web Vital beeinflussen, den INP, der die Zeit misst, die eine Seite benötigt, um visuell zu reagieren, nachdem ein Benutzer mit einer Seite interagiert hat. Wenn es zu viele große Bilder gibt, die decodiert werden müssen, kann es länger dauern, bis die Seite auf Benutzerinteraktionen reagiert, was zu einem schlechten INP-Score führt.

Schritt 1: Optimieren Sie das HTML-Bildelement für Geschwindigkeit

Src-Attribut

Gibt die URL des Bildes an. Diese Eigenschaft ist wichtig, da sie dem Browser mitteilt, wo das Bild zu finden ist.

Width- und Height-Attribut

Gibt die Breite und Höhe des Bildes in Pixeln an. Diese Eigenschaften sind wichtig, um das Bild korrekt auf der Seite zu rendern, da sie die Größe des Bildcontainers definieren und wie das Bild hineinpasst.

Alt-Attribut

Gibt alternativen Text für das Bild an, falls es nicht angezeigt werden kann. Dies ist wichtig für Zwecke der Barrierefreiheit, da es sehbehinderten Benutzern hilft zu verstehen, worum es im Bild geht. Es ist auch wichtig für die Suchmaschinenoptimierung (SEO), da Suchmaschinen den Alt-Text verwenden, um den Inhalt des Bildes zu verstehen.

Loading-Attribut (Lazy Loading)

Gibt an, wie der Browser das Bild laden soll (lazy, eager oder auto). Diese Eigenschaft ist wichtig für die Verbesserung der Seitenleistung, da sie es ermöglicht, dass Bilder asynchron geladen werden und nur dann, wenn sie benötigt werden.

Srcset-Attribut

Sizes-Attribut

Decoding-Attribut

Fetchpriority-Attribut

Das fetchpriority-Attribut gibt die Priorität des Abrufs einer Ressource relativ zu anderen Ressourcen auf der Seite an. Das priority-Attribut kann einen von drei Werten haben: "high", "medium" oder "low". Eine Ressource mit einer hohen Priorität wird vor Ressourcen mit mittlerer oder niedriger Priorität geladen. Eine Ressource mit einer mittleren Priorität wird vor Ressourcen mit einer niedrigen Priorität geladen. Ressourcen mit derselben Priorität werden in der Reihenfolge geladen, in der sie im HTML erscheinen.

Schritt 2: Stellen Sie sicher, dass das Bild so früh wie möglich für den Download in die Warteschlange gestellt wird

Das zweite, was zu tun ist, nachdem Sie das HTML optimiert haben, ist die Bildplanung. In vielen Fällen ist der größte Engpass, wenn es um Bilder geht, die die LCP-Metrik beeinflussen, späte Planung. Wenn ein Browser eine Chance hat, das LCP-Element früh während des Renderprozesses herunterzuladen, wird das Bild so früh wie möglich für den Browser verfügbar sein und der Browser kann beginnen, dieses Element früh im Renderprozess zu malen.

Klingt einfach, oder? Nun, wie stellen wir sicher, dass das Bild so früh wie möglich für den Download in die Warteschlange gestellt wird.

Preloaden Sie das LCP-Element

Der effektivste Weg, einen frühen Download zu gewährleisten, ist das Preloaden des Bildes. Das Preloaden des Bildes erfolgt mit einem einfachen Tag am Anfang des <head> Elements. Zum Beispiel:

<link rel="preload" as="image" href="image.jpg">

Dieser einfache Tag teilt dem Browser mit, dass wir "image.jpg" ziemlich bald benötigen, und der Browser wird sofort beginnen, diese Datei herunterzuladen.

Eager load das LCP-Element

Verwenden Sie hohe fetchpriority

Wenn Sie aus irgendeinem Grund das LCP-Element nicht preloaden können, stellen Sie zumindest sicher, dass das Element das fetchpriority Attribut auf high gesetzt hat. Dies gibt dem Browser einen Hinweis, dass das Bild wichtig für die Seite ist und der Browser wird es mit einer hohen Priorität herunterladen. Bitte beachten Sie, dass die Verwendung von fetchpriority="high" normalerweise nicht so effizient ist wie das Preloaden eines Bildes!

Vermeiden Sie JavaScript-basiertes Lazy Loading

Schritt 3: Stellen Sie sicher, dass das Bild so schnell wie möglich heruntergeladen wird

Das dritte, was zu tun ist, ist sicherzustellen, dass Sie keine kostbaren Netzwerkressourcen für Bilder verschwenden, die größer sind als sie sein sollten. Sie können dies tun, indem Sie responsive Image verwenden, Komprimierung verwenden und neue und schnellere Bildcontainer verwenden

Responsive Images

Bildkomprimierung

Neue und schnellere Bildcontainer

Bilder sind oft eine der größten Ressourcen auf einer Webseite, und sie können die Ladegeschwindigkeit einer Seite erheblich verlangsamen, wenn sie nicht optimiert sind. Neuere und schnellere Bildcontainer wie die WebP- und AVIF-Formate können helfen, die Dateigröße von Bildern zu verringern, ohne ihre Qualität zu opfern. Das bedeutet, dass sie schneller geladen werden können, was die Ladegeschwindigkeit der Seite verbessern kann.

Schritt 4: Eliminieren Sie Layout Shift!

Bilder, die ihre Größe ändern, während sie laden, verursachen einen Layout Shift. So einfach ist das. Es gibt 3 Hauptgründe, warum Bilder einen Layout Shift verursachen (es gibt eigentlich viel mehr, aber diese 3 sind die häufigsten)

1. Fehlende Bildabmessungen

2. Styling-Probleme

Normalerweise wird verhindert, dass Bilder größer als der Viewport werden, durch einen einfachen CSS-Trick

img{
   max-width:100%;
   height:auto;
}

Dies ist ein großartiger Trick und Sie sollten ihn verwenden. Leider sehe ich regelmäßig Varianten dieses Tricks, die einen Layout Shift verursachen. Zum Beispiel durch Hinzufügen von width:auto:

img{
   max-width:100%;
   height:auto;
   width:auto;
}

Dies führt dazu, dass jedes Bild mit einer automatischen Breite und Höhe rendert. Dies bedeutet normalerweise, dass der Browser das Bild mit 0x0px rendert, bevor das Bild heruntergeladen wurde

3. Platzhalter

Einige JavaScript-basierte Lazy Loading Skripte verwenden Platzhalter. Wenn Sie eine Art CSS-Trick wie den oben genannten max-width:100% und height:auto verwenden, dann stimmt die Autoheight des quadratischen Platzhalters nicht mit dem Height- Attribut des Bildes überein. Im Grunde wird das Bild zuerst mit dem quadratischen Platzhalter bei 720x720 rendern und wenn das endgültige Bild heruntergeladen wurde, wird es bei 720*180 rendern

<img 
  src="1x1placeholder.png" 
  data-src="hero.png" 
  width="720" 
  height="180"
  style="height:auto;max-width:100%"
>

Schritt 5: Schützen Sie den Main Thread

Das nächste, worauf Sie achten sollten, ist, dass nicht zu viele Bilder gleichzeitig im Main Thread decodiert werden. Normalerweise ist dies kein Problem, aber ich habe es oft auf Produktübersichtsseiten gesehen (wo manchmal bis zu 500 Bilder um Ressourcen konkurrieren!).

Der Trick besteht darin, decoding="async" zu allen Bildern hinzuzufügen, um sicherzustellen, dass diese Bilder auf einem separaten Thread decodiert werden können. Versuchen Sie auch zu vermeiden, dass so viele Bilder alle gleichzeitig decodiert werden, indem Sie loading="lazy" zu allen Below the Fold und versteckten Bildern hinzufügen.

Schritt 6: Wählen Sie die richtige Strategie für jedes Bild!

Bildstrategien für das LCP-Element

Das LCP-Element ist normalerweise das wichtigste visuelle Element. Dieses müssen wir also wirklich priorisieren."

1. Preloaden Sie das Bild früh im Head der Seite mit diesem Code: <link rel="preload" as="image" href="path-to-img.png">
2. Weisen Sie den Browser an, dass dieses Bild nicht lazy geladen werden soll, indem Sie loading="eager" setzen oder das Loading-Attribut weglassen
3. Geben Sie dem Browser einen Hinweis, dass dieses Bild mit hoher Priorität heruntergeladen werden soll, indem Sie fetchpriority="high" verwenden (wenn Sie das Bild preloaden, können Sie diesen Teil überspringen)
4. Setzen Sie decoding="sync", da dieses Element so wichtig ist, dass wir es im Main Thread decodieren wollen

Bildstrategie für Logos und andere sichtbare (Nicht-LCP) Bilder

Sichtbare Bilder sollten ziemlich bald während des Ladens der Seite geladen werden, aber vorzugsweise nach dem LCP-Element. Wir können dies erreichen, indem wir das LCP-Element preloaden. Das gibt diesen sichtbaren Bildern ihre natürliche, korrekte Download-Reihenfolge.

1. Weisen Sie den Browser an, dass dieses Bild nicht lazy geladen werden soll, indem Sie loading="eager" setzen oder das Loading-Attribut weglassen
   
2. Setzen Sie decoding="async", da dieses Element sicher außerhalb des Main Threads decodiert werden kann!

Bildstrategie für Below-the-fold Bilder

Alle Below-the-fold Bilder sollten lazy geladen werden. So einfach ist das! Es gibt keine Ausnahmen!

1. Weisen Sie den Browser an, dass dieses Bild lazy geladen werden soll, indem Sie loading="lazy" setzen
   
2. Setzen Sie decoding="async", da dieses Element sicher außerhalb des Main Threads decodiert werden kann!

Vermeiden Sie Hintergrundbilder

Wenn Sie Hintergrundbilder verwenden, müssen Sie dies überdenken. Hintergrundbilder können nicht lazy geladen werden und Sie können die Decoding-Eigenschaft nicht steuern und Sie können die Fetchpriority nicht setzen. Hintergrundbilder sind normalerweise nicht responsive, was Sie wahrscheinlich viel Bandbreite kostet. Aber am wichtigsten: Hintergrundbilder werden normalerweise entdeckt, nachdem der Browser die CSS-Dateien heruntergeladen hat. Dies ist fast nie der richtige Zeitpunkt, um einen Bilddownload auszulösen!

Sie können normale Image-Tags in Kombination mit CSS object-fit:cover verwenden, um normale Bilder sich als Hintergrundbilder verhalten zu lassen!