[object Object]

Largest Contentful Paint (LCP) ist eine der drei Core Web Vitals-Metriken von Google, die zur Messung der wahrgenommenen Seitenladegeschwindigkeit entwickelt wurde.LCP verfolgt die Zeit, die vom Beginn des Ladens einer Webseite durch einen Benutzer bis zur vollständigen Anzeige des größten Bildes, Videoposterrahmens oder Textblocks im anfänglich sichtbaren Ansichtsfenster vergeht.

Da Benutzer die Geschwindigkeit einer Webseite danach beurteilen, wie schnell der Hauptinhalt sichtbar und lesbar wird, gilt LCP weithin als wichtigste Messgröße für die Ladeleistung.Daher integriert Google LCP in seine offiziellen Page-Experience-Ranking-Signale für die organische Suche.

Antwort-zuerst-Zusammenfassung

Largest Contentful Paint (LCP) ist eine Core Web Vital-Metrik, die die wahrgenommene Seitenladegeschwindigkeit anhand des Timings misst, wann der größte sichtbare Textblock oder das größte Bildelement im Ansichtsfenster mit dem Rendern fertig ist.Bei mindestens 75 % der Seitenaufrufe in Real-User-Field-Data (CrUX) beträgt der bestandene LCP-Score 2,5 Sekunden oder weniger.Die LCP-Latenz besteht aus vier verschiedenen Unterteilen: Zeit bis zum ersten Byte (TTFB), Ressourcenladeverzögerung, Ressourcenladedauer und Element-Rendering-Verzögerung.Die Optimierung von LCP erfordert das Vorladen von Hero-Assets, die Bereitstellung von Edge-Caching, die Komprimierung von Bildern in WebP/AVIF-Formate und die Eliminierung von renderblockierendem CSS und JavaScript.

LCP-Score-Bewertungsskala und Core Web Vitals-Schwellenwerte

Um den Nutzern ein schnelles und ansprechendes Erlebnis zu bieten, müssen Webseiten die von Google festgelegten Core Web Vitals-Grenzwerte für Largest Contentful Paint erfüllen:

Um eine bestandene Note für die Core Web Vitals-Bewertung zu erhalten, muss eine Website für mindestens 75 % der Seitenaufrufe einen LCP-Score in der Kategorie Gut ($\le 2,5\text{ Sekunden}$) erreichen, der in Kohorten von Desktop- und Mobilgeräten in realen Felddaten ausgewertet wird.

Welche DOM-Elemente sind für die LCP-Bewertung geeignet?

Gemäß der offiziellen W3C Largest Contentful Paint-Spezifikation überwacht der Browser bestimmte sichtbare DOM-Elemente, die sich im anfänglichen Ansichtsfenster befinden:

• Standardelemente <img> (einschließlich Bilder, die in responsiven <picture>-Tags gerendert werden).
• <image> Elemente, eingebettet in einen <svg> Vektorcontainer.
• Videoposterbilder (das Attribut poster für ein Element <video>).
• Elemente mit einem CSS-Hintergrundbild, das über die Funktion url() geladen wird.
• HTML-Container auf Blockebene, die Textknoten oder untergeordnete Inline-Textelemente enthalten (z. B. Überschriften <h1> bis <h6>, Absätze <p> oder Blöcke <div>).

LCP dekonstruieren: Die vier Unterteile

Um langsame Largest Contentful Paint-Scores effektiv zu diagnostizieren und zu optimieren, unterteilen Performance-Ingenieure die LCP-Latenz in vier verschiedene Unterteile:

