Die Seitengeschwindigkeit ist heutzutage wichtiger denn je und ein Schlüsselfaktor, der für jede Website berücksichtigt werden muss. Sie hat nicht nur einen erheblichen Einfluss auf die Benutzererfahrung, sondern kann auch massive Auswirkungen auf die Suchmaschinenoptimierung (SEO) haben.
In fact, in May 2021, Google introduced the Core Web Vitals which score the user experience during each page load. Google is calling this new signal the "Page Experience Signal" and it will have an extensive effect on all websites. Website owners will do well to thoroughly familiarize themselves with these Core Web Vitals so that they can minimize any potentially negative ranking shifts.
Largest Contentful Paint (LCP) ist eine der drei kritischen Kennzahlen, die Googles Core Web Vitals ausmachen. Der Zweck dieses Parameters besteht darin, sicherzustellen, dass Benutzer, die Websites besuchen, mit ihrer Erfahrung zufrieden sind. Dazu gehören Inhalte, aber auch Präsentation und Leistung. Wenn die Website zu lange braucht, um den angebotenen Inhalt bereitzustellen, besteht eine höhere Wahrscheinlichkeit, dass der Besucher die Seite sofort verlässt. Für Google bedeutet dies, dass die Erfahrung nicht optimal war.
Zu den Core Web Vitals gehören auch Cumulative Layout Shift (CLS) und First Input Delay (FID), die wir kurz ansprechen werden. Da es aber viel zu besprechen gibt, konzentrieren wir uns speziell auf den Largest Contentful Paint und darauf, wie sich das anfängliche Rendering der Elemente auf einer Website auf das allgemeine Webseitenerlebnis auswirkt.
Lasst uns eintauchen!
Was ist Largest Contentful Paint: Eine einfache Erklärung
Einfach ausgedrückt misst Largest Contentful Paint die Zeit, die eine Website benötigt, um einem Benutzer das größte Element auf dem Bildschirm vollständig und interaktionsbereit anzuzeigen. Die Analyse dieser Metrik endet, sobald eine Benutzerinteraktion wie Klicken, Scrollen oder eine Benutzereingabe wie das Eingeben von Text in ein Textfeld erfolgt.
Google behauptet, dass dies eine einfachere Messung als die früher verwendeten DOM- oder DOMContentLoad-Werte sei und dass LCP die wahrgenommene Ladegeschwindigkeit kritischer Ressourcen wie der größten Elemente auf Blockebene, etwa eines sichtbaren Bilds oder Textblocks, betrachte.
Das bedeutet: Wenn das Laden des größten inhaltshaltigen Elements auf Ihrer Website, beispielsweise eines Hintergrundbilds oder -videos, im Rendering-Prozess lange dauert, wird sich dies wahrscheinlich negativ auf Ihren LCP-Score auswirken.
Google gibt an, dass diese Metrik ausschließlich den „Above-the-Fold“-Inhalt berücksichtigt, also alles, was unmittelbar nach dem Laden auf der Seite erscheint, ohne dass gescrollt werden muss.
Was ist der ideale Largest Contentful Paint Score?
Since we've established that LCP indicates a better user experience and can be a significant SEO ranking factor, it's of great importance to make sure your website has a "good" largest contentful paint score.
While it's often cited that 1 second is the amount of time a user will wait before they begin to lose focus on a task, this is just an approximation that researchers have made. For the purposes of SEO rankings and an overall positive user experience from Google's perspective, a positive LCP score of 2.5 seconds or less is considered "good."
If your website's score sits in the 2.5 to 4-second range, it's considered "in need of improvement," while anything over 4 seconds is considered "poor."
It's important to note that largest contentful paint accounts for roughly 25% of your Google Performance Score (also known as your "Page Speed" score on mobile and desktop). In order to have a positive Core Web Vitals report and pass the assessment, you need to have a "good" LCP score while also scoring well in CLS and FID, so you'll want to give these metrics some serious consideration.
An welchen Schwellenwerten für Largest Contentful Paint (LCP) sollten Sie sich messen?
Um sicherzustellen, dass Sie Ihr LCP-Ziel für die meisten Ihrer Benutzer erreichen, sollten Sie es mit dem 75. Perzentil aller Seitenaufrufe auf dieser Website vergleichen. Dies sollte auf Mobil- und Desktopgeräte aufgeteilt werden, um sicherzustellen, dass Ihre Elemente auf allen Geräten mit der gleichen Geschwindigkeit gerendert werden.
In simple terms, measuring against the 75th percentile means that if at least 75% of page views to a website meet the "good" threshold, the site is deemed as having "good" performance for that metric.
On the other hand, if at least 25% of page views meet the "poor" threshold, the site is determined to have "poor" performance. For example, a 75th percentile LCP of 2 seconds is deemed "good", while a 75th percentile LCP of 5 seconds is deemed "poor".
Es gibt zwei Gründe, warum das 75. Perzentil als idealer Schwellenwert festgelegt wurde. Erstens sollte die Verwendung dieses Perzentils sicherstellen, dass die meisten Besuche einer Site oder Seite das Zielleistungsniveau erreichen. Zweitens sollte der Wert beim gewählten Perzentil nicht ernsthaft durch Ausreißer beeinflusst werden.
Wenn Sie über eine große Menge renderblockierender Ressourcen wie renderblockierendes JavaScript oder CSS verfügen, liegt Ihr Score wahrscheinlich unter dem idealen Schwellenwert und Sie müssen sich einige Zeit nehmen, um Ihr LCP zu verbessern, damit Ihre Website den Richtlinien von Google entspricht.
Warum ist mein Largest Contentful Paint-Score so hoch?
UnsplashDie höchsten Contentful Paint-Scores messen bestimmte, im oberen Seitenbereich dargestellte Ressourcen, die für das Benutzererlebnis relevant sind. Dazu gehören:
- Hintergrundbilder mit CSS.
- Textelemente wie Absätze, Überschriften und Listen.
- Bilder.
- Bild-Tags.
- Video-Miniaturansichten.
Wenn bei einem dieser Elemente langsame Ladezeiten der Ressourcen festgestellt werden, geht Google davon aus, dass dies zu einer schlechten Nutzererfahrung führt und sich negativ auf die LCP-Metrik auswirkt.
Dies sind die derzeit berücksichtigten Schlüsselelemente. Bei der Einführung der Core Web Vitals wurde die Darstellung jedoch bewusst einfach gehalten. Im Laufe der weiteren Untersuchungen können möglicherweise weitere Elemente hinzugefügt werden.
Mit welchen Werkzeugen lässt sich LCP messen?
Es gibt eine Vielzahl von Feld- und Labortools, mit denen Sie den LCP Ihrer Website messen können.
Feldtools geben Aufschluss darüber, wie echte Benutzer Ihre Seite oder Website erleben. Diese Art der Messung wird häufig als Real User Monitoring (RUM) bezeichnet. Felddaten verfügen in der Regel über einen eingeschränkteren Satz von Messwerten als Labordaten.
Labortools sammeln Daten in einer kontrollierten Umgebung und sind stärker darauf ausgerichtet, reproduzierbare Ergebnisse für das Debuggen zu liefern und Einblicke in die wahrscheinliche Erfahrung eines potenziellen Benutzers mit Ihrer Website zu geben. Der Nachteil besteht darin, dass sie möglicherweise keine Engpässe erfassen, die bei realen Benutzererfahrungen auftreten.
Es gibt zahlreiche Labor- und Feldtools und jedes Tool bietet wertvolle Erkenntnisse, die Sie zur Optimierung Ihres Benutzererlebnisses nutzen können.
PageSpeed Einblicke
PageSpeed Insights (PSI) bietet detaillierte Berichte zur Leistung einer Seite auf Mobilgeräten und Desktops sowie klare Vorschläge zur Optimierung der Seite. PSI berücksichtigt in seinen Berichten sowohl Labor- als auch Felddaten und berücksichtigt außerdem alle drei kumulativen Core Web Vitals-Metriken, einschließlich LCP.
Ganz oben im Bericht zeigt PSI eine Punktzahl an, die die Gesamtleistung der Seite zusammenfasst. Eine Punktzahl von 90 oder höher gilt als gut, während alles zwischen 50 und 90 eine Punktzahl ist, die verbessert werden könnte. Alles unter 50 gilt als schlechtes Ergebnis.
Dieser Score wird schließlich ermittelt, indem Lighthouse ausgeführt wird, um Labordaten über die Seite zu sammeln und zu analysieren. Während PageSpeed von Lighthouse generierte Informationen verwendet und dann weitere reale Daten hinzufügt, liefert Ihnen Lighthouse mehr als nur einen Score. Es bietet mehr Funktionen als nur die Messung der Leistung Ihrer Website.
Leuchtturm
Suzuki-KenichiLighthouse ist ein automatisiertes Open-Source-Labortool zur Verbesserung der Qualität von Webseiten. Im Gegensatz zu PageSpeed Insights misst es nicht nur die Leistungsmetrik. Es bietet auch Audits für Zugänglichkeit, SEO, progressive Web-Apps und mehr.
Während Google PageSpeed eine Kombination aus Labor- und Realweltdaten verwendet, nutzt Lighthouse zur Erstellung seines Berichts ausschließlich Labordaten (unter gleichbleibenden Bedingungen).
Da Lighthouse jetzt als integrierte Analyse-Engine in PageSpeed Insights integriert ist, können Sie auf die Daten von Lighthouse zugreifen, indem Sie einfach einen PageSpeed-Bericht ausführen. Es gibt Situationen, in denen Sie Lighthouse anstelle von PageSpeed Insights verwenden möchten, z. B. wenn Sie Audits programmgesteuert ausführen, andere Aspekte Ihrer Websites als nur die Ladezeiten auswerten oder die Lighthouse-API in Ihre eigenen Systeme integrieren möchten.
Bericht zur Chrome-Benutzererfahrung
Der Chrome-Benutzererfahrungsbericht ist ein praktisches Tool, da er reale Benutzererfahrungsmetriken basierend auf der Art und Weise bereitstellt, wie Chrome-Benutzer beliebte Ziele im Internet erleben. Er fasst Daten von Benutzern zusammen, die keine Synchronisierungspassphrase eingerichtet haben, die der Synchronisierung ihres Browserverlaufs zugestimmt haben und die Berichte zu Nutzungsstatistiken aktiviert haben.
LCP ist eine der im Chrome-Benutzererfahrungsbericht gemessenen Metriken und die endgültigen Daten werden bereitgestellt in: Auf die resultierenden Daten kann über das öffentliche Google BigQuery-Projekt, PageSpeed Insights und das CrUX Dashboard in Data Studio zugegriffen werden.
Core Web Vitals-Bericht (Search Console)
Der Bericht zu den wichtigsten Web-Vitalwerten soll Ihnen durch die Analyse von Felddaten dabei helfen, schlechte Benutzererfahrungen auf Ihrer Website zu beheben. Er zeigt die Leistung Ihrer Seiten anhand realer Daten.
Der Bericht basiert auf drei Kennzahlen: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und First-Input Delay (FID). Wenn die analysierte Webseite nicht über die Mindestdatenmenge verfügt, die für eine dieser Kennzahlen gemeldet werden muss, wird diese Kennzahl aus dem Bericht ausgeschlossen.
Sobald eine Seite über eine Basisdatenmenge für diese drei Kennzahlen verfügt, entspricht der Seitenstatus dem Status der Kennzahl mit der schlechtesten Leistung.
Chrome-Entwicklertools
Chrome DevTools ist eine Reihe von Webentwickler-Tools, die direkt in den Chrome-Browser integriert sind und mit denen die Netzwerkaktivität einer Seite überprüft werden kann. Außerdem können gerendertes HTML (DOM), kritisches CSS, nicht kritisches CSS, CSS des kritischen Pfads, ungenutztes CSS, ungenutztes JavaScript, JavaScript-Pakete, das Vorhandensein von blockierendem JavaScript und vieles mehr genauer unter die Lupe genommen werden.
Mit Chrome DevTools können Sie Probleme bei der Anzeigenschaltung beheben und das LCP auf einer beliebigen Seite finden. Führen Sie einfach eine Leistungsaufzeichnung aus und Sie finden das LCP im Abschnitt „Timings“. Wenn Sie auf die LCP-Markierung klicken, wird das Element auf der Seite hervorgehoben.
Im Allgemeinen zeigt die Leistungsaufzeichnung die Leistung Ihrer Seite beim Ausführen im Gegensatz zum Laden. Sie zeigt Ihre Frames pro Sekunde (FPS) und etwaige Engpässe.
Webseitentest
FlickrWebPageTest is a free-to-use web performance analytics tool that doesn't fall under the Google umbrella. It uses real browsers to access web pages and gather timing metrics so that it can score a website's overall performance.
Das herausragende Merkmal von WebPageTest ist eine Metrik namens SpeedIndex, die sich speziell darauf konzentriert, wie schnell Inhalte im oberen Seitenbereich angezeigt werden.
Web Vitals Chrome-Erweiterung
Das Web Vitals Chrome-Tool ist möglicherweise eines der einfachsten verfügbaren Tools zum Verfolgen von LCP und den beiden anderen Web Vitals-Metriken (CLS und FID0). Es handelt sich um eine unkomplizierte Erweiterung, die in Ihrem Chrome-Browser installiert wird.
Auf jeder geladenen Webseite fügt das Tool automatisch eine Ebene hinzu, die Ihnen alle drei Metriken anzeigt.
5 bewährte Möglichkeiten zur Beschleunigung von Largest Contentful Paint (LCP)
Die Verfolgung Ihres größten Contentful Paint-Scores ist ein wichtiger Teil Ihrer Website-Wartungsroutine, aber nur durch Verbesserungen erzielen Sie bessere Ergebnisse. Wenn Ihr LCP-Score nicht optimal ist und verbessert werden muss, gibt es eine Reihe einfacher und aufwändigerer Dinge, die Sie tun können, um Ihren Score zu erhöhen und ein besseres Benutzererlebnis zu schaffen.
Bildgrößen optimieren
Bilder können das Benutzererlebnis auf Ihrer Website erheblich verbessern, aber sie können auch erhebliche Geschwindigkeitsprobleme verursachen, wenn sie nicht optimiert sind. Verwenden Sie immer responsive Bilder mit der richtigen Größe. Ihr Hosting schlägt bestimmte Abmessungen vor, entweder für die Desktop- oder die mobile Version. Die Optimierung der Bilder auf Ihrer Website hilft, eine Überlastung zu vermeiden und kann die größten Contentful Paint-Werte drastisch verbessern.
Vermeiden Sie die Verwendung von JavaScript zum Laden von Bildern
So-called JavaScript "lazy loading" is useful for images below the fold, but it's not recommended for images above the fold. Lazy loading means that instead of loading the entire web page and rendering it for the user all at once in bulk, only the required section is loaded immediately and the remaining content is delayed until it is needed by the user.
Da Bilder im oberen Seitenbereich so schnell wie möglich geladen werden sollen, sollten Sie JavaScript nicht zum Laden dieser Bilder verwenden, da dies den Vorgang verlangsamen kann. So vermeiden Sie Verzögerungen und halten Ihre LCP-Bewertung im empfohlenen Bereich.
Verwenden Sie ein Image Content Delivery Network (CDN)
Ein Content Delivery Network (CDN)-Dienst kann das Laden von Bildern beschleunigen, indem er Bilder auf Servern speichert, die strategisch auf der ganzen Welt verteilt sind. Durch die Bereitstellung optimierter Bilder von einer Quelle, die näher am anfordernden Benutzer liegt, kann eine Webseite bis zu 50 % schneller heruntergeladen werden, was zu einem besseren Largest Contentful Paint Score führen kann.
Wählen Sie einen guten Hosting-Service
Eine der einfachsten Möglichkeiten, die Ladezeit einer Webseite zu verbessern, ist die Nutzung eines hochwertigen Hosting-Dienstes. Suchen Sie sich einen Qualitätsanbieter mit einem guten Ruf auf dem Markt und, was noch wichtiger ist, einen Anbieter, der die notwendige Infrastruktur bietet, um der Größe und den Anforderungen Ihrer Website gerecht zu werden.
Im Zweifelsfall verwenden Sie das PRPL-Muster
Google empfiehlt die Verwendung des PRPL-Musters, das dazu dient, jede einzelne Seite schneller zu laden und interaktiv zu machen. Es steht für:
- Pushen (oder laden) Sie zuerst die wichtigsten Ressourcen vor. Dazu kann eine deklarative Fetch-Anfrage verwendet werden, also Code, der dem Browser genau das mitteilt, was uns interessiert.
- Rendern Sie die anfängliche Route so schnell wie möglich. Eine Möglichkeit hierfür besteht darin, das anfängliche HTML auf der Seite serverseitig zu rendern, kritisches JS und CSS zu inlinen und zusätzliche Server-Roundtrips mithilfe einer asynchronen Funktion zum Verschieben nicht kritischen CSS zu vermeiden.
- Speichern Sie verbleibende Assets vorab im Cache, und lassen Sie Benutzer bei nachfolgenden Besuchen die Assets direkt aus dem Cache und nicht vom Server abrufen.
- Führen Sie wie zuvor besprochen ein verzögertes Laden anderer Routen und nicht kritischer Assets wie z. B. Bilder durch.
Das PRPL-Muster kann sich positiv auf die Serverantwortzeiten auswirken und ist eine Implementierung wert.
Wie kann man Largest Contentful Paint in WordPress verbessern?
UnsplashDas Beheben von LCP-Problemen in WordPress erfordert einige andere Prozesse als bei Websites auf anderen Plattformen. Obwohl es einige Überschneidungen gibt, sind die meisten dieser Tipps zur Verbesserung des größten Contentful Paint direkt für WordPress relevant.
So optimieren Sie Ihr größtes Contentful Paint-Element, egal, um welches es sich handelt
Das größte inhaltsreiche Malobjekt kann von Seite zu Seite unterschiedlich sein und Bild-, Video-, Animations- oder Textelemente enthalten.
Wenn es sich um ein Bild handelt, sollten Sie sicherstellen, dass es komprimiert und vorab geladen ist, die richtigen Abmessungen verwendet, von einem CDN bereitgestellt wird und von allen Lazy-Load-Protokollen ausgeschlossen ist. Idealerweise sollten Sie Bilder auch in WebP konvertieren, ein modernes Bildformat, das eine hervorragende verlustbehaftete und verlustfreie Komprimierung für Webbilder bietet. Dieselben Schritte können für ein Hintergrundbild verwendet werden.
Wenn Ihr größtes Contentful Paint-Element ein Video oder eine Animation ist, empfiehlt es sich, selbst gehostete Videos zu vermeiden und sie stattdessen auf YouTube hochzuladen. Stellen Sie sicher, dass das Video vor dem Hochladen komprimiert ist, und vermeiden Sie möglichst die Verwendung von Videos oder Animationen im Hero-Bereich Ihrer Webseite, da sich dies höchstwahrscheinlich negativ auf Ihren LCP auswirkt.
Wenn ein HTML-Element auf Blockebene Ihr wichtigster Inhaltsbestandteil ist, ist es unwahrscheinlich, dass es Ihren LCP so stark negativ beeinflusst wie ein Bild, ein Video oder eine Animation, da diese tendenziell zu einer schnelleren Serverantwortzeit führen.
Eliminieren Sie Render-blockierende Ressourcen
Das Eliminieren renderblockierender Ressourcen kann LCP-Probleme erheblich reduzieren. Plugins wie Async JavaScript oder Autoptimize können die meisten Probleme beheben, da sie speziell dafür entwickelt wurden, Dateien asynchron zu laden, zu minimieren, zu verschieben und CSS und JavaScript zu inline zu bringen. Entfernen Sie alle CSS- oder JavaScript-Dateien, die nicht verwendet werden, da sie die Dinge unnötig verlangsamen.
Sie können auch versuchen, Ihre Schriftarten lokal zu hosten und sie vorab zu laden. Vermeiden Sie nach Möglichkeit schwere Plug-Ins wie Seitenersteller, da diese Ihrer Website übermäßig viel JavaScript und ungenutztes CSS hinzufügen können, was auch die Serverantwortzeiten verlangsamen kann.
Nutzen Sie die Vorteile eines Cache-Plugins
Ohne Caching müssen Besucher bei jedem Besuch einer Website eine Webseite herunterladen. Glücklicherweise führen die meisten modernen Browser ein automatisches Caching durch, sodass wiederkehrende Benutzer schneller auf den Inhalt Ihrer Website zugreifen können.
Durch die Verwendung eines WordPress-Cache-Plugins können Sie die Vorteile des serverseitigen Caching nutzen, was einen großen Einfluss auf den größten Contentful Paint Ihrer WordPress-Site haben kann. Anstatt Inhalte mit einem Browser-Cache vorübergehend auf der Clientseite zu speichern, werden sie auf dem Server einer Website gespeichert. Server-Caching bedeutet, dass das Caching vollständig auf dem Server gehandhabt und verwaltet wird, ohne dass der Endbenutzer oder der Browser überhaupt beteiligt sind.
Es gibt auch dateibasierte Cache-Plugins, die Sie verwenden können, aber serverseitiges Caching ist normalerweise schneller und kann mit Plugins wie SG Optimizer oder LiteSpeed Cache aktiviert werden. Plugins wie WP Rocket ermöglichen Ihnen die Nutzung von Seiten-Caching, Objekt-Caching und vielem mehr.
Wenn Sie derzeit kein Cache-Plugin verwenden und die Serverantwortzeiten auf Ihrer Website langsam sind, sollten Sie durch die Implementierung eines solchen Plugins eine deutliche Verbesserung der Ressourcenladezeiten feststellen.
Abschluss
Obwohl LCP nur einer von vielen Faktoren ist, wenn es um die Geschwindigkeit und das allgemeine Benutzererlebnis Ihrer Website geht, sollten Sie es nicht auf die leichte Schulter nehmen. Wie wir gelernt haben, kann die Ladezeit einer Webseite nicht nur einen großen Einfluss auf das Benutzererlebnis haben, sondern auch ein wichtiger SEO-Rankingfaktor sein, der bestimmt, wie viele Websites überhaupt erst Benutzerverkehr erhalten.
Nutzen Sie die besprochenen Tipps zum Verfolgen, Optimieren und Warten Ihres LCP und denken Sie daran, dass Sie fortlaufende Anstrengungen unternehmen müssen, um den Überblick zu behalten und Ihren Benutzern das bestmögliche Erlebnis zu bieten.
Wenn Ihr monatlicher Werbeumsatz mehr als 2.000 US-Dollar beträgt, kontaktieren Sie uns noch heute, um mehr darüber zu erfahren, wie Publift Ihnen dabei helfen kann, Ihren Werbeumsatz zu steigern und den auf Ihrer Website oder App verfügbaren Werbeplatz optimal zu optimieren.