Größte Contentful Paint Beispiele & Best Practices

Größtes sichtbares Inhaltselement (Largest Contentful Paint, LCP)

Als Teil der Core Web Vitals misst der Largest Contentful Paint (LCP) Score die wahrgenommene Ladegeschwindigkeit einer Website. Diese nutzerzentrierte Kennzahl ist im Vergleich zu anderen Web-Performance-Kennzahlen mit bloßem Auge am deutlichsten zu erkennen und misst die Zeit, die vergeht, bis der größte Inhalt einer Webseite auf dem für den Betrachter sichtbaren Bildschirm angezeigt wird, bevor er scrollen muss.

Dieser Artikel erläutert die technischen Aspekte von LCP und hilft bei der Beantwortung der folgenden Fragen.

Was ist die größte inhaltsreiche Farbe?

Der Wert Largest Contentful Paint bezieht sich auf den größten visuellen Teil der Seite. Sie gibt die Renderzeit für das größte sichtbare Element (häufig Bilder) im Ansichtsfenster an, bevor ein Benutzer nach unten scrollt oder auf eine Schaltfläche tippt.

Das visuelle Konzept von The Largest Contentful Paint(Quelle)

LCP berücksichtigt in erster Linie nur die Objekte, die sich oberhalb des Seitenfalzes befinden, d. h. des Inhalts, der für den Nutzer ohne Scrollen sichtbar ist. Zu diesen Objekten gehören normalerweise Elemente wie Hero-Bilder, Texte auf Blockebene oder Videoposter-Bilder. LCP berücksichtigt keine Objekte, die sich außerhalb des Viewports befinden (der sichtbare Bereich einer Webseite, der sich je nach verwendetem Gerät ändern kann).

Größte inhaltsreiche Farbe vs. erste inhaltsreiche Farbe

Im Gegensatz zur Ladezeit für das größte Element bezieht sich First Contentful Paint (FCP) auf die Zeit, die das erste visuelle Element benötigt, um im Ansichtsfenster zu erscheinen.

Während traditionell die Gesamtladegeschwindigkeit der Website die Leistung bestimmt, haben sich LCP und FCP zu den anerkannten Messgrößen entwickelt, die in der Branche verwendet werden, um die wahrgenommene Ladegeschwindigkeit einer Website zu messen.

Das größte Element ändert sich, wenn die LinkedIn-Website das erste und größte inhaltsreiche Bild lädt(Quelle)

Hier sehen Sie, wie die LinkedIn-Website geladen wird, mit FCP und LCP, und wie sich das größte Element beim Laden des Inhalts ändert

Hier ist ein weiteres Beispiel für eine berühmte Social Media Examiner-Website , bei der das größte Element gleich bleibt, während der Inhalt geladen wird

Der FCP ist zwar eine wichtige Kennzahl, aber nicht so entscheidend wie der LCP, da er lediglich den Zeitpunkt misst, zu dem die Webseite das erste sichtbare Element anzeigt, das weit vor anderen größeren Elementen liegen kann. Andererseits steht LCP in engerem Zusammenhang mit dem Benutzererlebnis, und ein schneller LCP minimiert in der Regel die Irritation der Benutzer.

Warum ist Largest Contentful Paint für SEO wichtig?

Wenn Sie über die Beziehung zwischen Suchmaschinenoptimierung (SEO) und LCP nachdenken, sollten Sie daran denken, dass der Google-Suchmaschinenalgorithmus LCP als ein wichtiges Ranking-Signal für die Bewertung der Seitenerfahrung betrachtet. Wenn eine Website über ein ausgeklügeltes Design, attraktive Produkte und gute Inhalte verfügt, aber zu lange zum Laden braucht, ist das für den Nutzer ein schlechtes Erlebnis. Je schneller die Seite lädt, desto besser wird sie auf der Google-Suchergebnisseite platziert.

Fallstudie: Die größten Auswirkungen von Contentful Paint auf das Geschäft