1. Time to First Byte (TTFB): Die Zeit, die von der Anforderung der Seite durch den Benutzer bis zum Empfang des ersten Bytes der HTML-Dokumentantwort vom Server durch den Browser verstrichen ist.Ziel: $< 800\text {ms} $ ($40%$ des LCP-Budgets).
2. Ressourcenladeverzögerung: Die Verzögerung zwischen dem Empfang der Antwortbytes durch das HTML-Dokument und dem Zeitpunkt, an dem der Browser die LCP-Ressource (z. B. ein Hero-Bild) erkennt und mit dem Abruf beginnt.Ziel: $< 200\text {ms} $ ($10%$ des LCP-Budgets).
3. Ressourcenladedauer: Die Dauer, die der Browser benötigt, um das LCP-Bild oder Schriftart-Asset über das Netzwerk herunterzuladen.Ziel: $< 800\text {ms} $ ($40%$ des LCP-Budgets).
4. Element-Rendering-Verzögerung: Die Zeit zwischen dem Abschluss des Downloads der LCP-Ressource und dem Abschluss der Layoutberechnungen durch den Browser und dem Malen des Elements auf dem Bildschirm.Ziel: $< 200\text {ms} $ ($10%$ des LCP-Budgets).

Mathematisch gesehen ist die gesamte LCP-Latenz die Summe dieser vier Unterteile:

$$\text {LCP} = \text {TTFB} + \text{Ressourcenladeverzögerung} + \text{Ressourcenladedauer} + \text{Element-Rendering-Verzögerung}$$

Bewährte Techniken zur Optimierung von LCP

1. Beseitigen Sie Verzögerungen beim Laden von Ressourcen: Fügen Sie <link rel="preload" as="image" href="..."> oder fetchpriority="high" zu Ihrem Hero-Image-Tag hinzu, damit der Browser den Bilddownload sofort während der HTML-Analyse startet.
2. Optimieren Sie die Serverantwort (TTFB): Stellen Sie Edge-Caching über CDN bereit, optimieren Sie die Leistung von Datenbankabfragen und nutzen Sie HTTP/2- oder HTTP/3-Server-Push-Multiplexing.
3. Bilder komprimieren und modernisieren: Stellen Sie herausragende Bilder in modernen WebP- oder AVIF-Formaten mit reaktionsfähigen srcset-Größen bereit, die auf die Bildschirmdimensionen von Mobilgeräten und Desktops zugeschnitten sind.
4. Renderblockierende Ressourcen reduzieren: Integrieren Sie kritisches CSS in das Tag <head> und verschieben Sie nicht kritisches JavaScript mithilfe der Skriptattribute defer oder async.
5. Optimieren Sie das Laden von Web-Schriftarten: Verwenden Sie font-display: swap oder font-display: optional in CSS-@font-face-Regeln, um sicherzustellen, dass Textblöcke sofort sichtbar bleiben, während der Download von Web-Schriftarten über das Netzwerk abgeschlossen ist.

LCP vs. First Contentful Paint (FCP) vs. Speed ​​Index

Während LCP, FCP und Speed ​​Index alle die Ladeleistung messen, erfassen sie verschiedene Aspekte des Seitenladefortschritts:

• First Contentful Paint (FCP): Misst, wann das allererste DOM-Element (z. B. eine Hintergrundfarbe, ein Spinner oder ein Kopfzeilentext) mit dem Rendern auf dem Bildschirm fertig ist.
• Größter Contentful Paint (LCP): Misst, wann das primäre visuelle Inhaltselement (Hero-Banner oder Hauptabsatzblock) die Wiedergabe abgeschlossen hat.
• Geschwindigkeitsindex: Misst, wie schnell visuelle Inhalte das Ansichtsfenster im Laufe der Zeit während der visuellen Fortschrittsaufzeichnung füllen.

LCP erhält im Lighthouse-Bewertungsalgorithmus von Google die höchste Gewichtung unter den Lademetriken (derzeit 25 % der Gesamtleistungsbewertung), da es am ehesten mit der tatsächlichen Nutzerwahrnehmung über den Abschluss des Seitenladevorgangs übereinstimmt.

Kontinuierliche LCP-Überwachung mit SimpleOps

SimpleOps automatisiert die Nachverfolgung von Largest Contentful Paint durch die Erfassung synthetischer Lighthouse-Laboraudits und Felddatensatzmetriken von Chrome UX Report (CrUX) in einem einzigen einheitlichen Überwachungs-Dashboard.SimpleOps sendet sofortige proaktive Benachrichtigungen, wenn der 75. Perzentil-LCP Ihrer Website Ihr 2,5-Sekunden-Leistungsbudget überschreitet, und versetzt Ihr Team in die Lage, Conversions und Suchrankings zu schützen.