Lighthouse führte Largest Contentful Paint als eine der zentralen Leistungskennzahlen im Jahr 2020 ein.
Später erklärte Google LCP als wichtigen Rankingfaktor und machte es zu einem Teil der Core Web Vitals. Als ein Core Web Vital LCP macht 25 % des Leistungsfaktors aus und ist damit eine der wichtigsten zu optimierenden Kennzahlen.
In diesem Leitfaden werfen wir einen detaillierten Blick auf Largest Contentful Paint und erfahren, wie wir die besten LCP-Werte optimieren können.
Was ist die größte Contentful Paint?
LCP misst, wie lange es dauert, bis eine Webseite das „größte Inhaltselement“ darstellt, das auf der Seite verfügbar ist. Hier könnte der „größte“ Inhalt alles sein, einschließlich:
Ein „Inhaltselement“ ist jedes HTML-Element, wie zum Beispiel:
- Ein Bildelement
- Ein Videoelement
- SVG-Elemente
- Ein Element mit dem über die URL-Funktion geladenen Hintergrundbild
- , , , , oder andere Elemente auf Blockebene
Laut Google,
„LCP ist eine wichtige benutzerzentrierte Metrik zur Messung der wahrgenommenen Ladegeschwindigkeit, da es den Punkt in der Seitenladezeitleiste markiert, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde – ein schnelles LCP hilft dem Benutzer, sich zu vergewissern, dass die Seite nützlich ist.“
Erste Contentful Paint vs. Größte Contentful Paint:
Wir haben kürzlich einen Beitrag veröffentlicht von „Erster zufriedener Anstrich,‘ und einige von Ihnen fragen sich vielleicht, wie sich das von dem unterscheidet‘Größte inhaltliche Farbe.' Hier ist eine einfache Erklärung dafür:
- First Contentful Paint: FCP misst, wie lange eine Seite vom ersten Laden bis zur Anzeige des ersten gerenderten Inhalts auf dem Bildschirm dauert.
- Größter Contentful Paint: LCP misst die Renderzeit des größten im Ansichtsfenster sichtbaren Bild- oder Textblocks im Vergleich zu dem Zeitpunkt, als die Seite zum ersten Mal geladen wurde.
Was ist ein guter LCP-Score?
Laut den Richtlinien von Google sollte ein guter LCP-Score weniger als 2.5 Sekunden betragen. Dies gewährleistet eine gute UX.
Die LCP-Schwellenwerte sind wie folgt:
- Gut: LCP von 1200 Millisekunden oder weniger (hier gibt es nichts zu tun)
- Verbesserungsbedarf: LCP zwischen 1200 und 2400 Millisekunden.
- Schlecht = LCP höher als 2400 Millisekunden.
Wie misst man den größten Contentful Paint Score?
Webmaster oder Publisher können mit den folgenden Tools einen Largest Contentful Paint-Test durchführen:
Da es sich bei LCP um eine von Google genehmigte Metrik handelt, können wir den LCP-Score in all diesen Tools leicht finden.
So verbessern Sie die First Contentful Paint (FCP)-Zeit:
Nachdem wir nun verstanden haben, was FCP ist und warum es wichtig ist, werfen wir einen Blick darauf, wie man das FCP-Timing verbessern kann:
Eliminieren Sie Render-blockierende Ressourcen:
Renderblockierende Ressourcen sind die Dateien, die auf einer Website gerendert werden müssen. Dazu können Schriftarten, CSS-Dateien usw. gehören. JavaScript und HTML. Diese Dateien werden als „Rendering-Blockierung“ bezeichnet, da sie Vorrang vor anderen Elementen der Seite haben (z. B. Bilder, Text oder andere für den Benutzer sichtbare Inhalte).
Diese Verzögerung führt zu einem plötzlichen Anstieg des LCP, da Renderblockierungsdateien normalerweise groß sind und nicht einmal Website-Inhalte enthalten.
Die LCP-Zeit kann reduziert werden, wenn Sie Renderressourcen aus dem kritischen Rendering-Pfad entfernen, nicht kritische Ressourcen zurückstellen oder unnötiges JS entfernen.
Entfernen Sie unnötiges CSS
Wenn Sie Dateien in Ihren Stylesheets haben, die nicht verwendet werden, aber viel Geschwindigkeit erfordern, macht es keinen Sinn, sie zu behalten. Daher sollte jeglicher ungenutzte oder alte Code entfernt werden, damit er sich nicht auf die Ladezeit Ihrer Website auswirkt.
Minimieren Sie HTML, JavaScript und CSS
Durch die Minimierung von HTML, JavaScript und CSS kann die LCP-Zeit Ihrer Website erheblich verkürzt werden. Bei der Minimierung werden alle zusätzlichen Zeichen wie Leerzeichen aus den CSS-, HTML- und JavaScript-Dateien Ihrer Website entfernt.
Während Abstände die Lesbarkeit verbessern, sind sie für Browser nicht erforderlich. Diese Leerzeichen beanspruchen tatsächlich Bytes, und ihre Minimierung würde die Seitengröße verringern und das Timing des First Contentful Paint verbessern.
Bildgröße optimieren
Verwenden Sie immer Bilder mit der richtigen Größe. Sie können ein Bildoptimierungs-Plugin wie SSmush oder Hummingbird verwenden, um die Bildgröße zu reduzieren. Durch die Reduzierung der Größe wird eine Überlastung vermieden, die zu einem hohen LCP führen kann. Sie können auch ein Image-CDN verwenden, um die LCP-Zeit zu verkürzen.
Wählen Sie einen guten Hosting-Service
Ihr Hosting-Service wirkt sich auch auf die Ladezeit der Seiten aus. Versuchen Sie es daher mit einem guten Hosting-Anbieter, der eine angemessene Infrastruktur für die Größe und das Zugriffsvolumen Ihrer Website bietet.
Abschließend:
Google berücksichtigt Größte inhaltliche Farbe ein relevanter Teil davon sein Kern-Web-Vitale. Daher ist es ein wichtiger Parameter, der bewertet werden muss und Websites müssen darin eine gute Punktzahl erreichen.
Da LCP mit der Seitenladezeit zusammenhängt, hat es direkten Einfluss darauf, wie Google eine Website auf der Ergebnisseite einordnet.
User Experience ist ein grundlegender Parameter dafür, dass Websites im Web gefunden werden. Deshalb reicht es nicht aus, attraktive Produkte, gute UX oder qualitativ hochwertige Inhalte zu haben.
Ein guter LCP-Score ist nicht nur positiv für den Nutzer, sondern stellt auch sicher, dass Google den Inhalt gut einordnet.
Shubham ist ein digitaler Vermarkter mit umfangreicher Erfahrung in der Werbetechnologiebranche. Er verfügt über umfassende Erfahrung in der Programmbranche und leitet Geschäftsstrategien und Skalierungsfunktionen, einschließlich, aber nicht beschränkt auf, Wachstum und Marketing, Betrieb, Prozessoptimierung und Vertrieb.