Vodafone ist einer der weltweit größten Anbieter von Mobilfunkdiensten mit über 90.000 Mitarbeitern in 22 Ländern. In einer von Google dokumentierten Fallstudie wird behauptet, dass das Unternehmen seinen Umsatz um 5 % steigern konnte, weil es sein LCP um 31 % verbesserte, indem es mehr Website-Besucher in Käufe umwandelte. Angesichts der Größe von Vodafone entspricht diese Steigerung einem Betrag in zweistelliger Millionenhöhe.

Sie führten einen A/B-Test mit zwei Landing Pages durch (die beiden Screenshots unten), die jeweils 34.000 Besucher aus verschiedenen Kanälen erhielten, darunter Display-Anzeigen, soziale Medien und organische Suche.

Der Screenshot auf der linken Seite nutzt die bewährten Verfahren zur Verbesserung von LCP, die ebenfalls weiter unten in diesem Artikel erläutert werden. In diesem Fall beinhalteten die Verbesserungen die Verlagerung einiger Logik von der Client-Seite (dem Telefon) auf die Server-Seite und die Verbesserung der Formatierung und des Ladens der Bilder.

Auf der Grundlage dieser Verbesserungen erfolgte der größte inhaltliche Anstrich in 5,7 Sekunden statt in 8,3 Sekunden, was die Ergebnisse der Verkaufsumwandlung auf der linken Seite um 11 bis 15 % verbesserte.

Der linke und der rechte Bildschirm haben die gleiche Funktionalität, aber der linke hat ein besseres LCP.

Wie misst man die größte gehaltvolle Farbe?

Zu den Arten von Einzelelementen, die üblicherweise für LCP in Betracht gezogen werden, gehören;

Bilder im Vordergrund
- Image elements (<img>)
- Image elements inside of SVG code (<image>).
- Hintergrundbild
Hintergrundbilder mit CSS (Hintergrund: url('beispiel.png'))

Video-Elemente
- Nur Video-Miniaturansichten oder Videoelemente mit Posterbildern

Text-Elemente
- Block of text paragraph tags (<p>), lists (<ol>, <ul>), or headings (<h1>, <h2>).

Es ist erwähnenswert, dass zum Zeitpunkt der Abfassung dieses Artikels svg- und Video-Elemente nicht für die Berechnung der LCP-Bewertung verwendet werden, aber in Zukunft hinzugefügt werden können.

Wie wird die Elementgröße bestimmt?

In der Regel wird für LCP die mit bloßem Auge sichtbare Größe des Elements im Ansichtsfenster angegeben.

Größe = Breite x Höhe

Der Rand, die Auffüllung und die Umrandung sind nicht Teil der Größenberechnung.

Denken Sie daran, zwischen der eigentlichen Größe (Originalgröße des hochgeladenen Elements) und der sichtbaren Größe des Elements zu unterscheiden. Google berücksichtigt bei der Berechnung der Elementgröße, welche Pixelgröße zwischen der sichtbaren und der inneren Größe kleiner ist.

Die Werkzeuge zur Messung der größten inhaltsreichen Farbe

Sie können LCP entweder mit Labor-Tools (auf der Grundlage von emulierten Transaktionen) oder mit Feld-Tools (mit tatsächlichem Benutzerverkehr) messen.

Labortools (ein synthetisches Überwachungstool wie WebPageTest): Es handelt sich um algorithmusbasierte Leistungssimulationen.
Feldwerkzeuge (Überwachung der realen Nutzer): Sie wird direkt auf der Live-Site auf der Grundlage des realen Datenverkehrs durchgeführt. Zu den Tools, die für diese Messung verwendet werden, gehören die Google Search Console (der neue zentrale Webvitalbericht) und die JavaScript-Bibliothek Webvital.

Führen Sie die folgenden Schritte aus, um mit WebPageTest schnell das größte Element zu finden:

