Wie die Bildgröße die Core Web Vitals beeinflusst

Welche Core Web Vitals betreffen Bilder?

Largest Contentful Paint (LCP) misst, wann das größte sichtbare Bild oder der größte Textblock dargestellt wird. Ein auffälliges Foto kann dieses Element sein, aber nicht automatisch das Logo oder die größte Datei. Identifiziere es zuerst. Googles LCP-Ratgeber erklärt Erkennungs-, Lade- und Darstellungsverzögerungen.

Cumulative Layout Shift (CLS) misst unerwartete Verschiebungen. Ohne reservierten Platz können Bilder beim Laden Inhalte nach unten schieben. Der CLS-Ratgeber empfiehlt Bildabmessungen, damit der Browser das Seitenverhältnis vorab berücksichtigen kann.

Interaction to Next Paint (INP) betrifft die Reaktion auf Nutzereingaben. Ein komprimiertes Foto repariert nicht automatisch ein langsames Menü oder einen aufwendigen Klick-Handler. Untersuche diese getrennt mit der INP-Dokumentation.

Wann ist ein Core-Web-Vitals-Ergebnis gut?

Die Tabelle zeigt die guten Grenzwerte aus Googles Core-Web-Vitals-Leitfaden. Alle drei Messwerte müssen ihre Ziele beim 75. Perzentil echter Besuche erreichen; Mobilgeräte und Computer werden getrennt bewertet. Ein kleineres Bild oder ein einzelner guter Labortest belegt noch kein Bestehen. Ist INP das Problem, untersuche Verzögerungen bei Interaktionen, statt das Foto immer weiter zu komprimieren.

Beginne mit dem sichtbaren Hauptbild

Prüfe auf einer Produktseite das Hauptfoto, bei einem Artikel das vom Leistungsbericht genannte Titelbild oder die Überschrift. Notiere Dateigröße, Pixelmaße und Anzeigegröße vor dem Export für einen sinnvollen Vorher-nachher-Vergleich.

Ist das Foto deutlich größer als nötig, erstelle mit Bildgröße ändern eine kleinere Version. Vergleiche anschließend einen Export mit JPG zu WebP. Beurteile die benötigten Produktdetails oder Texte, nicht nur gesparte Kilobytes.

Lass den Browser das Hauptbild früh laden

Verwende kein Lazy Loading für das LCP-Bild. Auch eine kleine Datei erscheint spät, wenn Skripte ihre Erkennung verzögern. Bitte deinen Theme- oder Website-Entwickler, die tatsächliche Bildanfrage zu prüfen, falls Komprimierung wenig hilft.

Setze verzögertes Laden gezielt für weiter unten liegende Bilder ein. Die erste sichtbare Galerieaufnahme wird sofort benötigt; spätere Bilder können beim Annähern geladen werden.

Identifiziere das gemessene LCP-Bild auf der veröffentlichten Seite. Es muss früh auffindbar sein und darf nicht verzögert geladen werden. Ein Entwickler kann dafür fetchpriority="high" prüfen; alle Galeriebilder hoch zu priorisieren verfehlt den Zweck. Kontrolliere anschließend die Netzwerkanfragen.

Halte das Layout stabil

Gib Breite und Höhe im Markup an und erhalte das Seitenverhältnis durch responsive Gestaltung. Prüfe schmale Telefone und breite Desktopansichten. Reserviere bei absichtlich beschnittenen Bildern die Fläche des Ausschnitts konsistent.

Untersuche auch Banner, Einbettungen und Schriftarten, wenn Verschiebungen bleiben. Ein Bildaustausch behebt keinen Hinweis, der nachträglich oberhalb des Artikels eingefügt wird.

HTML-Maße wie width="1200" und height="800" geben das Seitenverhältnis an. CSS kann das Bild mit max-width: 100% und height: auto weiterhin schmaler darstellen. Prüfe widersprechende feste Höhen im Theme. Absichtlich beschnittene Karten brauchen eine passend reservierte Fläche.

Springt der Absatz trotz kleinerer Bilddatei weiterhin beim Erscheinen, fehlt möglicherweise reservierter Platz. Korrigiere Maße oder Bildcontainer und prüfe erneut. Umgekehrt kann ein stabiler Container ein langsam ladendes Bild enthalten: Platzreservierung verkleinert keine Datei.

Prüfe jeweils eine Änderung

1. Notiere URL, Testgerät und betroffenes Element.
2. Ändere ein Bild oder eine Ladeeinstellung.
3. Prüfe, ob die veröffentlichte Seite die neue Datei statt der alten Cache-Version anfordert.
4. Wiederhole denselben Test und kontrolliere die erste Ansicht.
5. Behalte die Änderung nur, wenn Bildqualität und Messung dafür sprechen.

Der Export ist nur ein Teil der Seitenleistung. Arbeite mit dem PageSpeed-Ablauf für Bilder weiter.