Leitfäden

LCP, kurz für Largest Contentful Paint, ist einer von Googles Core Web Vitals, den Metriken, mit denen Google die tatsächliche Nutzererfahrung einer Seite bewertet. Es misst die Ladeleistung: die Zeit vom Beginn des Seitenaufbaus bis zu dem Moment, in dem das größte im viewport sichtbare Inhaltselement gerendert wird. Einfach ausgedrückt ist es der Moment, in dem Ihr Hauptinhalt tatsächlich auf dem Bildschirm erscheint.

Das Element, das LCP betrachtet, ist immer das größte im anfänglichen viewport während des Seitenaufbaus. Meistens ist das ein Hero-Bild, ein großer Textblock, das Vorschaubild eines Videos oder ein großes Hintergrundbild. Google misst, wann genau dieses Element fertig gezeichnet ist, denn das ist der Punkt, an dem sich die Seite für eine echte Person geladen anfühlt und nicht mehr leer oder halb aufgebaut wirkt.

Googles Schwellenwerte sind eindeutig. Ein LCP von 2,5 Sekunden oder weniger ist gut, zwischen 2,5 und 4 Sekunden verbesserungswürdig und über 4 Sekunden schlecht. Wie die anderen Core Web Vitals wird LCP anhand von field data im 75. Perzentil echter Seitenaufrufe bewertet, sodass es widerspiegelt, was die meisten Ihrer Besucher tatsächlich erleben, und nicht einen einzelnen Labortest über eine schnelle Verbindung.

LCP ist wichtig, weil es eng damit zusammenhängt, wie schnell sich eine Seite nutzbar anfühlt. Ein langsamer LCP bedeutet, dass Besucher auf einen leeren oder unvollständigen Bildschirm starren, während der Hauptinhalt nur langsam erscheint, was die Leute vertreibt. Es ist außerdem Teil der Core Web Vitals, die in Googles Signale zur Seitenerfahrung einfließen, sodass ein schlechter LCP sowohl Nutzer als auch Rankings ausbremsen kann.

Es hilft, LCP als vier hintereinander gestapelte Teile zu betrachten: time to first byte (wie schnell der Server antwortet), Ressourcen-Ladeverzögerung (wie lange es dauert, bis der Browser überhaupt beginnt, das LCP-Element abzurufen), Ressourcen-Ladezeit (wie lange dieses Element zum Herunterladen braucht) und Element-Renderverzögerung (wie lange es dauert, bis es tatsächlich gezeichnet ist). Ein langsamer LCP ist fast immer auf einen oder zwei dominierende dieser Teile zurückzuführen, daher beginnt die Behebung damit, herauszufinden, welcher Teil das Problem ist.

Der erste Abschnitt, time to first byte, betrifft Ihren Server und die Auslieferung. Ein langsamer oder weit entfernter Host fügt Verzögerung hinzu, bevor überhaupt etwas laden kann, daher senken ein schneller, gut positionierter Host und ein CDN, das Inhalte aus der Nähe Ihrer Besucher ausliefert, diesen Teil direkt. Das ist die unscheinbarste Maßnahme, aber oft die wirkungsvollste, denn jede Millisekunde hier verzögert alles Nachfolgende.

Das LCP-Element selbst, meist ein Bild, ist der nächste große Hebel. Liefern Sie es in einem modernen Format wie WebP oder AVIF aus, dimensionieren Sie es passend zum Layout, statt ein riesiges Original zu verschicken, und teilen Sie dem Browser mit preload oder einer hohen fetch priority mit, dass es wichtig ist, damit es früh mit dem Herunterladen beginnt. Ein sehr häufiger Fehler ist das lazy-loading des Hero-Bilds: lazy-loading eignet sich hervorragend für Bilder unterhalb des sichtbaren Bereichs, aber es auf das LCP-Element anzuwenden verzögert genau das, woran Sie gemessen werden.

render-blocking Ressourcen sind der letzte häufige Übeltäter. Große blockierende CSS- und JavaScript-Dateien zwingen den Browser zu warten, bevor er überhaupt etwas zeichnen kann, einschließlich Ihres größten Elements. Ungenutztes CSS zu entfernen, unkritisches JavaScript aufzuschieben und nur die kritischen Stile inline einzubetten, lässt den Browser schneller zum Zeichnen kommen.

Um einen LCP-Wert in der Praxis zu verbessern: Messen Sie ihn mit einem field-data-Tool, um die echte Zahl im 75. Perzentil zu sehen, ermitteln Sie, welcher der vier Teile am größten ist, und gehen Sie dann diesen Teil an - ein schnellerer Host oder ein CDN bei einem langsamen Server, Bildoptimierung und preloading bei einer langsamen Ressource und weniger render-blocking Code bei einem langsamen Zeichnen. Messen Sie erneut mit echten Daten, denn ein Laborwert auf einer schnellen Maschine kann gut aussehen, während echte Nutzer mit langsameren Verbindungen zu kämpfen haben.

Fazit: Largest Contentful Paint misst, wann Ihr Hauptinhalt sichtbar wird, und Google will ihn bei 2,5 Sekunden oder weniger. Erreichen Sie das, indem Sie schnell von einem guten Host und CDN ausliefern, das größte Element optimieren und priorisieren, statt es per lazy-loading zu laden, und render-blocking Code aus dem Weg räumen. Tun Sie das, und die Seite schneidet nicht nur besser ab - sie fühlt sich für die Nutzer wirklich schneller an.