Weiter zu www.webpagetest.org/webvitals
Geben Sie die URL der Webseite ein, die Sie testen möchten (wir haben diese URL im folgenden Beispiel verwendet).
Klicken Sie auf Test starten und warten Sie ein paar Minuten, bis Sie die endgültigen Ergebnisse erhalten.
Wählen Sie View as Filmstrip, um den gesamten Test Bild für Bild zu sehen, oder View Video, um eine Aufzeichnung der Benutzererfahrung beim Laden der Seite anzusehen. Diese beiden Funktionen sind einzigartig für WebPageTest und ein zentrales Unterscheidungsmerkmal im Vergleich zu anderen Messmethoden.

Der archivierte Bericht, der von WebPageTest erstellt wurde, ist hier zugänglich.

In this example <H1> is the largest element causing LCP.

Zum besseren Verständnis können Sie die folgenden Optionen in der Filmstreifenansicht verwenden.

Highlight Größte gehaltvolle Farben
Größe der Vorschaubilder: Groß
Intervall für Vorschaubilder: 0,5 Sekunden

Advanced Largest Contentful Paint Measurement: Web Vitals Bibliothek

Entwickler können den Code einer Webseite so instrumentieren, dass LCP-Werte in der Konsole des Browsers protokolliert werden (dritte Zeile des Codes). Bei diesem Ansatz wird der tatsächliche Nutzerverkehr mithilfe der Largest Contentful Paint API gemessen.

neu PerformanceObserver((entryList) => {

für (const entry of entryList.getEntries()) {

console.log('LCP-Kandidat:', entry.startTime, Eintrag);

}

}).observe({type: 'largest-contentful-paint', buffered: true});

Der folgende Code hilft Entwicklern, die LCP-Messwerte aus dem Konsolenprotokoll zu sammeln, um Berichte zu erstellen oder sie in Tools von Drittanbietern oder eigene Tools zu integrieren.

import {getLCP} from ‘web-vitals’;

// Messung und Protokollierung von LCP, sobald es verfügbar ist. getLCP(console.log);

Interpretation der LCP-Punkte

Google stuft eine wahrgenommene Ladezeit einer Website von weniger als 2,5 Sekunden als "gut" ein. Die nachstehende Tabelle gibt einen Überblick über die Wertebereiche für die Ladezeit und die jeweilige Bewertung.

LCP	Ergebnis
0 - 2.5s	Gut
2.5 - 4s	Durchschnitt
Über 4s	Langsam

Beispiel für einen guten Largest Contentful Paint Score

Der Screenshot unten zeigt Socialmediaexaminer.com mit einer guten LCP-Bewertung, die durch ein rotes Rechteck hervorgehoben wird. Sehen Sie sich hier den vollständigen archivierten Web-Performance-Bericht an, der mit dem WebPageTest-Tool erstellt wurde.

Beispiel für einen Largest Contentful Paint Score, der verbessert werden kann

Der im Screenshot unten gezeigte LCP-Wert stammt aus einem veröffentlichten Artikel auf Forbes.com. Der Wert liegt bei 4,2 Sekunden und wird als ein Wert angesehen, der das SEO-Ranking benachteiligt und eine Verbesserung erfordert. Sehen Sie sich hier den vollständigen archivierten Web-Performance-Bericht an, der mit dem WebPageTest-Tool erstellt wurde.

‍

Was trägt zu einer schlechten Bewertung von Largest Contentful Paint bei und wie kann man das Problem beheben?

In diesem Abschnitt werden die verschiedenen Ursachen für ein schlechtes LCP-Ergebnis erläutert und Anleitungen zur Behebung dieser Probleme gegeben.

1. Langsame Server-Reaktion

Der Server, auf dem Ihre Website gehostet wird, kann zu lange brauchen, um auf Benutzeranfragen zu reagieren, was zu einer schlechten Benutzererfahrung führt. Sie können die Reaktionszeit Ihres Servers mit Hilfe einer Metrik messen, die als Time to First Byte (TTFB) bekannt ist. Im Glossar von WebPage Test heißt es: "TTFB wird gemessen als die Zeit vom Beginn der anfänglichen Navigation bis zum Empfang des ersten Bytes der Basisseite durch den Browser (nach folgenden Umleitungen)."

