So optimieren Sie den größten Contentful Paint & ranken Sie höher in Google

So messen Sie den größten Inhalt Ihrer Website

Führen Sie einen kostenlosen Website-Geschwindigkeitstest durch, um dies herauszufinden. Ihre LCP-Geschwindigkeit wird sofort angezeigt.

Die Ergebnisse Ihres Geschwindigkeitstests zeigen Ihnen, ob:

• Der LCP-Schwellenwert ist erreicht.
• Sie müssen jedes andere Core Web Vital optimieren.

Wie wird die größte zufriedene Farbe berechnet?

Google betrachtet das 75. Perzentil der Erfahrungen – das bedeutet, dass 25 % der echten Website-Besucher LCP-Ladezeiten von 3,09 Sekunden oder mehr erleben, während für 75 % der Nutzer das LCP unter 3,09 Sekunden liegt.

In diesem Beispiel wird das Echtbenutzer-LCP mit 3,09 Sekunden angezeigt.

Was sind die Labortestergebnisse zu meinen Web Vitals-Kerndaten?

Bei diesem speziellen Web-Geschwindigkeitstest sehen Sie auch Labormetriken, die in einer kontrollierten Testumgebung erfasst wurden. Obwohl sich diese Metriken nicht direkt auf die Google-Rankings auswirken, haben diese Daten zwei Vorteile:

1. Die Metriken werden aktualisiert, sobald Sie Ihre Website verbessern, während die Echtzeitdaten von Google 28 Tage benötigen, um vollständig aktualisiert zu werden.
2. Zusätzlich zu den Metriken erhalten Sie detaillierte Berichte, die Ihnen bei der Optimierung Ihrer Website helfen können.

Darüber hinaus stellt PageSpeed ​​Insights auch Labordaten bereit, aber denken Sie daran, dass die gemeldeten Daten aufgrund der simulierten Drosselung, mit der eine langsamere Netzwerkverbindung emuliert wird, manchmal irreführend sein können.

Wie finden Sie Ihr größtes inhaltsreiches Farbelement?

Wenn Sie einen Seitengeschwindigkeitstest mit DebugBear ausführen, wird das LCP-Element im Testergebnis hervorgehoben.

Manchmal kann das LCP-Element ein großes Bild sein, und manchmal könnte es ein großer Textabschnitt sein.

Unabhängig davon, ob es sich bei Ihrem LCP-Element um ein Bild oder einen Text handelt, wird der LCP-Inhalt erst angezeigt, wenn Ihre Seite mit dem Rendern beginnt.

Auf der folgenden Seite ist beispielsweise ein Hintergrundbild für die größte Farbe verantwortlich.

Im Gegensatz dazu ist das LCP dieser Seite ein Textabschnitt.

Um den Largest Contentful Paint (LCP) Ihrer Website zu verbessern, müssen Sie sicherstellen, dass das für den LCP verantwortliche HTML-Element schnell erscheint.

So verbessern Sie die größte zufriedene Farbe

Um das LCP zu verbessern, müssen Sie:

1. Finden Sie heraus, welche Ressourcen erforderlich sind, damit das LCP-Element erscheint.
2. Sehen Sie, wie Sie diese Ressourcen schneller (oder gar nicht) laden können.

Wenn das LCP-Element beispielsweise ein Foto ist, können Sie die Dateigröße des Bildes verringern.

Nachdem Sie einen DebugBear-Geschwindigkeitstest ausgeführt haben, können Sie auf jede Leistungsmetrik klicken, um weitere Informationen darüber anzuzeigen, wie sie optimiert werden könnte.

Gemeinsame Ressourcen, die sich auf das LCP auswirken, sind:

• Renderblockierende Ressourcen.
• Bilder, die nicht optimiert sind.
• Veraltete Bildformate.
• Schriftarten, die nicht optimiert sind.

So reduzieren Sie Render-Blocking-Ressourcen

Render-Blocking-Ressourcen sind Dateien, die heruntergeladen werden müssen, bevor der Browser mit dem Zeichnen von Seiteninhalten auf dem Bildschirm beginnen kann. CSS-Stylesheets blockieren normalerweise das Rendering, ebenso wie viele Skript-Tags.

Um die Leistungsauswirkungen von Render-Blocking-Ressourcen zu reduzieren, haben Sie folgende Möglichkeiten:

