LCP optimieren: Bilder richtig ausliefern mit AVIF, WebP und next/image

LCP unter 2,5 Sekunden: Bildformate AVIF und WebP, passende Bildgrößen, Lazy Loading ohne Fehler, Hero-Bild priorisieren und next/image-Grundlagen – verständlich für Unternehmer und Entwickler.

Wenn eine Website langsam wirkt, liegt es in den meisten Fällen nicht an „zu wenig Technik“, sondern an einem einzigen Foto: dem großen Bild ganz oben. Es ist zu groß, im falschen Format oder wird zu spät geladen. Die gute Nachricht: Bilder sind der Performance-Hebel mit dem besten Verhältnis von Aufwand und Wirkung, und die wichtigsten Regeln lassen sich in einer Stunde umsetzen.

Du bekommst:

• eine Kurzantwort, wie du den LCP unter 2,5 Sekunden bringst
• eine Anleitung, wie du das Element findest, das wirklich bremst
• Bildformate im Vergleich mit klarer Empfehlung, wann AVIF, WebP, SVG oder JPEG
• Tabellen zu Bildgrößen und Lazy Loading, die du direkt anwenden kannst
• die Grundlagen von next/image für alle, die mit Next.js arbeiten
• einen Workflow für WordPress, Shopify und Next.js sowie eine Checkliste

Der Artikel richtet sich an Inhaber, die verstehen wollen, was ihre Agentur meint, und an alle, die Bilder selbst hochladen. Die technischen Abschnitte sind gekennzeichnet und lassen sich überspringen.

Kurzantwort: So bekommst du den LCP unter 2,5 Sekunden

Der LCP (Largest Contentful Paint) ist die Zeit, bis das größte sichtbare Element fertig gezeichnet ist, und Google stuft bis 2,5 Sekunden als gut ein. Auf den meisten Unternehmenswebsites ist dieses Element das Hero-Bild im Kopfbereich. Um den LCP zu senken, brauchst du vier Dinge: Das Bild wird in der Größe ausgeliefert, in der es angezeigt wird, nicht in Kamera-Auflösung. Es kommt als WebP oder AVIF, nicht als JPEG oder PNG. Es wird mit hoher Priorität und ohne Lazy Loading geladen, während alle Bilder weiter unten verzögert laden dürfen. Und es hat feste Breite und Höhe, damit die Seite nicht springt. Wer diese vier Punkte umsetzt und einen Server hat, der in unter 0,8 Sekunden antwortet, erreicht in vielen Projekten einen LCP im grünen Bereich, ohne die Website neu zu bauen.

Was ein langsames Hero-Bild dein Unternehmen kostet

Ein Besucher tippt auf dein Google-Ergebnis. Logo und Menü erscheinen, darunter bleibt eine graue Fläche. Eine Sekunde, zwei, drei. In dieser Zeit hat er dein Angebot nicht gesehen, keinen Text gelesen und keine Telefonnummer gefunden. Auf dem Handy, im Mobilfunknetz, unterwegs, ist der Rückweg zu Google ein einziger Wisch.

Genau diesen Moment misst der LCP. Er ist einer der drei Core Web Vitals, mit denen Google die Nutzererfahrung bewertet, und derjenige, den Besucher am direktesten spüren. Ein Überblick über alle drei Werte und ihre Schwellen steht im Artikel Core Web Vitals erklärt.

Für dein Unternehmen heißt das konkret:

• Anfragen: Wer die Seite nicht sieht, ruft nicht an. Das gilt für die Praxis in Stadtfeld genauso wie für den Onlineshop.
• Werbebudget: Jede Anzeige, die auf eine langsame Seite führt, bezahlt Klicks, die vor dem Laden abbrechen.
• Sichtbarkeit: Core Web Vitals sind ein Ranking-Signal, ein kleines, aber bei vergleichbaren Anbietern ein Unterschied.
• Kosten: Zu große Bilder verbrauchen Speicher, Bandbreite und bei manchen Hosting-Tarifen bares Geld.

Das LCP-Element finden: Welches Bild wirklich bremst

Bevor du irgendetwas optimierst, musst du wissen, welches Element den LCP bestimmt. Es ist nicht immer das, was du erwartest, und es unterscheidet sich oft zwischen Handy und Desktop.

1. Öffne PageSpeed Insights, gib die URL ein und wähle den Reiter „Mobil“.
2. Scrolle zur Diagnose und öffne „Largest Contentful Paint-Element“. Dort siehst du das Element mit Vorschau: ein Bild, ein Textblock oder ein Video-Vorschaubild.
3. Wiederhole das für „Desktop“. Häufig ist mobil ein Bild das größte Element, auf dem Desktop eine Überschrift.
4. Prüfe neben der Startseite auch die Seiten, die Anfragen bringen: Leistungsseiten, Kontaktseite, wichtige Produktseiten.