Ein hoher TTFB zeigt an, dass sich Ihr Server seiner maximalen Kapazität nähert. Google empfiehlt, dass der TTFB einer Webseite weniger als 200 ms beträgt.

Im folgenden Screenshot sehen Sie den rot umrandeten Bereich - First Byte Time - mit der Bewertung "Grade D" für einen auf bbc.com/news veröffentlichten Artikel, was darauf hindeutet, dass die Antwortzeit des Servers ein Leistungsproblem aufweist.

Wenn Sie auf die Note "Erstes Byte" klicken, sehen Sie die Details (siehe auch unten), einschließlich des gemessenen TTFB-Werts und eines empfohlenen Werts, den die Web-Publisher in diesem Fall anstreben sollten.

Wie kann man das beheben?

Verbesserung der Serverleistung

Die einfachste aller Lösungen zur Verbesserung der Serverleistung ist die Aufrüstung Ihres Hosting-Angebots. Wenn der Hosting-Server überlastet ist, müssen Sie ihn optimieren, indem Sie die Engpässe beheben (z. B. starker Datenverkehr, langsames Routing, Mangel an CPU-Ressourcen, langsame Datenbankanfragen, mangelnder Speicherplatz usw.), die Ihre Systeme verlangsamen.

Sie können Ihre Serverfunktionen optimieren, indem Sie:

Erhöhung der Anzahl der Server, wenn die aktuelle und erwartete CPU-Auslastung 80% übersteigt
Aktivierung der Komprimierung durch Aktualisierung der Serverkonfiguration zur Verringerung der Datenübertragungsgröße
Optimierung großer Dateien wie z. B. Hero-Bilder für eine schnelle und deutliche Verringerung der Größe Ihrer Website. ‍
Aktivieren Sie das Content Delivery Network

Eine weitere Möglichkeit, die Antwortzeit Ihres Servers (und damit den TTFB) zu verbessern, besteht darin, die größten Elemente Ihres Webseiteninhalts (z. B. Bilder) in einem Content Delivery Network (CDN) zu hosten, das sie auf Servern rund um den Globus repliziert. Bei diesem Ansatz werden die größten Elemente der Seite von einem CDN heruntergeladen, das an den Standort des Benutzers angepasst ist, wodurch die Ladezeit verkürzt wird. Die Hauptfunktion eines Content Delivery Network (CDN) ist die schnelle Bereitstellung von Inhalten für Ihre Zielnutzer über ein umfangreiches Netzwerk von Servern, die von einem CDN-Anbieter verwaltet werden. CDNs können auch beim Lastausgleich und bei der Bildkomprimierung helfen.

Aktivieren Sie das Caching Ihrer Website

Zwischenspeichern Sie Ihre Inhalte (Bilder, Texte usw.), um die Ladezeit der Seite und den TTFB der Website zu verringern, damit sie nicht jedes Mal neu geladen werden muss. Sie können dies auf Serverebene tun oder ein Caching-Plugin verwenden.

Bei statischem HTML, das nicht bei jeder Anfrage geändert werden muss, können Sie einen Service Worker verwenden, der im Hintergrund des Browsers läuft und zuerst den zwischengespeicherten Inhalt liefert. Das Browser-Caching liefert die größten Inhalte schneller als der reguläre Roundtrip zu einem lokalen CDN.

Frühzeitiger Aufbau von Verbindungen zu Drittparteien

Sie können dies tun, indem Sie die Funktion "Preconnecting" und "Prefetching" auf Ihrer Website verwenden, wenn diese Skripte von Drittanbietern wie Videos oder Google-Schriftarten enthält. Bei diesem Ansatz holt der Browser die Inhalte ab, während der Nutzer die bereits geladenen Inhalte durchsucht.

Die Ladesequenz mit und ohne Vorschaltung(Quelle)

Adding the attributes rel="dns-prefetch" or rel=“preconnect” tag to a <link> informs the browsers that your web page intends to be connected with another domain and that you would like to perform this process as soon as possible and before the user clicks.

