Lernen
LCP-Optimierung: Largest Contentful Paint und Page Speed verbessern
Ein tiefer Leitfaden zu Largest Contentful Paint: die vier Phasen, aus denen es besteht, wie Sie Ihr LCP-Element identifizieren und welche Fixes es wirklich bewegen.
Starte ein frisches DomainLens-Audit und nutze den Report als Prioritätenliste.
Was LCP misst
Largest Contentful Paint (LCP) markiert den Moment, in dem das größte Inhaltselement im Viewport — meist ein Hero-Bild, ein Video-Poster oder ein großer Textblock — fertig gerendert ist. Es ist die Metrik, die am besten beantwortet „wann sah die Seite wirklich fertig aus?“ — daher der enge Bezug zum Geschwindigkeitsgefühl.
Ein guter LCP liegt bei 2,5 Sekunden oder weniger im 75. Perzentil echter Nutzer; über 4 Sekunden ist schlecht. Da er im Feld über Ihr langsamstes Viertel der Besuche gemessen wird, kann eine im Büro sofort wirkende Seite trotzdem durchfallen.
Die vier Phasen eines LCP
Das Nützlichste ist, LCP nicht als eine Zahl zu sehen, sondern in vier Teile zu zerlegen. Fast jeder Fix zielt auf einen davon, also zeigt die Aufschlüsselung, wohin die Zeit wirklich geht:
- Time to First Byte (TTFB): wie lange der Server bis zum ersten Byte braucht. Langsame Backends, fehlendes Caching und fernes Hosting leben hier.
- Resource Load Delay: die Lücke zwischen erstem Byte und Beginn des Ladens des LCP-Bildes — meist durch späte Entdeckung oder niedrige Priorität.
- Resource Load Time: wie lange das LCP-Bild selbst zum Download braucht. Übergroße, unkomprimierte Bilder im falschen Format.
- Element Render Delay: die Zeit vom Download des Bildes bis zum tatsächlichen Zeichnen — meist blockiert durch renderblockierendes CSS oder JavaScript.
So finden Sie Ihr LCP-Element
Man kann nicht beheben, was man nicht identifiziert hat — und das LCP-Element unterscheidet sich je nach Template und Viewport.
- Nehmen Sie im Performance-Panel einen Ladevorgang auf und sehen Sie den „LCP“-Marker in der Timings-Spur; er nennt das genaue Element.
- Führen Sie PageSpeed Insights aus und lesen Sie die Diagnose „Largest Contentful Paint element“, die den Knoten und die Phasenaufteilung zeigt.
- Prüfen Sie Mobile und Desktop — das LCP-Element ist oft ein anderes Bild auf jedem.
- Bestätigen Sie gegen Felddaten, um das Element zu optimieren, auf das echte Nutzer warten, nicht das, das Ihr schneller Labortest zufällig wählt.
So erscheint das LCP-Element früher
- Senken Sie TTFB: cachen Sie HTML am Edge/CDN, wärmen Sie langsame Datenbankabfragen und hosten Sie nah an Ihrem Publikum.
- Machen Sie das LCP-Bild sofort auffindbar: platzieren Sie es im initialen HTML mit fetchpriority="high" und preloaden Sie es, wenn es per CSS gesetzt oder per JavaScript injiziert wird.
- Lazy-loaden Sie das LCP-Bild nie — loading="lazy" am Hero ist eine der häufigsten selbstverschuldeten Regressionen.
- Verkleinern Sie die Datei: liefern Sie ein korrekt dimensioniertes Bild im modernen Format (AVIF/WebP) mit responsivem srcset, damit Mobile nicht das Desktop-Hero lädt.
- Entfernen Sie renderblockierende Arbeit: inlinen Sie kritisches CSS, verschieben Sie unkritisches CSS/JavaScript und injizieren Sie das Hero nicht per Client-Framework nach der Hydration.
Fehler, die LCP aufblähen
- Den Lighthouse-Laborwert optimieren und den Feld-TTFB ignorieren, den das Labor unterrepräsentiert.
- Alles preloaden, was das Netzwerk flutet und die eine wichtige Ressource verzögert.
- Das Hero von einer langsamen Drittanbieter-Origin ohne preconnect ausliefern.
- Den Hauptinhalt erst nach einem clientseitigen Daten-Fetch rendern, sodass LCP auf JavaScript und einen API-Roundtrip wartet.
So validieren Sie LCP
Führen Sie die Performance-Trace erneut aus und prüfen Sie, dass die anvisierte Phase wirklich kleiner wurde — niedrigerer TTFB, früherer Bild-Request, entferntes Render-Blocking. Verfolgen Sie dann den Feld-LCP in Search Console über die nächsten Wochen, da er 28 Tage echter Besuche aggregiert.
Lesen Sie LCP in DomainLens zusammen mit der Serverantwortzeit und den gemeldeten renderblockierenden Ressourcen: der schnellste Gewinn ist meist, das echte Hero-Bild früher anzufordern und kleiner zu laden — auf der Mobilverbindung Ihrer Besucher.