Beheben des LCP ‚Mehr Als‘ Fehlers in den Core Web Vitals auf GSC

Google hat einen neuen Bericht in der Search Console veröffentlicht, der Core Web Vitals heißt. Diese haben die Geschwindigkeitsberichte ersetzt und werden 2021 als Rankingfaktor betrachtet. Die Core Web Vitals werden zusammen mit der Seitenladegeschwindigkeit, HTTPS, mobiler Benutzerfreundlichkeit und anderen On-Page-Faktoren als Rankingfaktor betrachtet.

Die Core Web Vitals berücksichtigen UX- und UI-Elemente auf der Seite, um den Durchschnitt einer Seite für drei Kernmetriken zu ermitteln,

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

Es gibt keine spezielle codierte Lösung zur Behebung der Probleme, aber Sie können die Website optimieren, um die Fehler zu beheben. Hier werde ich einige Praktiken auflisten, die Ihnen helfen können, den Largest Contentful Paint (LCP) ‚ Mehr Als‘ für Ihre Webseiten zu beheben.

Was ist LCP?

Die Largest Contentful Paint (LCP) Metrik berichtet die Renderzeit des größten sichtbaren Inhaltselements im Viewport. Einfach ausgedrückt ist es die Zeit, die benötigt wird, damit ein wichtiges Element auf dem sichtbaren Bildschirm geladen wird, nachdem die Seite mit dem Laden begonnen hat.

Um eine gute Benutzererfahrung zu bieten, sollten Websites darauf abzielen, dass der Largest Contentful Paint innerhalb der ersten 2,5 Sekunden nach dem Start des Seitenladens auftritt.

Welche Elemente werden für LCP berücksichtigt?

Die Arten von Elementen, die für den Largest Contentful Paint berücksichtigt werden, sind;

• -Elemente
• -Elemente innerhalb eines -Elements
• -Elemente
• Ein Element mit einem Hintergrundbild, das über die url()-Funktion geladen wird
• Blockelemente, die Textknoten oder andere inline-Text-Elemente enthalten.

Was sind die Ursachen für hohen LCP?

• Langsame Serverantwortzeiten
• Render-blockierendes JavaScript und CSS
• Langsame Ladezeiten von Ressourcen
• Client-seitiges Rendering

Wie optimiert man die Website, um hohen LCP zu beheben?

Verwenden Sie ein gutes Hosting mit guter Reaktionszeit und niedriger Latenz. Stellen Sie sicher, dass Sie die Server optimieren, verwenden Sie kostenlose 3rd Party CDNs wie Cloudflare, jsDelivr, Statically, um statische Assets schnell zu liefern. Wenn Sie an WordPress arbeiten, gibt es eine Reihe von Plugins, die Ihnen dabei helfen können.

Verwenden Sie komprimierte Bilder mit modernen Bildformaten wie JPEG XR, JPEG 2000 oder WebP. Diese modernen Formate helfen, die Bildladezeit um 50 % zu beschleunigen. Es gibt einige Plugins für WordPress, die Ihnen automatisch helfen, die Bilder im Handumdrehen zu komprimieren und zu konvertieren. Verwenden Sie auch ein Bild-CDN wie WP-Photon, um die Serverbandbreite zu reduzieren und die Geschwindigkeit der Website zu erhöhen.

Sie können Cache-Dienste verwenden, um eine statische HTML-Seite zu laden, die sich bei jeder Anfrage nicht ändert. Caching kann verhindern, dass sie unnötig neu erstellt wird. Cache-Plugins speichern eine Kopie des generierten HTML auf Ihrem Server, und wenn eine Seite angefordert wird, gibt der Server die Cache-Ladung frei, was die Zeit bis zum ersten Byte (TTFB) reduzieren und den Ressourcenverbrauch minimieren kann.

Sie können auch Dienste wie Cloudflare verwenden, die Service-Worker im Hintergrund des Browsers ausführen und Anfragen vom Server abfangen können. Sie nehmen einen vollständigen HTML-Cache der Seite und bedienen HTML-Seiten zuerst aus dem Cache, was die Ladezeit erheblich reduzieren kann.

Weitere wichtige Dinge, die Sie berücksichtigen sollten, um die Website für einen guten LCP zu optimieren, sind:

• Render-blockierendes JavaScript und CSS eliminieren
• Nicht-kritisches CSS aufschieben
• Ressourcen minimieren
• Wichtige Ressourcen vorladen

Sie finden einen detaillierteren Leitfaden zur Optimierung einer Website zur Reduzierung von LCP und zur schnelleren Ladezeit Ihrer Seiten für eine bessere Benutzererfahrung auf der offiziellen Web.Dev-Website.

Fazit: Mit der Einführung der Core Web Vitals in GSC und deren Berücksichtigung als Rankingfaktor ist LCP eine sehr wichtige Metrik, die behoben werden muss, da sie die Zeit berücksichtigt, die benötigt wird, damit das größte Element im Viewport des Geräts geladen wird. Ich habe einige vorläufige Lösungen und Ansätze bereitgestellt, um die Website für einen niedrigen LCP zu optimieren.

Wenn Sie Gedanken zu Beheben des LCP ‚Mehr Als‘ Fehlers in den Core Web Vitals auf GSC haben, können Sie gerne unten im Kommentarfeld schreiben. Bitte abonnieren Sie auch unseren DigitBin YouTube-Kanal für Video-Tutorials. Prost!