So messen und optimieren Sie den größten Contentful Paint für überlegene UX

Wenn es um Online-Erfolg geht, gibt es viele Möglichkeiten, dies zu tun. Eine optimierte Benutzererfahrung ist ein solcher Weg. Google wird verschiedene Benutzererfahrungen und zugehörige Metriken verwenden, um Websites für SEO zu ranken. Es hat weiterhin mehrere Tools entwickelt, um die Webleistung zu verbessern. Im Folgenden sehen wir uns einige Möglichkeiten an, wie Google versucht, die Benutzererfahrung zu verbessern.

Was ist Google Core Web Vitals?

Bei seinem jüngsten Versuch, das Maß und das Verständnis dessen, was als anständige Benutzererfahrung gilt, zu ändern, hat Google die Metriken der Seite reguliert. Diese standardisierten Metriken werden als Core Web Vitals bezeichnet und erleichtern die Bewertung der realen Benutzererfahrung auf Ihrer Website.

Was ist die größte zufriedene Farbe?

Schauen wir uns zunächst Largest Contentful Paint (LCP) an. Es ist eine der zentralen Web-Vitals-Metriken. Es misst die Ladezeit der größten Inhaltskomponente im Darstellungsbereich, sobald sie sichtbar wird. Alternative Metriken wie TTFB und First Contentful Paint erleichtern gemeinsam das Live-Erlebnis der Seite, sie sind nicht mehr vorhanden, sobald die Seite für den Benutzer „sinnvoll“ geworden ist.

Normalerweise bietet die Seite möglicherweise nicht genügend Kontext für den Benutzer, es sei denn, die wichtigste Komponente auf der Seite wird vollständig sichtbar. LCP ist daher repräsentativ für die Erwartungen des Benutzers. Als zentrale Web-Vitals-Metrik macht LCP fünfundzwanzig Prozent des Performance-Scores aus, weshalb es eine der wichtigsten zu optimierenden Metriken ist.

Überprüfen Ihrer LCP-Zeit

Laut Google sind die Kategorien von Teilen, die für Largest Contentful Paint gedacht sind:

• <img> Elemente
• <image>-Elemente innerhalb eines <svg>-Elements
• <video>-Elemente (Posterbild verwendet)
• Ein Element mit einem Hintergrundbild, das über die URL-Funktion geladen wird
• Elemente auf Blockebene, die aus Textknoten und/oder anderen Textelementen auf Inline-Ebene bestehen

Wie wird LCP gemessen?

Natürlich gibt es mehrere Möglichkeiten, den LCP Ihrer Webseite zu messen. Der einfachste Weg, dies zu tun, ist die Verwendung einer der verfügbaren Plattformen, darunter Lighthouse, PageSpeed ​​Insights, Search Console sowie Chrome User Experience Report. Beispielsweise weist Google PageSpeed ​​Insights in seinem Bericht auf die Komponente zur Berechnung des LCP hin.

Was ist ein gutes LCP?

Um ein angemessenes Benutzerwissen zu bieten, müssen Sie versuchen, auf Ihrer Website einen LCP von 2,5 Sekunden oder weniger aufrechtzuerhalten. Ein Großteil Ihrer Seitenladevorgänge sollte unter diesem Schwellenwert stattfinden. Nun, da wir alle wissen, was LCPs sind und was unser Ziel sein sollte, lassen Sie uns Wege untersuchen, LCPs zu verbessern.

(Bitte fügen Sie das Bild mit dem Namen Mehrheit der Seiten muss mit einem LCP von 2,5 Sekunden oder weniger geladen werden.jpg) hinzu.

So optimieren Sie Largest Contentful Paint (LCP)

Das zugrunde liegende System zur Reduzierung von LCP insgesamt besteht darin, die auf das Gerät des Benutzers heruntergeladenen Daten zu reduzieren und die Zeit zu reduzieren, die zum Verwalten dieser Inhalte benötigt wird, und ein nahtloses Benutzererlebnis zu gewährleisten.

Optimieren Sie Ihre Bilder

Auf den meisten Websites enthält der Inhalt "above the fold" normalerweise ein übergroßes Bild, das für LCP erforderlich ist. Es kann ein Heldenbild, ein Karussell oder ein Banner sein. Sie müssen diese Bilder für ein robusteres LCP optimieren.