Für Entwickler ist das Performance-Panel der Chrome DevTools der genauere Weg: Aufzeichnung starten, Seite laden, in der Zeitleiste den Eintrag „LCP“ anklicken, das Element wird markiert. Dort siehst du auch, wann das Bild angefordert wurde, wann es ankam und ob es auf etwas gewartet hat.

Als LCP-Element kommen Bilder, Vorschaubilder von Videos, per CSS gesetzte Hintergrundbilder und Textblöcke in Frage. Wenn dein LCP-Element ein Bild ist, hast du Glück: Das ist der Fall, der sich am schnellsten lösen lässt.

Tipp: Wenn das LCP-Element ein Slider ist, ist die beste Optimierung, den Slider zu entfernen. Ein Slider lädt mehrere große Bilder plus ein Skript, und die meisten Besucher sehen ohnehin nur das erste Bild. Ein statisches Hero-Bild mit klarer Aussage bringt mehr Anfragen und einen besseren LCP.

Bildformate im Vergleich: AVIF, WebP, JPEG, PNG, SVG

Das Format entscheidet über die Dateigröße bei gleicher sichtbarer Qualität. Alle aktuellen Browser zeigen WebP und AVIF an, alte Ausreden gelten nicht mehr.

Zwei Regeln reichen für den Alltag: Fotos als WebP oder AVIF, Logos und Icons als SVG. Die Qualitätsstufe liegt bei Fotos sinnvoll zwischen 70 und 85 Prozent; darüber wächst die Datei, ohne dass man einen Unterschied sieht. Bei einer Praxis-Website mit Team-Fotos oder einem Shop mit Produktbildern macht allein der Formatwechsel oft den Unterschied zwischen mehreren Megabyte und wenigen hundert Kilobyte pro Seite.

Formate ersetzen aber nicht die richtige Größe. Ein AVIF in 5.000 Pixel Breite ist immer noch zu groß, wenn es in 400 Pixel angezeigt wird.

Bildgrößen: Wie groß ein Bild wirklich sein muss

Der häufigste Fehler ist ein Foto direkt aus der Kamera oder vom Fotografen: 6.000 Pixel breit, mehrere Megabyte, und der Browser verkleinert es auf Handybreite. Die Regel: Ein Bild ist so groß, wie es angezeigt wird, mal zwei für hochauflösende Bildschirme.

Die entscheidende Technik dahinter heißt responsive Bilder: Der Server hält mehrere Größen desselben Bildes bereit, und der Browser wählt die passende für den Bildschirm. Der Handy-Besucher bekommt die 800-Pixel-Version, der Desktop-Besucher die 1.920-Pixel-Version. Moderne Systeme erledigen das automatisch, wenn sie richtig eingestellt sind: WordPress erzeugt beim Upload mehrere Größen, Shopify skaliert auf dem CDN, Next.js über next/image.

Damit das funktioniert, muss das System wissen, wie breit das Bild im Layout tatsächlich ist. In HTML ist das das Attribut sizes. Fehlt es oder ist es falsch, lädt der Browser im Zweifel die größte Variante, und die ganze Optimierung verpufft.

Das Hero-Bild priorisieren

Der Browser lädt beim Öffnen einer Seite dutzende Dateien: Schriften, Stylesheets, Skripte, Bilder. Ohne Hinweis behandelt er das Hero-Bild wie jedes andere Bild und stellt es hinter Skripte an. Zwei Techniken ändern das:

• Hohe Ladepriorität: Das Attribut fetchpriority="high" sagt dem Browser, dass dieses Bild wichtiger ist als andere Ressourcen.
• Vorladen: Ein Preload-Hinweis im Kopf der Seite sorgt dafür, dass der Browser das Bild anfordert, bevor er das Layout überhaupt berechnet hat.

In Next.js erledigt das Attribut priority beides auf einmal. In WordPress setzen Performance-Plugins den Hinweis für das erste Bild, manche Themes bieten eine Option dafür. Wichtig ist die Beschränkung: Nur das eine Hero-Bild bekommt Priorität. Wer fünf Bildern hohe Priorität gibt, hat wieder keine Priorität, weil sie sich gegenseitig die Bandbreite streitig machen.

Ein Sonderfall sind Hintergrundbilder, die per CSS gesetzt werden. Sie entdeckt der Browser erst, nachdem er das Stylesheet verarbeitet hat, und sie lassen sich nicht responsiv ausliefern. Wenn das LCP-Element ein CSS-Hintergrund ist, ist der Umbau auf ein echtes Bild-Element fast immer die richtige Lösung.

