Core Web Vitals: Wie Bilder LCP und CLS beeinflussen (und wie Sie es beheben)
Wenn sich eine Seite langsam anfühlt, ist oft ein großes Bild weit oben der Übeltäter. Die Core Web Vitals liefern dafür Zahlen, und Korrekturen an Bildern bewegen sie meist stärker als fast alles andere. Dieser Ratgeber erklärt, was gemessen wird, was Bilder ausbremst und wie Sie das beheben.
Was LCP und CLS messen
Largest Contentful Paint (LCP) ist die Zeit, bis das größte sichtbare Element erscheint, sehr oft ein Titelbild. Google betrachtet einen LCP von 2,5 Sekunden oder weniger als gut und über 4 Sekunden als schlecht.
Cumulative Layout Shift (CLS) misst, wie stark die Seite beim Laden herumspringt. Ein Wert von 0,1 oder weniger gilt als gut. Bilder, die ohne reservierten Platz eintreffen, schieben Text nach unten und sind eine klassische Ursache für Layoutverschiebungen.
Beide werden bei echten Besuchern gemessen, und die Schwellenwerte gelten für die meisten Ihrer Besuche und nicht für einen einzelnen Test. Planen Sie also einen angenehmen Spielraum ein.
Warum Bilder meist die Ursache sind
Bilder sind groß, der Browser entdeckt sie erst, nachdem er das HTML gelesen hat, und sie können spät eintreffen. Die häufigsten Probleme sind:
- Überdimensionierte Dateien. Ein 3-MB-Titelbild braucht auf dem Handy lange zum Herunterladen.
- Alte Formate. JPG und PNG sind bei gleicher Qualität schwerer als WebP oder AVIF.
- Späte Entdeckung. Wird das Bild per JavaScript gesetzt oder in einem CSS-Hintergrund versteckt, findet der Browser es später.
- Verzögertes Laden an der falschen Stelle. Dem Browser zu sagen, er solle mit dem wichtigsten Bild warten, ist das Gegenteil dessen, was Sie wollen.
- Fehlende Abmessungen. Ohne
widthundheightkann die Seite keinen Platz reservieren, was Layoutverschiebungen verursacht.
Finden Sie zuerst Ihr LCP-Bild
Lassen Sie die Seite durch PageSpeed Insights oder Lighthouse laufen und öffnen Sie den LCP-Abschnitt, der das genaue Element nennt. Auch die Chrome DevTools markieren es im Performance-Panel. Beheben Sie dieses eine Bild, bevor Sie etwas anderes anfassen, denn die Verbesserung anderer Bilder ändert den Wert nicht.
Ist das LCP-Element Text und kein Bild, hilft Bildarbeit auf dieser Seite nicht, und Sie sollten stattdessen Schriften und Servergeschwindigkeit prüfen.
Maßnahmen im Vergleich: womit Sie beginnen sollten
| Maßnahme | Aufwand | Typische Wirkung |
|---|---|---|
| LCP-Bild skalieren und komprimieren | Gering | Hoch, oft der größte Einzelgewinn |
| Auf WebP oder AVIF umstellen | Gering bis mittel | Mittel bis hoch |
| Verzögertes Laden vom LCP-Bild entfernen | Gering | Mittel |
fetchpriority="high" hinzufügen | Gering | Mittel |
| Von einem CDN mit langem Caching ausliefern | Mittel | Mittel, besonders für weit entfernte Besucher |
Beginnen Sie oben in der Tabelle. Die ersten drei dauern meist nur Minuten und bringen den Großteil der Verbesserung.
Schritt für Schritt: das LCP-Bild beheben
- 1Identifizieren Sie das Element mit PageSpeed Insights oder Lighthouse.
- 2Skalieren Sie es auf die größte Größe, in der es tatsächlich angezeigt wird. Skalieren und komprimieren erledigt Skalierung und Komprimierung in einem Schritt, und der Ratgeber zu idealen Größen nennt sinnvolle Zielwerte.
- 3Komprimieren Sie es. Bild komprimieren kann eine Zielgröße anpeilen, zum Beispiel 200 KB für ein Titelbild. Ein auf 200 KB verkleinertes 3-MB-Bild kann den Wert deutlich verändern.
- 4Verwenden Sie ein modernes Format. Wandeln Sie mit PNG in WebP oder JPG in WebP um und behalten Sie einen Fallback. Der Ratgeber zur WebP-Umstellung zeigt, wie.
- 5Stellen Sie sicher, dass es im HTML steht, als
img-Element, damit der Browser es früh findet. - 6Entfernen Sie
loading="lazy"und fügen Siefetchpriority="high"hinzu. - 7Testen Sie erneut und bestätigen Sie, dass die LCP-Zeit gesunken ist.
Schritt für Schritt: Layoutverschiebungen verhindern
- 1Fügen Sie
width- undheight-Attribute zu jedem Bild hinzu oder setzen Sie ein CSS-aspect-ratio, damit der Browser den richtigen Platz reserviert, bevor die Datei eintrifft. - 2Reservieren Sie Platz für spät ladende Inhalte wie Banner, eingebettete Inhalte und Werbung, mit einer festen Mindesthöhe.
- 3Vermeiden Sie das Einfügen von Inhalten oberhalb dessen, was der Besucher gerade liest, es sei denn, es ist eine Reaktion auf seine Aktion.
- 4Prüfen Sie den CLS-Wert in PageSpeed Insights oder im Core-Web-Vitals-Bericht der Search Console.
Häufige Fehler
- Jedes Bild verzögert laden, auch das am Seitenanfang. Siehe den Ratgeber zum verzögerten Laden.
- Dekorative Bilder optimieren und das eigentliche LCP-Element ignorieren.
- Einmal mit einer schnellen Büroverbindung testen. Testen Sie auch auf einem Handy mit langsamerem Netz.
- Laborwerte als endgültig betrachten. Echtnutzerdaten in der Search Console brauchen oft Wochen, um Änderungen widerzuspiegeln.
Häufig gestellte Fragen
Was ist ein guter LCP-Wert?
Google betrachtet einen LCP von 2,5 Sekunden oder weniger als gut, zwischen 2,5 und 4 Sekunden als verbesserungswürdig und über 4 Sekunden als schlecht. Diese Schwellenwerte gelten für die meisten echten Besuche, planen Sie also einen angenehmen Spielraum ein.
Wie beeinflussen Bilder den CLS?
Wenn ein Bild ohne reservierten Platz lädt, springt der Inhalt darunter nach unten. Mit width- und height-Attributen oder einem CSS-Seitenverhältnis kann der Browser den richtigen Platz im Voraus reservieren, und die Verschiebung bleibt aus.
Sollte ich alle Bilder verzögert laden?
Nein. Laden Sie Bilder unterhalb des ersten Bildschirms verzögert, nicht aber das Hauptbild am Seitenanfang, denn es ist meist das LCP-Element und sollte so früh wie möglich laden.
Verbessern WebP oder AVIF den LCP?
Oft ja, denn kleinere Dateien laden schneller. Die größten Gewinne kommen aber weiterhin vom Skalieren und Komprimieren des LCP-Bildes, erledigen Sie das also zuerst und denken Sie dann über ein modernes Format nach.
Warum hat sich mein Wert nach der Bildoptimierung nicht geändert?
Möglicherweise haben Sie ein Bild optimiert, das nicht das LCP-Element ist, oder die Echtnutzerdaten sind noch nicht aktualisiert. Identifizieren Sie das genaue LCP-Element und bedenken Sie, dass Felddaten in der Search Console Wochen brauchen können, um Änderungen widerzuspiegeln.