Um Ihre Bilder zu optimieren, müssen Sie ein Bild-CDN eines Drittanbieters wie ImageKit.io verwenden. Der Vorteil der Verwendung eines Image-CDN eines Drittanbieters besteht darin, dass Sie sich einfach auf Ihr eigentliches Geschäft konzentrieren und die Bildoptimierung dem Image-CDN überlassen.

Echtzeit-Transformationen für ansprechende Bilder

Google verwendet Mobile-First-Kompartimentierung für fast alle Websites. Aus diesem Grund ist es notwendig, LCP für Mobilgeräte über Desktop zu optimieren. Jedes Bild muss gemäß den Anforderungen des Layouts herunterskaliert werden.

Beispielsweise möchten Sie, dass das Bild auf der Angebotsseite kleiner und auf der Produktdetailseite größer angezeigt wird. Diese Größenänderung stellt sicher, dass Sie anscheinend keine zusätzlichen Bytes verwenden, als für genau diese Seite erforderlich sind.

Zwischenspeichern von Bildern und Verbessern der Lieferzeit

Bild-CDNs verwenden Content Delivery Network (CDN), um die Fotos zu liefern. Durch den Einsatz eines CDN wird sichergestellt, dass Bilder von einem nahe gelegenen Standort geladen werden und nicht von einem Server, der sich möglicherweise auf der anderen Seite der Welt befindet.

Laden Sie wichtige Ressourcen vorab

Es gibt Fälle, in denen der Browser ein Bild möglicherweise nicht lädt, wenn es sich auf LCP auswirkt. Beispielsweise kann ein Bannerbild oben auf dem Falz als Hintergrundbild in einer CSS-Datei angezeigt werden. Da der Browser dies über das Bild nicht wissen würde, bis die CSS-Datei heruntergeladen ist, wird sie nicht geladen.

Wenn Sie jetzt fragen: „Wie lade ich das größte Contentful Paint-Bild vorab?“, ist die Antwort einfach. Sie können sie vorab laden, indem Sie ein Tag mit einem rel= „preload“-Attribut in den oberen Abschnitt Ihres Hypertext-Markup-Language-Dokuments einfügen.

Sie können zwar mehrere Ressourcen in einem Dokument vorab laden, müssen dies jedoch auf Bilder oder Videos über dem Falz, seitenbreite Schriftartdateien oder wichtige CSS- und JS-Dateien beschränken.

Reduzieren Sie die Antwortzeiten des Servers

Wenn das Laden Ihres Servers länger als normal dauert, erhöht sich die Zeit, die zum Laden der Seite auf dem Bildschirm benötigt wird. Es wirkt sich zusammen mit LCP negativ auf jede Seitengeschwindigkeitsmetrik aus. Um Ihre Server-Antwortzeiten zu verbessern, können Sie:

• Analysieren und optimieren Sie Ihre Server
• Verwenden Sie ein Content Delivery Network
• Vorabverbindung zu Drittanbieter-Ursprüngen
• Bereitstellen von Inhalten zuerst im Cache mit einem Servicemitarbeiter
• Textdateien komprimieren

Verbessern Sie die Reaktionszeiten von Client-Geräten

Wenn das Laden Ihrer Seite lange dauert, kann dies potenzielle Kunden abschrecken. Glücklicherweise gibt es ein paar Dinge, die Sie tun können, um sicherzustellen, dass es auf ihrer Seite richtig geladen wird und ein nahtloses Benutzererlebnis schafft. Das beinhaltet:

• Wichtiges CSS inlinieren
• Minimieren und drücken Sie den Inhalt
• Optimieren von LCP für clientseitiges Rendern
• Verwenden von serverseitigem Rendering
• Verwendung von Pre-Rendering

LCP ist zu einem großen Suchrankingfaktor geworden, der stark mit der Benutzererfahrung und -reise korreliert. Wenn Sie also ein Web-Geschäft betreiben, müssen Sie diese Komponenten optimieren, um den Erfolg des Unternehmens sicherzustellen.

Autor Bio

Ghia Marnewick ist Autorin, Social-Media-Managerin und Digitalmanagerin. Sie schreibt Inhalte für Aumcore und sucht leidenschaftlich nach neuen Wegen, Informationen mit der Welt zu teilen.