Largest Contentful Paint (LCP)

Was ist der Largest Contentful Paint (LCP)?

Der Largest Contentful Paint ist eine Messung der Renderzeit des größten Inhaltselements (vom Typ Bild, Video oder Text), das auf dem sichtbaren Teil des Bildschirms gemalt (painted) wurde. Das LCP-Timing gibt die Zeit in Millisekunden zwischen der Anforderung der Seite und der Anzeige dieses größten Inhaltselements auf dem sichtbaren Teil der Webseite (above the fold) an.

Geschichte des Largest Contentful Paint

Wenn man darüber nachdenkt, mag der LCP eine triviale Metrik sein, um den Lade-Teil der Core Web Vitals darzustellen. Warum nicht die Ladegeschwindigkeit als 'die Zeit, die die Seite zum Laden benötigt' messen?

Das liegt daran, dass es auf den meisten modernen Websites schwer (oder sogar unmöglich) ist, zu definieren, wann die Seite geladen ist. Immer mehr Websites verwenden Techniken wie Lazy Loading oder Progressive Loading, bei denen die Seite im Grunde ewig weiterladen kann. Das bedeutet, dass die Seitengeschwindigkeit nicht durch einen einzigen Zeitpunkt gemessen werden kann.

Es gibt verschiedene Momente beim Laden der Seite, die dazu führen können, dass ein Benutzer die Seite als schnell oder langsam empfindet. Zum Beispiel die Serververzögerung (Time to First Byte), das erste Mal, dass Inhalt sichtbar ist (First Contentful Paint), die Zeit, zu der der sichtbare Viewport vollständig erscheinen mag (Largest Contentful Paint) und wann die Seite interaktiv wird (wenn das Klicken auf einen Link möglich wird), sind alles Punkte während des Ladeprozesses, an denen die Seite langsam oder schnell wirken kann!

Der Largest Contentful Paint (LCP) wurde gewählt, weil er sich auf die User Experience eines Besuchers konzentriert. Wenn der LCP auftritt, können Sie davon ausgehen, dass ein Besucher denkt, die Seite sei fertig geladen (auch wenn Hintergrundprozesse noch laufen). Der LCP wurde geschaffen, um die Frage zu beantworten: 'Wann ist der Inhalt einer Seite sichtbar?'. Deshalb wird LCP als Kernindikator für nutzerzentrierte Performance anerkannt.

Warum LCP für Ihr Unternehmen wichtig ist

Der Largest Contentful Paint ist einer der 3 Core Web Vitals. Als Core Web Vital ist der Largest Contentful Paint wichtig für SEO, aber noch wichtiger ist LCP für die UX. Besucher warten nicht gerne, und mit immer mehr mobilem Traffic (der tendenziell langsamer ist als Desktop-Traffic) ist die Optimierung des Largest Contentful Paint sehr sinnvoll.

• Für SEO. Ja, Google konzentriert sich darauf, die besten Seiten in seinen Suchergebnissen bereitzustellen. LCP ist Teil von Googles Core Web Vitals. Google gibt klar an, dass die Seitengeschwindigkeit ein Faktor in den Suchergebnissen ist.
• Für Besucher: Nach Untersuchungen von Google selbst verdoppelt sich die Wahrscheinlichkeit, dass ein Benutzer die Seite verlässt, bei einer Ladezeit von 3 Sekunden. Das werden Sie wahrscheinlich selbst erkennen. Beim Surfen im Internet scheint fast nichts so ärgerlich zu sein wie eine langsam ladende Website. Die Chancen stehen gut, dass Sie eine langsam ladende Seite schnell verlassen werden.
• Andere Gründe: Die Seitengeschwindigkeit ist ein Faktor in Ihrem Google Ad Score. Das bedeutet, dass Sie Ihre Anzeigen günstiger kaufen können und schließlich ist das Bestehen der Core Web Vitals eine der Voraussetzungen für Googles Top Stories Box.

Ein schneller LCP gibt dem Besucher die Vorstellung, dass die Seite schnell lädt. Infolgedessen ist es weniger wahrscheinlich, dass ein Besucher von der Seite wegnavigiert.

Welche Elemente gelten als LCP-Elemente?

Nicht alle Elemente gelten als LCP-Element. Das größte Contentful-Element muss auf dem sichtbaren Teil des Bildschirms (dem Viewport) gemalt (painted) werden, bevor der Benutzer mit der Seite interagiert hat.

Das Element muss sein:

• Ein <img> Element.
• Ein <image> Element, das in ein <svg> Element verschachtelt ist.
• Ein <video> Element (das Posterbild oder das erste Videobild, je nachdem, was früher eintritt, wird verwendet).
• Ein Element mit einem Hintergrundbild, das über die CSS url() Funktion geladen wird. (Hinweis: Dies ist ein Anti-Pattern für die LCP-Optimierung, da es das Bild für den Preload-Scanner des Browsers unauffindbar macht).

• Ein Element auf Blockebene, das Textknoten oder andere Inline-Textelemente enthält (im Fall von Inline-Textelementen wie <span> wird das nächstgelegene Element auf Blockebene <div> oder <p> berücksichtigt).