Sie können Prefetch DNS auch für verschiedene andere externe Assets wie Google Analytics, Google-Schriftarten und sogar ein CDN verwenden, wie unten gezeigt.

Sie können die Latenzzeit für Roundtrips auf dem Anforderungspfad sogar um Tausende von Millisekunden verringern und so den Nutzern Rendering-Blockaden ersparen und die Ladegeschwindigkeit erhöhen.

Hier sind einige konkrete Beispiele.

Preconnect-Hinweis für dynamische URLS:

Preconnect-Hinweis mit JavaScript:

function preconnectTo(url) {

var hint = document.createElement("link");

hint.rel ="preconnect";

hint.href = url;

document.head.appendChild(hint);

}

2. Rendering-blockierende CSS und JavaScript

Ein Browser benötigt nur die wesentlichen Elemente, die für den Aufbau einer Seite erforderlich sind, bevor er sie für den Betrachter darstellen kann. Alle anderen Elemente oder Codes (z. B. JavaScript oder Stylesheets), die nach dem Rendern der Seite geladen werden können, werden als unkritisch für die Anzeige der Webseite betrachtet. Das Laden und Verarbeiten von nicht kritischen Elementen verlangsamt die Rendering-Zeit einer Seite unnötig. Dieses Konzept wird als Rendering-Blocking bezeichnet und ist eine häufige Ursache für Ladeverzögerungen bei Webseiten. Da der Browser das Element erst herunterladen und verarbeiten muss, bevor er weiß, ob es kritisch ist oder nicht, ist es die Aufgabe der Webentwickler, diesen Prozess zu verschlanken.

In der Wasserfallansicht desselben Beispiels von bbc.com/news, das weiter oben in diesem Artikel gezeigt wurde, können Sie die Rendering-blockierenden Ressourcen im folgenden Screenshot sehen.

WebPageTest analysiert den Rendering-Prozess des Browsers und identifiziert die blockierenden Dateien, so dass Sie diese beheben können, um die Ladezeit Ihrer Seite zu verbessern. Klicken Sie hier (navigieren Sie zur "Wasserfall-Ansicht"), um den detaillierten archivierten Bericht von WebPageTest zu sehen, der die CSS- und JS-Elemente zeigt, die die Verzögerung beim Laden der Seite verursachen.

Wie kann man das beheben?

Sie können Ihr LCP-Ergebnis verbessern, indem Sie das Laden der JS- und CSS-Dateien verzögern. Wenn Ihre Website beispielsweise viele große JS-Dateien enthält, Sie aber unkritische aufschieben und zunächst das Laden eines Schiebereglers mit minimalem Text fordern, können Sie die Rendering-blockierenden CSS- und JS-Dateien leicht reduzieren.

Bereinigen Sie Ihr Skript und entfernen Sie alle unnötigen Skripte von Drittanbietern. Die ikonischen Social-Media-Badges, die in Blogs präsentiert werden, um den Lesern das Teilen zu erleichtern, sind zum Beispiel geeignete Kandidaten für ein verzögertes Laden. Hier finden Sie eine Checkliste mit bewährten Verfahren zur Verbesserung des Rendering-Blockings:

Reduzieren Sie Ihr CSS
Verschieben Sie unkritische CSS
Inline kritisches CSS aufschieben
JS-Dateien verkleinern und komprimieren
Ungenutzte JS-Elemente zurückstellen
Ungenutzte Polyfills beseitigen

3. Langsam ladende Ressourcen

Manchmal ist das größte inhaltsreiche Bildelement zu schwer für das Gerät des Nutzers, den Browser und die Geschwindigkeit der Internetverbindung. Dieselbe Seite kann auf einem Desktop schnell geladen werden, aber auf einem älteren Telefon an einem entfernten Ort langsam. Bilder sind in der Regel für den größten Teil der Ladeverzögerungen verantwortlich und wirken sich auf die LCP-Bewertung aus.