Lazy Loading richtig einsetzen

Lazy Loading heißt: Ein Bild wird erst geladen, wenn der Besucher in seine Nähe scrollt. Das spart Datenvolumen und beschleunigt den Start, weil der Browser nicht dreißig Bilder gleichzeitig anfordert. Der Fehler passiert, wenn Lazy Loading auf das Hero-Bild angewendet wird: Der Browser wartet, prüft, ob das Bild sichtbar ist, und lädt dann erst, und der LCP steigt.

Die Faustregel lautet: Alles, was beim Öffnen der Seite ohne Scrollen sichtbar ist, lädt sofort. Alles darunter lädt verzögert. Browser unterstützen das nativ über das Attribut loading="lazy", WordPress setzt es seit Version 5.5 automatisch, Next.js macht es zum Standard und schaltet es nur bei priority ab.

Tipp: Manche Themes und Plugins setzen Lazy Loading pauschal auf alle Bilder, inklusive Hero. Das erkennst du in PageSpeed Insights an der Meldung „Das LCP-Bild wurde verzögert geladen“. Dann hilft eine Ausnahme für das erste Bild oder das Abschalten des Plugin-Lazy-Loadings zugunsten der Browser-Funktion.

next/image in Kürze

Dieser Abschnitt ist für alle, die mit Next.js arbeiten oder ein Angebot dafür bewerten. Die Komponente next/image übernimmt automatisch, was oben beschrieben ist: Sie erzeugt mehrere Größen, liefert standardmäßig WebP aus (AVIF nach Konfiguration), setzt Lazy Loading als Standard und reserviert den Platz für das Bild.

Ein Hero-Bild sieht damit so aus:

import Image from "next/image";

<Image
  src="/bilder/werkstatt-magdeburg.jpg"
  alt="Werkstatt von Elektro Müller in Magdeburg"
  width="1600"
  height="900"
  priority
  sizes="(max-width: 768px) 100vw, (max-width: 1280px) 90vw, 1200px"
/>

Die Attribute im Einzelnen:

• width und height geben das Seitenverhältnis an und reservieren Platz, damit nichts springt.
• priority schaltet Lazy Loading ab, setzt hohe Ladepriorität und erzeugt den Preload-Hinweis. Nur für das Hero-Bild.
• sizes beschreibt, wie breit das Bild in den verschiedenen Bildschirmgrößen tatsächlich angezeigt wird. Hier: auf dem Handy volle Breite, auf mittleren Bildschirmen 90 Prozent, darüber maximal 1.200 Pixel. Ohne sizes geht der Browser von voller Bildschirmbreite aus und lädt zu viel.
• alt beschreibt das Bild für Screenreader und Suchmaschinen, mit Bezug zu Unternehmen und Ort, wenn es passt.

Bilder unterhalb des sichtbaren Bereichs bekommen dieselbe Komponente ohne priority. Externe Bilder, etwa aus einem CMS, müssen in der Konfiguration unter remotePatterns freigegeben werden. Die Standardqualität liegt bei 75 und ist für Fotos ein guter Wert.

Wie next/image mit Server-Rendering und Metadaten zusammenspielt, steht im Artikel zu Next.js SEO im App Router.

Wenn das Bild nicht schuld ist: Server, Schriften, Skripte

Manchmal ist das Bild bereits klein und priorisiert, und der LCP bleibt trotzdem über 2,5 Sekunden. Dann liegt die Ursache davor oder daneben:

• Langsame Server-Antwort (TTFB): Der Browser kann das Bild erst anfordern, wenn das HTML da ist. Antwortet der Server nach 1,5 Sekunden, ist der LCP schon fast verloren, bevor das Bild überhaupt beginnt. Abhilfe schaffen Seiten-Caching, ein CDN oder ein besseres Hosting, mehr dazu im Artikel zu TTFB, CDN und Caching.
• Blockierende Skripte und Stylesheets: Wenn der Browser erst drei Skripte und fünf Stylesheets verarbeiten muss, bevor er zeichnet, verzögert sich alles. Skripte gehören ans Ende oder werden asynchron geladen.
• Webfonts: Ist das LCP-Element eine Überschrift und die Schrift kommt spät, zählt der Moment, in dem die Schrift gerendert ist. Hier hilft ein Ersatz-Font, der sofort sichtbar ist.
• Consent-Banner und Widgets: Manche Cookie-Banner blockieren das Rendern, bis ihr Skript geladen ist. Wie du das vermeidest, steht im Artikel zu Cookie-Banner und Tracking.

Der Netzwerk-Wasserfall in den DevTools zeigt die Reihenfolge: Wenn das Hero-Bild erst nach einem Dutzend anderer Dateien angefordert wird, ist die Reihenfolge das Problem, nicht das Bild.