Derzeit sind bestimmte Elemente als LCP-Kandidaten ausgeschlossen, wie z. B. Elemente, die mit opacity: 0 ausgeblendet sind, Bilder, die 100% der Viewport-Größe entsprechen (Cover-Bilder), und Platzhalter (Bilder mit niedriger Entropie). Denken Sie daran, dass sich dies ändern kann, wenn sich die Spezifikation weiterentwickelt!

Technisch werden: Messung der LCP-Elementgröße

LCP identifiziert das größte sichtbare Inhaltselement im Viewport und berechnet seine Größe basierend auf einer Reihe von präzisen Regeln. Diese Regeln sorgen für Konsistenz und Genauigkeit, selbst in komplexen Layouts:.

• Nur ViewPort - Nur der sichtbare Teil der Seite wird berücksichtigt. Wenn ein Element nur teilweise im sichtbaren Viewport ist, wird die betrachtete Größe beschnitten.
• Kein Rand, Padding oder Margin. Für alle Elemente werden Text- und Bildränder, Padding und Margins komplett ignoriert.
• Textgröße - Die Größe von Textelementen wird als das kleinste Rechteck gemeldet, das um den/die Textknoten gemalt werden kann.
• Bildgröße - Für Bilder wird die kleinste der intrinsischen Abmessungen (die ursprüngliche Breite und Höhe) und der Anzeigegröße (die Größe auf dem Bildschirm) verwendet, um die LCP-Elementgröße zu berechnen
• Erste Größe zählt - Wenn sich das Layout ändert oder wenn sich die Größe eines Elements ändert, wird nur die erste Größe für den LCP berücksichtigt
• Entfernte Elemente sind enthalten - Wenn ein Element aus dem DOM entfernt wird, ist es immer noch ein LCP Kandidat

Dynamische Natur von LCP

Largest Contentful Paint (LCP) ist eine dynamische Metrik. Während das Rendern komplex sein kann und in Phasen erfolgen kann, ist es normal, dass sich das LCP-Element während des Seitenladens ändert. Vor der ersten Benutzerinteraktion identifiziert der Performance Observer des Browsers alle Elemente, die als LCP-Kandidaten gelten könnten. Wenn ein neues Element gerendert wird, das sowohl innerhalb des Viewports sichtbar als auch größer als das zuvor identifizierte LCP-Element ist, wird es zum neuen LCP..

Erkenntnisse aus LCP-Felddaten: Bei CoreDash verfolgen wir täglich Millionen von LCP-Einträgen. Wie sich herausstellt, ist das LCP-Element bei mobilen Seitenaufrufen oft ein textbasiertes Element, entweder ein Absatz oder eine Überschrift. Im Durchschnitt (oder genauer gesagt beim 75. Perzentil) bestehen die Core Web Vitals, wenn das LCP Element ein Textknoten oder sogar ein normales Bild ist. Wenn das LCP-Element ein Hintergrundbild, Video oder ein Lazy-Loaded Bild ist, neigen die Core Web Vitals dazu, zu scheitern.

Was ist ein guter LCP-Score?

Um die Core Web Vitals für den Largest Contentful Paint zu bestehen, müssen mindestens 75% Ihrer Besucher einen 'guten' LCP-Score haben. Ein LCP-Score zwischen 0 und 2,5 Sekunden gilt als guter LCP-Score, ein LCP-Score zwischen 2,5 und 4 Sekunden benötigt Verbesserung und ein LCP-Score über 4 Sekunden gilt als schlecht.

Wie LCP gemessen wird: Die vier Schlüsselphasen

Laut Google kann der Largest Contentful Paint in 4 Unterteile zerlegt werden.

Die endgültige LCP-Zeit einer Seite ist kein einzelner, monolithischer Wert. Es ist die Summe von vier verschiedenen Unterteilen. Das Verständnis dieser Aufschlüsselung ist der Schlüssel zur Diagnose und Behebung von LCP-Problemen effizient.

Hier ist eine Aufschlüsselung der vier Phasen:

• Time to first byte (TTFB) - Dies ist die reine Serverantwortzeit. Es ist die Zeit, die der Browser benötigt, um das erste Byte an Daten von Ihrem Server zu empfangen. Ein langsamer TTFB ist ein grundlegendes Problem, das immer Ihren LCP ruinieren wird.
• Resource Load Delay - Dies ist die "Entdeckungslücke". Es ist die Zeit zwischen TTFB und dem Beginn des Herunterladens der LCP-Ressource durch den Browser. Eine lange Verzögerung hier bedeutet, dass der Browser die LCP-Ressource spät gefunden hat, ein klassisches Symptom für die Verwendung von CSS-Hintergrundbildern oder Client-Side Rendering.
• Resource Load Time - Dies ist, wie lange es dauert, die LCP-Ressourcendatei tatsächlich herunterzuladen (z. B. das Bild oder die Schriftart). Hier dreht sich alles um Dateigröße und Netzwerkbedingungen.
• Element Render Delay - Dies ist die letzte Verzögerung. Es ist die Zeit zwischen dem Zeitpunkt, an dem die LCP-Ressource fertig heruntergeladen ist, und dem Zeitpunkt, an dem das Element vollständig gerendert ist. Diese Verzögerung wird fast immer dadurch verursacht, dass der Main Thread des Browsers durch andere Aufgaben blockiert wird, insbesondere durch JavaScript-Verarbeitung.