Wenn wir zum Beispiel den WebPageTest für diesen Forbes-Artikel durchführen, können Sie sehen, dass unkomprimierte Bilder zu einem langsamen Laden führen. Der Screenshot unten zeigt die Registerkarte "Inhalt" der WebPageTest-Ergebnisseite, wobei die relevanten Informationen in einem roten Rechteck hervorgehoben werden.

Auf der Registerkarte Leistung des Testergebnisses im archivierten WebPageTest (unten verlinkt) finden Sie weitere Einzelheiten.

Sie können hier klicken, um die Details über diese unkomprimierten Elemente zu sehen, die eine wichtige Rolle bei der schlechten LCP des untersuchten Forbes-Artikels spielen.

Wie kann man das beheben?

Das einfachste Mittel in dieser Situation ist die Komprimierung und Optimierung großer hochauflösender Bilder. Im Folgenden finden Sie eine Liste bewährter Verfahren für die Bearbeitung großer Bilder:

Komprimieren Sie große Bilder, bevor Sie sie auf Ihre Website hochladen
Verwenden Sie ein Plugin, um die Bilder nach dem Hochladen auf Ihrer Website zu komprimieren.
Bereitstellung von Grafikinhalten im WebP-Format anstelle von PNG oder JPEG
Verwenden Sie vorzugsweise hochwertige und ansprechende Bilder in der richtigen Größe.

4. Probleme beim trägen Laden

Lazy Loading wird häufig eingesetzt, um die Benutzerfreundlichkeit zu verbessern; in einigen Fällen können diese Techniken jedoch LCP und damit die Benutzerfreundlichkeit verschlechtern, anstatt sie zu verbessern.

Natives träges Laden

Natives "Lazy Loading" ist seit 2019 zum Browserstandard geworden und wird einfach durch die Verwendung des Attributs loading="lazy" in einem Bildelement aktiviert. Ein gut recherchierter Artikel, der auf der Google-Website zu diesem Thema veröffentlicht wurde, besagt, dass 17 % der Websites, vor allem die in WordPress gehosteten, diese Funktion nutzen. Sie kann sich jedoch auch negativ auf die LCP-Bewertung auswirken. Die LCP-Bewertung einer Webseite verschlechtert sich, wenn alle Bilder auf einer Webseite, einschließlich des Heldenbildes (wenn es aufgrund seiner Größe als größtes inhaltsreiches Bild ausgewählt wird), dieses "Lazy Loading"-Verhalten übernehmen.

Wie kann man das beheben?

Die systemeigene Lazy-Loading-Funktionalität berechnet den Abstand eines Bildes vom sichtbaren Teil eines Viewports, so dass die Bilder oberhalb des Fold schneller geladen werden können. Diese native Browser-Funktion verfügt jedoch auch über einen Modus (bekannt als "eager"), der Bilder unabhängig von ihrem Abstand zum Viewport sofort lädt. Dieser Modus kann mit dem Attribut loading="eager" aufgerufen werden. Eine einfache Lösung für dieses Problem besteht darin, das Heldenbild mit eager statt mit lazy zu taggen oder es überhaupt nicht zu taggen und es wie ein normales Bild laden zu lassen.

Fließendes Laden mit JavaScript

Beim Lazy Loading mit benutzerdefiniertem JavaScript muss der Browser zuerst das JavaScript laden und ausführen und dann das Bild laden. Wenn das große, zusammenhängende Bild beim ersten Laden der Seite das Heldenbild innerhalb des Ansichtsfensters ist, wird sich das LCP natürlich verlängern.

Wie kann man das beheben?

Die Lösung besteht darin, die Bilder, die sich beim ersten Laden innerhalb des Ansichtsfensters befinden, einfach nicht zu laden (Lazy Load). Das Team von NE Digital war mit genau diesem Problem konfrontiert und hat einen informativen Artikel darüber geschrieben. Das Bild unten zeigt, wie sie WebPageTest verwendet haben, um die Ladezeit vor und nach der Änderung zu vergleichen. Sie sehen, dass die untere Reihe in 7 Sekunden geladen wurde, während die obere Reihe wartet und das Heldenbild (in diesem Fall das größte inhaltsreiche Bild) als letztes Element nachlädt.