CLS: Bilder ohne Layout-Sprünge

LCP und CLS hängen eng zusammen. Wenn das Hero-Bild ohne festgelegte Maße lädt, ist der Bereich zunächst null Pixel hoch. Kommt das Bild, drückt es den gesamten Inhalt nach unten. Das ist ein Layout-Sprung, den Google als CLS misst, und der Besucher, der gerade den Button antippen wollte, landet daneben.

Die Lösung ist simpel: Jedes Bild bekommt Breite und Höhe, entweder als Attribute oder über ein festes Seitenverhältnis im CSS. Der Browser reserviert dann den Platz, bevor das Bild da ist. Prüfen kannst du das in PageSpeed Insights unter „Bildelemente haben keine explizite Breite und Höhe“. Mit next/image ist das Pflicht, in WordPress setzt der Editor die Maße automatisch, sofern das Theme sie nicht überschreibt.

Workflow für WordPress, Shopify und Next.js

Das Prinzip ist bei allen Systemen gleich, die Handgriffe unterscheiden sich.

Bei WordPress lohnt sich zusätzlich ein Blick in die Mediathek: Viele Websites haben dort hunderte Fotos in Originalgröße aus fünf Jahren. Ein Optimierungs-Plugin räumt den Bestand auf, ohne dass jemand Bilder einzeln anfassen muss. Bei Shopify sind die Slideshow-Sektionen der üblichen Themes ein häufiger Grund für schlechten LCP, mehr zu typischen Shop-Fehlern steht im Shopify Shop erstellen Guide.

Häufige Fehler

1. Kamera-Originale hochladen. 6.000 Pixel, mehrere Megabyte, und der Browser verkleinert. Vor dem Upload verkleinern oder ein Plugin das erledigen lassen.
2. Hero-Bild lazy laden. Der Klassiker, der den LCP um Sekunden verschlechtert.
3. Alles priorisieren. Fünf Bilder mit hoher Priorität sind fünf Bilder ohne Priorität.
4. Kein oder falsches sizes-Attribut. Der Browser lädt die größte Variante, obwohl eine kleine reichen würde.
5. Hero als CSS-Hintergrund. Nicht responsiv, spät entdeckt, schwer zu priorisieren.
6. Bilder ohne Maße. Layout-Sprünge und schlechter CLS.
7. PNG für Fotos. Vier- bis zehnmal so groß wie nötig.
8. Slider im Kopfbereich. Mehrere große Bilder plus Skript für ein Element, das die meisten Besucher nicht anschauen.
9. Text im Bild. Nicht lesbar für Google und Screenreader, schlecht skalierbar, oft unnötig groß. Text gehört als Text auf die Seite.
10. Einmal optimiert, nie wieder geprüft. Jeder neue Upload kann die Regeln brechen. Einmal im Quartal nachmessen.

Checkliste: Bilder in 15 Minuten prüfen

• PageSpeed Insights mobil: Welches Element ist das LCP-Element?
• Ist das Hero-Bild kleiner als 200 KB und maximal 1.920 Pixel breit?
• Wird es als WebP oder AVIF ausgeliefert? Im Netzwerk-Tab der DevTools unter Typ nachsehen.
• Hat das Hero-Bild hohe Priorität und kein Lazy Loading?
• Haben alle Bilder Breite und Höhe?
• Laden Bilder unterhalb des sichtbaren Bereichs verzögert?
• Sind Logo und Icons SVG?
• Liegt die Server-Antwortzeit unter 0,8 Sekunden?
• Sind Karten und Videos als Vorschaubild mit Klick eingebunden?
• Werte notiert, um in vier Wochen die Felddaten zu vergleichen?

Nächster Schritt

Wenn du selbst umsetzen willst: Finde das LCP-Element, verkleinere und konvertiere das Hero-Bild, gib ihm Priorität, schalte Lazy Loading für alles darunter ein und setze überall Maße. Danach einmal in PageSpeed Insights nachmessen. Die meisten Websites kommen damit deutlich näher an die 2,5 Sekunden, viele darunter.

Wenn du lieber wissen willst, wo deine Website tatsächlich steht: Unser kostenloser Website-Check zeigt dir LCP, INP und CLS, das verantwortliche Element und die Maßnahmen mit Aufwand. Wir bauen Websites aus Magdeburg, bei denen Bildoptimierung, Priorisierung und Lazy Loading von Anfang an eingebaut sind, ob als Starter-Website ab 1.499 € netto oder als Hero-Website ab 3.900 € netto.

• Kostenloser Website-Check
• Webdesign aus Magdeburg
• Kostenloses Erstgespräch vereinbaren