Jeder dieser Schwerpunkte kann optimiert werden, um den Largest Contentful Paint zu verbessern. Um die Schritte zu verstehen, die Sie unternehmen müssen, lesen Sie Identify & Fix Largest Contentful Paint (LCP) issues.

Wie misst man den Largest Contentful Paint?

Der Largest Contentful Paint (LCP) kann mit reinem JavaScript, Labordaten (Lab) und Feld-Tools (Field) gemessen werden. Beide haben ihre Vor- und Nachteile.

Messen Sie den Largest Contentful Paint mit JavaScript

Um den Largest Contentful Paint (LCP) mit JavaScript zu messen, bietet die Performance Observer API eine schnelle Lösung. Das folgende Code-Snippet zeigt, wie man das LCP-Timing und Elementinformationen erfasst:

new PerformanceObserver((list) => {
    const lcpEntry = list.getEntries().at(-1);
    console.log('LCP-Wert: ', lcpEntry.startTime);
    console.log('LCP-Element: ', lcpEntry.element, lcpEntry.url);
  }).observe({ type: 'largest-contentful-paint', buffered: true });

Dieses Snippet verfolgt den LCP-Eintrag, während er gemeldet wird, und zeigt dessen Zeitstempel und Elementdetails in der Konsole an. Für umfangreichere Einblicke sollten Sie die Verwendung der Web Vitals Library in Betracht ziehen.

Messen Sie den Largest Contentful Paint (LCP) in Chrome DevTools

1. Öffnen Sie Chrome DevTools, indem Sie Strg+Shift+I (oder Cmd+Option+I auf dem Mac) drücken.
2. Navigieren Sie zum Tab Performance.
3. Laden Sie die Seite neu, um die Core Web Vitals anzuzeigen.

Der DevTools-Performance-Tab zeigt nun Informationen über Core Web Vitals an, einschließlich des Timings und des Elements des Largest Contentful Paint.

Messen Sie den Largest Contentful Paint mit Lab- und Field-Tools

Lassen Sie es uns klarstellen: Lab- und Field-Daten dienen zwei verschiedenen Zwecken. Sie brauchen beide.

• Field-Daten (RUM und CrUX) sind die einzigen Daten, die wirklich zählen, um die Core Web Vitals zu bestehen. Es ist das, was Ihre echten Benutzer erleben. Google verwendet diese Daten aus seinem CrUX Datensatz. Sie beginnen hier, um herauszufinden, ob Sie ein Problem haben.
• Lab-Daten (Lighthouse usw.) sind ein kontrollierter Test. Es ist nicht das, was Google für das Ranking verwendet, aber es ist für das Debuggen unerlässlich. Sie verwenden dies, um herauszufinden, warum Sie ein Problem haben.

Hier ist eine Kurzanleitung zu den wichtigsten Tools:

Verbesserung des Largest Contentful Paint

Die Optimierung des LCP erfordert einen systematischen Ansatz, der die vier Phasen adressiert. Alles, was passiert, bevor das LCP-Element gemalt wird, ob netzwerkbezogen oder CPU-intensiv, kann den LCP-Score beeinflussen. Jagen Sie nicht nur einer Lösung hinterher; verstehen Sie die gesamte Kette. Hier ist die Strategie auf hoher Ebene:

• Optimieren Sie TTFB: Ihr Server muss schnell sein. Wenn Ihr TTFB langsam ist, spielt nichts anderes eine Rolle. Dies beinhaltet serverseitiges Caching, die Verwendung eines CDN und effizienten Backend-Code. Lesen Sie mehr in unserem Leitfaden zur Optimierung von TTFB.
• Eliminieren Sie Resource Load Delay: Stellen Sie sicher, dass das LCP-Element im anfänglichen HTML enthalten ist, damit der Preload-Scanner des Browsers es sofort finden kann. Vermeiden Sie CSS-Hintergrundbilder für LCP. Laden Sie kritische Bilder vor, die spät entdeckt werden. Erfahren Sie, wie das geht, in unserem Leitfaden zur Behebung von Resource Load Delay.
• Reduzieren Sie Resource Load Time: Machen Sie die LCP-Datei kleiner. Das bedeutet die Verwendung moderner Bildformate wie AVIF, responsive Bilder und ordnungsgemäße Komprimierung. Sehen Sie sich unseren vollständigen Leitfaden zur Optimierung des LCP-Bildes an.
• Verkürzen Sie Element Render Delay: Hören Sie auf, den Main Thread zu blockieren. Verzögern (defer) Sie nicht kritisches JavaScript, teilen Sie lange Aufgaben auf und minimieren Sie Render-Blocking-CSS. Dies wird in unserem Leitfaden zur Behebung von LCP-Problemen behandelt.