5. Client-seitige Rendering-Probleme

Client-seitiges Rendering bedeutet, dass die Webseiten nicht auf dem Server, sondern vollständig im Browser des Benutzers verwaltet werden. Die Verwendung umfangreicher JavaScript-Bündel oder suboptimaler JavaScript-Logik kann zu einer schlechten LCP führen. Außerdem können Ressourcen wie SVG, Videos und Bilder das LCP stark beeinträchtigen, wenn sie oberhalb der ersten Faltung (vor dem Scrollen) dargestellt werden.

Wie kann man das beheben?

Komprimieren und minifizieren Sie kritische JS-Dateien, um die JS-Blockierzeit zu verringern.
Verwenden Sie nach Möglichkeit serverseitiges Rendering anstelle von clientseitigem Rendering.
Ziehen Sie die Verwendung von Accelerated Mobile Pages (AMP) in Betracht, um Animationen und schwere Elemente zu eliminieren und die Ladezeiten zu verbessern.
Laden Sie wichtige Ressourcen vor (siehe den vorherigen Abschnitt in diesem Artikel).
Priorisierung von Browser-Service-Workern für die Zwischenspeicherung von Assets (für die Zwischenspeicherung verantwortlicher Hintergrundprozess).

Resümee

Das Largest Contentful Paint (LCP) ist eines der grundlegenden Elemente von Core Web Vitals, das die Ladegeschwindigkeit einer Website misst. Genauer gesagt misst es, wie schnell das letzte Element der Seite im Viewport erscheint. Wenn eine Seite mehr als 2,5 Sekunden zum Laden braucht, sollten Sie sich überlegen, wie Sie Ihren LCP-Wert verbessern können. Sie können die in diesem Artikel genannten Optionen zur Verbesserung nutzen. Verwenden Sie jedoch zunächst WebPageTest, um die Ursache für den suboptimalen LCP-Wert zu ermitteln.

Weitere Fachbeiträge

Einführung

Erfahren Sie, wie die Core Web Vitals funktionieren, und folgen Sie Anleitungen mit Beispielen und Best Practices.

Größtes sichtbares Inhaltselement (Largest Contentful Paint, LCP)

Erfahren Sie, wie der Largest Contentful Paint (LCP)-Wert funktioniert, wie er gemessen wird, welche Hauptursachen es gibt und wie Sie diese beheben können.

Interaktion bis zur nächsten Darstellung (Interaction to Next Paint, INP)

Erfahren Sie mehr über die neu eingeführte Kennzahl INP (Interaction to Next Paint) zur Bewertung der Reaktionsfähigkeit von Nutzerinteraktionen, warum sie FID (First Input Delay) ersetzt hat, und entdecken Sie Strategien zu ihrer Optimierung für eine bessere SEO.

Kumulative Layout-Verschiebung (Cumulative Layout Shift, CLS)

Lernen Sie die Funktionsweise der kumulativen Layout-Verschiebung (CLS) kennen, wie man sie misst und die drei häufigsten Probleme sowie deren Lösungen.

Gesamtblockierungszeit (Total Blocking Time, TBT)

Verstehen Sie die Gesamtblockierungszeit (TBT) anhand von Beispielen und lernen Sie, wie Sie sie messen und verbessern können.

Zeit bis zur Interaktivität (Time to Interactive, TTI)

Verstehen Sie die Zeit bis zur Interaktivität (Time to Interactive, TTI) anhand von Beispielen und erfahren Sie, wie Sie diese messen und verbessern können.

Erstes sichtbares Inhaltselement (First Contentful Paint, FCP)

Verstehen Sie das erste sichtbare Inhaltselement (First Contentful Paint, FCP) anhand von Beispielen und erfahren Sie, wie Sie es messen und verbessern können.