Von den drei Core Web Vitals reagieren zwei direkt auf Bilder: der Largest Contentful Paint, kurz LCP, und der Cumulative Layout Shift, kurz CLS. Beim LCP geht es darum, wann das größte Element im sichtbaren Bereich fertig dargestellt ist. Beim CLS geht es darum, ob Inhalte beim Laden springen. Beide Werte lassen sich bei Bildern mit gezielten Eingriffen verbessern, ohne die Seite neu zu bauen. Dieser Ratgeber zerlegt den LCP in seine Teilzeiten und zeigt für jede, was ein Bild damit zu tun hat.
Wann ein Bild das LCP-Element ist
Der LCP meldet die Darstellungszeit des größten Bildes, Textblocks oder Videos im sichtbaren Bereich [1]. Als gut gelten 2,5 Sekunden oder weniger, als schlecht mehr als 4 Sekunden; gemessen wird am 75. Perzentil der Seitenaufrufe, getrennt nach Mobilgeräten und Desktop [1]. Als Kandidaten zählen unter anderem img-Elemente, image-Elemente in einem SVG, das Vorschaubild eines Videos und Elemente mit einem Hintergrundbild aus CSS [1].
Ein Detail ist für Bilder wichtig: Chromium-basierte Browser schließen Platzhalterbilder und andere Bilder mit geringer Entropie aus, die wahrscheinlich nicht den eigentlichen Inhalt der Seite zeigen [1]. Ob ein unscharfes Vorschaubild vor dem echten Bild von der LCP-Messung ausgenommen wird, entscheidet der Browser nach Heuristiken, die sich laut web.dev ändern können [1]. Die Grundbegriffe erklärt das Glossar unter LCP, welcher Wert als gut gilt, die FAQ unter Was ist ein guter LCP-Wert?
Die vier Teilzeiten des LCP
web.dev teilt den LCP in vier Abschnitte [2]:
| Teilzeit | Was gemessen wird | Bezug zum Bild |
|---|---|---|
| Time to First Byte | vom Start des Ladens bis zum ersten Byte des HTML | keiner, hängt am Server |
| Ladeverzögerung der Ressource | von diesem ersten Byte bis zum Start des Bild-Downloads | Wie früh findet der Browser das Bild? |
| Ladedauer der Ressource | wie lange der Download des Bildes dauert | Wie groß ist die Datei? |
| Verzögerung beim Rendern | vom Ende des Downloads bis zur vollständigen Darstellung | Blockieren Skripte oder Stile die Anzeige? |
Die Tabelle zeigt, warum ein kleines Bild allein nicht reicht. Wird ein gut komprimiertes Bild erst spät entdeckt, verliert die Seite die Zeit an anderer Stelle.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Das Bild früh auffindbar machen
Die Ladeverzögerung entsteht, wenn der Browser das Bild nicht sofort im HTML sieht. web.dev schreibt, die LCP-Ressource solle aus dem HTML-Quelltext auffindbar sein, und nennt als Gegenbeispiel ein LCP-Element, das ein Hintergrundbild aus CSS braucht [2]. Dasselbe gilt für Bilder, die erst ein Skript in die Seite schreibt, etwa in einem Slider. Der Browser kann solche Bilder erst laden, wenn er die CSS-Datei oder das Skript verarbeitet hat.
Die Gegenmittel in der Reihenfolge ihrer Wirkung:
- Das Kopfbild als img-Element direkt ins HTML setzen statt als CSS-Hintergrund. Das hilft nebenbei der Bildersuche, denn Google indexiert keine CSS-Bilder [3].
- Am LCP-Bild das Attribut fetchpriority="high" setzen. web.dev nennt das eine gute Idee, wenn das img-Element wahrscheinlich das LCP-Element ist [2].
- Ist das Bild nur über CSS oder JavaScript erreichbar und lässt sich das nicht ändern, das Bild vorladen und dabei die hohe Priorität angeben [2].
Nie das LCP-Bild lazy laden
Ein häufiger Fehler bei Prüfungen ist Lazy Loading am falschen Bild. web.dev formuliert es unmissverständlich: Laden Sie Ihr LCP-Bild nie verzögert, weil das immer zu unnötiger Ladeverzögerung führt [2]. Der Artikel zu Lazy Loading ergänzt, Bilder, die beim Laden wahrscheinlich im sichtbaren Bereich liegen, sollten nicht lazy geladen werden, und loading="lazy" gehöre nur an Bilder außerhalb des ersten sichtbaren Bereichs [4].
Viele Redaktionssysteme setzen loading="lazy" automatisch an alle Bilder. Prüfen Sie deshalb gezielt das erste große Bild jeder Vorlage: Startseite, Kategorieseite, Produktseite, Artikel. Mehr zu den Feinheiten des verzögerten Ladens steht im Ratgeber Lazy Loading richtig einsetzen.
Die Ladedauer verkürzen
Für die Ladedauer verweist web.dev auf drei Maßnahmen: Bilder in optimaler Größe ausliefern, moderne Formate verwenden und komprimieren [2]. Bild-CDNs nennt web.dev als besonders hilfreich, weil sie den Weg zum Nutzer verkürzen und die Datei verkleinern können [2]. Wie Sie die passenden Abmessungen und Qualitätsstufen bestimmen, steht im Ratgeber Bildgrößen und Kompression, welches Format sich für welches Motiv eignet, unter Bildformate im Vergleich.
Mobil und Desktop getrennt betrachten
web.dev empfiehlt, das 75. Perzentil getrennt nach Mobilgeräten und Desktop auszuwerten [1]. Für Bilder ist diese Trennung wichtig, weil sich das LCP-Element je nach Bildschirm ändern kann. Auf dem breiten Bildschirm ist vielleicht das große Bild neben der Überschrift das größte Element, auf dem Smartphone rutscht es unter die Überschrift, und ein Textblock wird zum LCP-Element. Umgekehrt kann ein Bild, das auf dem Desktop in einer schmalen Seitenspalte steht, auf dem Smartphone die volle Breite einnehmen und plötzlich den LCP bestimmen. Prüfen Sie deshalb beide Ansichten getrennt, bevor Sie fetchpriority oder Vorladen festlegen. Mit dem picture-Element und unterschiedlichen Quellen je Bildschirmbreite können Sie dem Smartphone außerdem einen engeren Bildausschnitt liefern, der weniger Daten braucht.
Layoutverschiebungen durch Bilder
Der CLS misst, wie stark sich sichtbare Inhalte beim Laden verschieben. Als gut gilt ein Wert von 0,1 oder weniger, und zwar für mindestens 75 Prozent der Seitenaufrufe [5]. Bilder ohne Abmessungen sind eine der häufigen Ursachen: Ohne Größenangabe kann der Browser keinen Platz reservieren, bis er das Bild herunterlädt, und der Text darunter rutscht nach unten [5].
Die Abhilfe ist einfach. web.dev rät: "Always include width and height size attributes on your images and video elements." [5] Alternativ lässt sich der Platz mit der CSS-Eigenschaft aspect-ratio reservieren [5]. Bei responsiven Bildern sollten alle Fassungen dasselbe Seitenverhältnis haben, damit die Angaben für jede Fassung passen [5]. Fehlen width und height bei verzögert geladenen Bildern, behandelt der Browser sie zunächst als 0 mal 0 Pixel, was in Galerien dazu führen kann, dass alle Bilder auf einmal geladen werden [4].
Messen und prüfen
Ob ein Bild das LCP-Element ist, zeigt Lighthouse in der Diagnose "Largest Contentful Paint element" [7]. Felddaten stammen von echten Nutzern, Labordaten aus einem Test in kontrollierter Umgebung. PageSpeed Insights nennt Labordaten nützlich zur Fehlersuche und bewertet die Core Web Vitals anhand von Felddaten [6]. Einen Labortest mit Lighthouse bietet auch unser eigenes, kostenloses Werkzeug PageSpeed.de. Ändern Sie immer eine Sache auf einmal und messen Sie danach, sonst wissen Sie nicht, welcher Eingriff gewirkt hat. Die Felddaten brauchen nach einer Änderung einige Zeit, bis sie sich bewegen, weil PageSpeed Insights sie über die vorangegangenen 28 Tage sammelt [6].
Wenn mehrere Vorlagen betroffen sind oder das Problem tiefer im System liegt, übernehmen wir die Analyse und Umsetzung als Leistung: Core Web Vitals verbessern. Für eine erste Einschätzung reicht oft ein Gespräch: Bringen Sie die Adresse Ihrer langsamsten Seite in die gratis Sprechstunde, dort sehen wir gemeinsam nach, ob ein Bild den LCP bestimmt.
- Organisation Largest Contentful Paint (LCP). web.dev, Google. Stand 04.09.2025. abgerufen am 31.10.2026
- Organisation Optimize Largest Contentful Paint. web.dev, Google. Stand 31.03.2025. abgerufen am 31.10.2026
- Organisation Best Practices für Bilder in der Google Suche. Google Search Central. Stand 04.03.2026. abgerufen am 31.10.2026
- Organisation Browser-level image lazy loading for the web. web.dev, Google. Stand 13.08.2024. abgerufen am 31.10.2026
- Organisation Optimize Cumulative Layout Shift. web.dev, Google. Stand 07.02.2025. abgerufen am 31.10.2026
- Organisation About PageSpeed Insights. Google for Developers. Stand 21.10.2024. abgerufen am 31.10.2026
- Organisation Largest Contentful Paint element. Chrome for Developers. Stand 10.01.2020. abgerufen am 31.10.2026
Häufige Fragen
Wie finde ich heraus, ob ein Bild mein LCP-Element ist?
Lighthouse nennt in der Diagnose "Largest Contentful Paint element" das LCP-Element der geprüften Seite. Auf den meisten Seiten mit großem Kopfbild ist es dieses Bild, auf reinen Textseiten oft ein Absatz oder eine Überschrift.
Hilft fetchpriority="high" bei jedem Bild?
Nein, nur beim einen Bild, das wahrscheinlich das LCP-Element ist. Setzen Sie die hohe Priorität bei vielen Bildern, konkurrieren sie wieder untereinander.
Zählt ein unscharfes Vorschaubild als LCP?
Das entscheidet der Browser. Chromium-basierte Browser schließen Platzhalterbilder und Bilder mit geringer Entropie aus, die wahrscheinlich nicht den eigentlichen Inhalt zeigen; diese Heuristik kann sich ändern.
Reicht aspect-ratio statt width und height?
web.dev nennt aspect-ratio als Alternative, um den Platz zu reservieren. Am einfachsten ist es meist, width und height im HTML anzugeben und die Darstellung per CSS zu skalieren.
Verbessern bessere Core Web Vitals mein Ranking?
Gute Werte sind eine Voraussetzung für eine gute Nutzererfahrung. Eine bestimmte Rankingverbesserung lässt sich daraus nicht ableiten, deshalb sollten Inhalte und Technik zusammen betrachtet werden.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Haben Sie einen Fehler entdeckt? Schreiben Sie uns.