1. Identifizieren Sie, welche Ressourcen renderblockierend sind.
2. Überprüfen Sie, ob die Ressource erforderlich ist.
3. Überprüfen Sie, ob die Ressource das Rendern blockieren muss.
4. Prüfen Sie, ob die Ressource schneller geladen werden kann, z. B. durch Komprimierung.

Der einfache Weg: Im DebugBear-Request-Wasserfall werden Anfragen nach Render-Blocking-Ressourcen mit einem „Blocking“-Tag gekennzeichnet.

So priorisieren und beschleunigen Sie LCP-Bildanfragen

In diesem Abschnitt werden wir das neue Attribut „fetchpriority“ für Bilder nutzen, um den Browsern Ihrer Besucher dabei zu helfen, schnell zu erkennen, welches Bild zuerst geladen werden soll.

Verwenden Sie dieses Attribut für Ihr LCP-Element.

Wieso den?

Beim bloßen Betrachten des HTML-Codes können Browser oft nicht sofort erkennen, welche Bilder wichtig sind. Ein Bild könnte am Ende ein großes Hintergrundbild sein, während ein anderes ein kleiner Teil der Fußzeile der Website sein könnte.

Dementsprechend werden zunächst alle Bilder mit niedriger Priorität betrachtet, bis die Seite gerendert wurde und der Browser weiß, wo das Bild erscheint.

Das kann allerdings dazu führen, dass der Browser erst relativ spät mit dem Download des LCP-Images beginnt.

Der neue Webstandard Priority Hints ermöglicht es Websitebesitzern, mehr Informationen bereitzustellen, um Browsern bei der Priorisierung von Bildern und anderen Ressourcen zu helfen.

Im Beispiel unten können wir sehen, dass der Browser viel Zeit mit Warten verbringt, wie durch den grauen Balken angezeigt.

Wir würden dieses LCP-Bild auswählen, um das Attribut „fetchpriority“ hinzuzufügen.

So fügen Sie Bildern das Attribut „FetchPriority“ hinzu

Durch einfaches Hinzufügen des Attributs fetchpriority="high" zu einem HTML-img-Tag priorisiert der Browser das Herunterladen dieses Bildes so schnell wie möglich.

<img src="photo.jpg" fetchpriority="high" />

So verwenden Sie moderne Bildformate und passen Bilder in der richtigen Größe an

Hochauflösende Bilder können oft eine große Dateigröße haben, was bedeutet, dass das Herunterladen lange Zeit in Anspruch nimmt.

Im Ergebnis des Geschwindigkeitstests unten können Sie dies anhand der dunkelblau schattierten Bereiche erkennen. Jede Zeile zeigt einen Teil des im Browser ankommenden Bildes an.

Es gibt zwei Ansätze zum Reduzieren der Bildgröße:

1. Stellen Sie sicher, dass die Bildauflösung so niedrig wie möglich ist. Erwägen Sie, Bilder je nach Größe des Geräts des Benutzers mit unterschiedlichen Auflösungen bereitzustellen.
2. Verwenden Sie ein modernes Bildformat wie WebP, das Bilder in gleicher Qualität bei geringerer Dateigröße speichern kann.

So optimieren Sie die Ladezeiten von Schriftarten

Wenn das LCP-Element eine HTML-Überschrift oder ein Absatz ist, dann ist es wichtig, die Schriftart für diesen Textabschnitt schnell zu laden.

Eine Möglichkeit, dies zu erreichen, wäre die Verwendung von Preload-Tags, die den Browser anweisen können, die Schriftarten frühzeitig zu laden.

Auch die CSS-Regel font-display:swap kann für eine beschleunigte Darstellung sorgen, da der Browser den Text sofort mit einer Standardschrift darstellt, bevor er später auf die Webschrift umschaltet.

Überwachen Sie Ihre Website, um das LCP schnell zu halten

Durch die kontinuierliche Überwachung Ihrer Website können Sie nicht nur überprüfen, ob Ihre LCP-Optimierungen funktionieren, sondern auch sicherstellen, dass Sie benachrichtigt werden, wenn sich Ihr LCP verschlechtert.

DebugBear kann die Core Web Vitals und andere Website-Geschwindigkeitsmetriken im Laufe der Zeit überwachen. Neben der Durchführung eingehender laborbasierter Tests verfolgt das Produkt auch die realen Benutzermetriken von Google.

Probieren Sie DebugBear mit einer kostenlosen 14-tägigen Testversion aus.