WordPress ist dank seiner Benutzerfreundlichkeit und Flexibilität das weltweit beliebteste Content-Management-System (CMS)
Trotz der leistungsstarken Funktionen des CMS ist es nach wie vor möglich, Webseiten zu erstellen, die zwar optisch ansprechend sind, aber Schwierigkeiten haben, ihre Reichweite zu steigern. Ein Content-Audit ist zwar ratsam, doch sollten Publisher zunächst ein technisches Audit durchführen, um sicherzustellen, dass im Hintergrund ihrer Webseite keine Prozesse ablaufen, die ihre Reichweite beeinträchtigen.
Zu den wichtigsten Leistungskennzahlen, die sie messen sollten, gehören die Google Core Web Vitals (CWVs).
Diese Kennzahlen, die Google kurz nach ihrer Einführung im Jahr 2020 , spielen eine Schlüsselrolle bei der Messung der Benutzererfahrung (UX) einer Webseite.
Die CWVs umfassen drei unterschiedliche, aber miteinander verbundene Kennzahlen:
- Größte Inhaltsfarbe (LCP)
- Erste Eingangsverzögerung (FID)
- Kumulative Layoutverschiebung (CLS)
Diese Signale messen die wahrgenommene Ladegeschwindigkeit, Interaktivität bzw. visuelle Stabilität einer Webseite.
Werfen wir einen genaueren Blick auf diese CWVs, um zu verstehen, warum sie so wichtig sind, wie man sie genau misst und welche konkreten Schritte wir unternehmen können, um ihre Werte zu verbessern.
Was sind die wichtigsten Web Vitals-Kennzahlen?
Die drei Core Web Vitals (CWVs) von Google bewerten die Qualität der Benutzererfahrung (UX) einer Website und geben Aufschluss darüber, wie gut Webseiten in Bezug auf Ladegeschwindigkeit, Interaktivität und visuelle Stabilität funktionieren.
- Largest Contentful Paint (LCP): Diese Kennzahl misst die Ladezeit einer Website und gibt den Zeitpunkt im Ladevorgang an, an dem der Hauptinhalt voraussichtlich geladen ist.
Nehmen wir beispielsweise einen Blogbeitrag über ein neues technisches Gerät. Laden das Hauptbild – beispielsweise ein Foto des Geräts – und der Einleitungstext schnell (Google empfiehlt eine Ladezeit von unter 2,5 Sekunden für den LCP), bleiben Besucher eher auf der Seite, lesen den Beitrag und interagieren mit ihm.
Umgekehrt können lange Ladezeiten dazu führen, dass Besucher die Seite verlassen, was wiederum zu einem Rückgang des Traffics führen kann.
- First Input Delay (FID): Diese Kennzahl gibt an, wie schnell eine Webseite auf die erste Nutzerinteraktion reagiert, beispielsweise auf einen Klick auf einen Link oder einen Button. Gemessen wird die Zeit zwischen dieser Aktion und dem Zeitpunkt, an dem der Browser mit der Verarbeitung der entsprechenden Ereignisbehandlungsroutinen beginnt.
Nehmen wir als Beispiel einen „Jetzt abonnieren“-Button. Klickt ein Besucher auf diesen Button und reagiert die Seite verzögert (alles über 100 Millisekunden gilt als schlechtes Ergebnis), könnte er die Seite für nicht responsiv halten. Dies führt zu einer negativen Nutzererfahrung und möglicherweise zum Verlust eines Abonnements.
März 2024 eine neue Metrik namens Interaction to Next Paint (INP) einzuführen, die FID als CWV (Critical Web Value) ersetzen wird.
- Kumulative Layoutverschiebung (CLS): Diese Kennzahl quantifiziert die visuelle Stabilität bzw. das Ausmaß unerwarteter Layoutverschiebungen sichtbarer Inhalte auf einer Webseite.
Wenn beispielsweise auf einer Nachrichtenwebseite Texte, Bilder oder Anzeigen erscheinen, die sich beim vollständigen Laden der Seite plötzlich verschieben, können Besucher die Orientierung verlieren oder versehentlich auf einen falschen Link oder Button klicken. Dies ist frustrierend und kann sie davon abhalten, die Seite erneut zu besuchen.
Quelle: Web.dev - Interaction to Next Paint (INP): Diese Kennzahl bewertet die allgemeine Reaktionsfähigkeit einer Webseite auf Nutzerinteraktionen. Sie überwacht die Latenz aller Maus- und Tastatureingaben während des gesamten Seitenbesuchs. Die längste beobachtete Interaktion (Ausreißer werden ignoriert) ergibt den endgültigen INP-Wert.
Aufgrund der großen Unterschiede in der Geräteleistung kann es schwierig sein, einen optimalen INP-Wert zu erreichen. Dennoch ist es für Webseitenbetreiber sinnvoll, einen INP-Wert im 75. Perzentil der Seitenladezeiten, aufgeteilt nach Mobilgeräten und Desktop-Computern, anzustreben.
Eine Webseite mit einem INP-Wert von maximal 200 Millisekunden gilt als reaktionsschnell. Liegt der INP-Wert zwischen 200 und 500 Millisekunden, besteht Verbesserungsbedarf. Bei einem INP-Wert über 500 Millisekunden gilt die Reaktionsfähigkeit als schlecht.
Quelle: Web.dev
Warum ist der Core Web Vitals Score wichtig?
Die Nutzer erwarten schnelle Ladezeiten, reibungslose Interaktivität und eine visuell stabile Umgebung. Eine Core Web Vitals-Bewertung ist daher von entscheidender Bedeutung, um Publishern zu helfen zu verstehen, wie ihre Websites in dieser Hinsicht abschneiden.
Google stellte fest, dass die Absprungrate um 32 % stieg, als die Seitenladezeit von 1 Sekunde auf 3 Sekunden anstieg. Nachrichtenseiten, die den CWV-Test bestanden, wiesen hingegen eine um 22 % niedrigere Abbruchrate als solche, die durchfielen.
1. Suchergebnisse beeinflussen
CWVs dienen Google als Messlatte für die Leistung einer Website. Sie liefern Google Erkenntnisse darüber, wie gut eine Website die Nutzer bedient, was sich direkt auf die Position der Website in den Suchergebnissen auswirkt.
Vereinfacht ausgedrückt: Ein besserer CWV-Wert kann dazu beitragen, dass eine WordPress-Website in den Suchergebnissen von Google weiter oben erscheint.
2. Den Verkehr steigern
Websites mit optimierten CWVs können einen Anstieg des Datenverkehrs verzeichnen. Beispielsweise konnte die beliebte Berufsberatungsseite LearnHowToBecome.org ihre durchschnittliche Ladezeit von 7 auf 2,9 Sekunden reduzieren und ihren monatlichen Datenverkehr von 500.000 auf 750.000 steigern.
3. Umsatzsteigerung
Nutzer lesen einen Artikel seltener, wenn die Seite lange lädt, verzögert auf ihre Interaktion reagiert oder das Layout instabil ist. Webseiten, die in allen drei Bereichen überzeugen, fesseln nicht nur die Aufmerksamkeit der Nutzer, sondern führen sie auch durch den Conversion-Funnel und generieren so letztendlich mehr Umsatz für das Unternehmen.
Im Wesentlichen sind CWV-Metriken mehr als nur Zahlen. Sie liefern Einblicke in die Performance einer Website aus Nutzersicht und ermöglichen es der Marke, Bereiche zu verbessern, die ihren Besuchern am wichtigsten sind.
So überprüfen Sie die Core Web Vitals-Werte einer WordPress-Website
Das Verständnis der CWV-Werte ist der erste Schritt zur Verbesserung der Website-Performance. Es gibt zwei Möglichkeiten, diese Werte zu messen: entweder intern mit den Google-eigenen Tools oder mit Unterstützung eines WordPress-Spezialisten, der Erfahrung in der Optimierung von Performance-Kennzahlen hat.
Für diejenigen, die sich für die interne Methode entscheiden, ist es wichtig zu verstehen, dass die Messung von CWVs die Verwendung einer Kombination aus Felddaten und Labordaten erfordert.
Felddaten sind tatsächliche Nutzererfahrungsdaten, die in realen Umgebungen erhoben werden. Diese Daten ermöglichen ein besseres Verständnis dafür, über verschiedene Geräte, Verbindungen und andere reale Bedingungen hinweg interagieren
Wenn Benutzer beispielsweise hauptsächlich über mobile Geräte in 3G-Netzen auf eine WordPress-Website zugreifen, können Felddaten Leistungsprobleme aufdecken, die in einer kontrollierten Laborumgebung möglicherweise nicht auftreten.
Labordaten hingegen werden in einer kontrollierten Umgebung generiert und dienen der Behebung von Leistungsproblemen. Sie bilden zwar nicht das gesamte Spektrum realer Nutzererfahrungen ab, liefern aber reproduzierbare Ergebnisse für die Fehlersuche und Optimierung der Website-Performance.
Durch den Einsatz eines Tools wie Lighthouse in einer Entwicklungsumgebung kann ein langsames Netzwerk simuliert werden , um Leistungsengpässe zu identifizieren.
Alle gängigen Entwicklertools von Google, von der Google Search Console (GSC) bis hin zu Google Analytics (GA), können CWV-Werte messen.
Quelle: Web.dev
Heute werden wir uns jedoch mit dem PageSpeed Insights- Tool von Google beschäftigen, und zwar aus dem einfachen Grund, dass es eines der einfachsten und umfassendsten Tools für den Einstieg ist.
Wie Sie FID und TBT mit PageSpeed Insights entdecken und verbessern können
Bis jetzt haben wir über die Eingabeverzögerung (First Input Delay, FID) als Mittel zur Messung der Reaktionsfähigkeit einer Website gesprochen, aber im nächsten Abschnitt werden wir uns tatsächlich sowohl mit der Eingabeverzögerung als auch mit der Gesamtblockierungszeit (Total Blocking Time, TBT) befassen.
Beide Kennzahlen messen die Interaktionen der Nutzer, und die Messung und Optimierung beider Kennzahlen kann sich positiv auf die Benutzerfreundlichkeit einer Website auswirken.
1. Was ist TBT und wie unterscheidet es sich von FID?
TBT (Time-to-Blocked Time) bezeichnet den Zeitraum, in dem eine Website so stark ausgelastet ist, dass sie nicht auf Nutzerinteraktionen wie Klicks auf Schaltflächen reagieren kann. TBT misst die Gesamtdauer, in der eine Webseite „blockiert“ ist – vergleichbar damit, als würde die Webseite sagen: „Moment, ich bin gerade beschäftigt“, während sie andere Aufgaben abarbeitet.
TBT ist eine im Labor erhobene Kennzahl, die zur Leistungsbewertung während der Entwicklungsphase verwendet wird, während FID eine im Feld erhobene Kennzahl ist, die Einblicke in die tatsächlichen Benutzererfahrungen ermöglicht.
In einem Szenario, in dem ein Benutzer auf einer Webseite auf eine Schaltfläche klickt, misst FID die Verzögerung zwischen der Aktion des Benutzers und der Reaktion der Webseite.
Diese beiden Kennzahlen stehen in engem Zusammenhang – wenn es einem Publisher gelingt, TBT während der Testphase zu optimieren, wird er wahrscheinlich auch unter realen Bedingungen einen positiven Einfluss auf die FID-Werte feststellen.
2. Wie man FID und TBT mit PageSpeed Insights misst
Um diese Metriken mit PageSpeed Insights zu messen, befolgen Sie diese Schritte:
- Navigieren Sie zum PageSpeed Insights- Tool
- Analysieren Sie die gewünschte Webseite
- Scrollen Sie, um die FID- und TBT-Werte des Standorts zu finden
3. Wie man die FID und TBT einer WordPress-Website verbessert
Die Verbesserung von FID und TBT beinhaltet die Optimierung der Reaktionsfähigkeit und Interaktivität einer Website. Hier einige Tipps:
- Komprimieren und optimieren Sie den CSS- und JavaScript-Code: Dies reduziert die Dateigröße und verbessert die Reaktionsfähigkeit der Website. Viele Tools, wie beispielsweise WPRocket, bieten eine Registerkarte zur Dateioptimierung, mit der der Code komprimiert werden kann. Dies kann zu einer deutlichen Verbesserung der FID- und TBT-Werte führen.
- Eliminieren Sie lange Aufgaben: Lange Aufgaben sind solche, die den Hauptthread für 50 Millisekunden oder länger blockieren. Durch die Aufteilung dieser langen Aufgaben in kleinere, asynchrone Aufgaben kann der Hauptthread entlastet und sowohl FID als auch TBT verbessert werden.
- JavaScript-Ausführung optimieren: Das Parsen, Kompilieren und Ausführen von JavaScript kann maßgeblich zu hohen FID- und TBT-Werten beitragen. Durch das Verzögern ungenutzten JavaScripts, das asynchrone Laden notwendiger großer Dateien, die Minimierung ungenutzter Polyfills und die Gewährleistung einer effizienten JavaScript-Ausführung lassen sich FID und TBT reduzieren.
- Nutzen Sie die Leistungseinstellungen Ihres WordPress-Themes: Viele WordPress-Themes verfügen über integrierte Leistungseinstellungen. Nutzen Sie diese Einstellungen optimal, um Ihre Website zu optimieren.
- Asset-Vor- und Nachladen: Techniken wie das verzögerte Laden von Bildern, das Aufschieben von nicht kritischem CSS, das Vorladen kritischer Assets und das Vorabrufen von Ressourcen von Drittanbietern können die TBT-Performance verbessern und in der Folge auch die FID steigern.
Profi-Tipp: Konzentrieren Sie sich bei der Optimierung auf die gesamte User Experience (UX) und nicht auf einzelne Kennzahlen. Dieser ganzheitliche Ansatz kann zu besseren Ergebnissen bei der Verbesserung der Website-Performance führen.
Die Verbesserung der FID-Werte ist ein komplexer Prozess, da er den Website-Code betrifft. Daher sollten Publisher zunächst die Ausführung von ressourcenintensivem JavaScript einschränken und unnötige JS-Dateien entfernen, damit der Browser schnell auf Nutzerinteraktionen reagieren kann.
Durch die Behebung der wichtigsten Probleme, die die Interaktivität einer WordPress-Website beeinflussen, können Herausgeber sowohl FID als auch TBT effektiv verbessern und so die Gesamt-UX und -Performance steigern.
Wie Sie mit PageSpeed Insights LCP entdecken und verbessern können
Schlechte LCP-Werte bedeuten, dass ein Besucher länger warten muss, bis die Inhalte erscheinen, was typischerweise zu höheren Absprungraten führt.
1. Was sind LCP-Elemente?
LCP bewertet die Zeit, die benötigt wird, um den Hauptinhalt einer Webseite zu laden: Je schneller dieser Inhalt auf dem Bildschirm erscheint, desto besser ist die Benutzerfreundlichkeit.
Die Hauptfaktoren für die LCP-Punktzahl sind überwiegend große Elemente wie Bildelemente, Videoelemente oder Elemente mit Hintergrundbildern, die über URL-Funktionen geladen werden.
Darüber hinaus spielen Blockelemente – wie Überschriften, Unterüberschriften und Tabellen – sowie blockbasierte Elemente wie Text eine wichtige Rolle bei der Gestaltung des LCP.
2. Wie man LCP mit PageSpeed Insights misst
Um den LCP-Score zu ermitteln, befolgen Sie diese Schritte:
- Navigieren Sie zu PageSpeed Insights.
- Analysieren Sie die gewünschte Webseite
- Scrollen Sie zum Abschnitt „Leistungsprobleme diagnostizieren“
- Stellen Sie die Option „Relevante Audits anzeigen“ auf LCP ein
- Die Nutzer können nun die relevanten Chancen und Diagnosen einsehen.
Publisher können das LCP-Element auch im PageSpeed Insights-Bericht identifizieren, indem sie die Empfehlung für das Element „Largest Contentful Paint“ im Abschnitt „Diagnostik“ suchen und diese für weitere Details erweitern.
3. Wie man die LCP einer WordPress-Website verbessert
Die Verbesserung des LCP umfasst mehrere Schritte, die jeweils zu einer schnelleren und reibungsloseren Website-Nutzung beitragen. Hier sind einige wichtige Strategien:
- Optimierung des LCP-Elements: Dieser Schritt hängt von der Art des LCP-Elements ab. Beispielsweise kann ein Bild im LCP-Element komprimiert werden (ohne Qualitätsverlust). Weitere Lösungen umfassen das Vorladen von Bildern oberhalb der Falz und Platzhalterbildern, das Ausliefern responsiver Bilder mithilfe von `srcset` abhängig von der Bildschirmgröße des Nutzers und das Vermeiden von verzögertem Laden von Bildern oberhalb der Falz.
- Server-Antwortzeiten verbessern: LCP misst die Zeitspanne vom Seitenaufruf eines Nutzers bis zum Empfang einer Serverantwort durch den Browser. Investitionen in ein hochwertigeres Webhosting-Paket, die Implementierung eines geeigneten Caching-Mechanismus auf Server- und Browserebene sowie der Umstieg auf ein leistungsstarkes CMS wie WordPress können die Server-Antwortzeiten verkürzen.
- Renderblockierende Elemente reduzieren: Renderblockierende Elemente wie HTML, Schriftarten und CSS sind statische Dateien, die der Browser verarbeitet, bevor er den Inhalt lädt. Weniger renderblockierende Elemente bedeuten, dass Browser weniger Zeit mit dem Rendern dieser Elemente verbringen, was die Ladezeiten verkürzt und die LCP-Werte verbessert. Beispielsweise können Webseitenbetreiber eine einfache Schriftart verwenden oder modulare Webfonts vorladen.
- Entfernen Sie ungenutzte Plugins: WordPress-Websites können Plugins verwenden, um viele technische Aspekte zu verwalten. Es ist jedoch wichtig, nur die Plugins und deren Funktionen beizubehalten, die direkt zur Funktionalität einer Website beitragen, und ungenutzte zu entfernen. Dadurch wird die Website übersichtlicher und der LCP-Wert verbessert.
Profi-Tipp: Caching ist ein effektives Verfahren, das den LCP-Wert deutlich verbessern kann. Implementieren Sie eine Caching-Lösung, die eine statische Kopie der Webseiten auf den Geräten der Besucher speichert. Dadurch entfällt das erneute Herunterladen derselben Daten bei jedem Seitenaufruf.
Es ist wichtig zu verstehen, dass LCP die mit Abstand am schwierigsten zu verbessernde CWV-Metrik darstellt. Dies liegt daran, dass LCP von TTFB (Time to First Byte) abhängt, welches wiederum von der Reaktionsgeschwindigkeit des Servers bestimmt wird. Je nach verwendetem Framework kann es schwierig sein, die Serverantwortzeit zu reduzieren.
Verlage müssen bedenken, dass das Verbesserungspotenzial je nach der verwendeten Infrastruktur variieren kann.
Durch die Fokussierung auf die Optimierung der Hauptinhaltselemente der Seite, die Verbesserung der Serverantwortzeiten, die Reduzierung der Blockierungszeiten von JavaScript und CSS sowie den umsichtigen Einsatz von Plugins können Publisher ihre LCP-Werte deutlich verbessern.
Wie Sie CLS mit PageSpeed Insights entdecken und verbessern können
Cumulative Layout Shift (CLS) misst die visuelle Stabilität und erfasst unerwartete Änderungen im visuellen Inhalt einer Webseite während des Ladevorgangs. Visuell instabile Webseiten können die Benutzerfreundlichkeit beeinträchtigen und zu höheren Absprungraten führen.
1. Was sind CLS-Elemente?
CLS misst die visuelle Stabilität. Zu den Elementen, die dazu beitragen, gehören solche, deren Positionen sich während des Seitenladens unerwartet ändern könnten. Dies können Bilder ohne festgelegte Abmessungen, Werbung, eingebettete Inhalte und iFrames ohne feste Abmessungen sein.
Grundsätzlich kann jedes Element, das sich während des Ladens der Seite bewegen kann, den CLS-Wert negativ beeinflussen.
2. So messen Sie CLS mit PageSpeed Insights
Mit PageSpeed Insights können Sie die CLS einer Webseite anhand dieser Schritte ermitteln und messen:
- Navigieren Sie zu PageSpeed Insights.
- Analysieren Sie die gewünschte Webseite
- Scrollen Sie zum Abschnitt „Leistungsprobleme diagnostizieren“
- Stellen Sie die Option „Relevante Audits anzeigen“ auf CLS ein
Dieser Ansatz ermöglicht es uns, die für Layoutverschiebungen verantwortlichen Elemente genau zu identifizieren und bietet somit einen Ausgangspunkt für Verbesserungen.
3. Wie man die CLS einer WordPress-Website verbessert
Die Verbesserung der CLS einer WordPress-Website umfasst strategische Schritte, die die visuelle Stabilität einer Seite deutlich verbessern können:
- Elementlayout bearbeiten: Überprüfen und passen Sie das Layout der Elemente an, um sicherzustellen, dass sie sich beim Laden der Seite nicht verschieben. Dazu müssen Sie die Breite und Höhe von Bildern und Videos festlegen und mithilfe eines Platzhalters statischen Platz für verzögert geladene Anzeigen oder iFrames reservieren.
- Verwenden Sie kritisches CSS oder entfernen Sie ungenutztes CSS: Ungenutztes CSS kann zu Layoutverschiebungen führen. Erwägen Sie die Implementierung von kritischem CSS, das nur die Stile enthält, die oberhalb der Falte verwendet werden, oder entfernen Sie redundante CSS-Codes, um unnötige Verschiebungen zu vermeiden. Das Einbetten kleinerer Stile und das Vorladen wichtiger Stile tragen ebenfalls zur Verbesserung des kritischen CSS bei.
- Vermeiden Sie Slider-Plugins: Slider können aufgrund ihrer dynamischen Natur Layoutverschiebungen auslösen. Verzichten Sie nach Möglichkeit darauf.
- Achten Sie auf die korrekte Größe von Bildern und Div-Elementen: Durch die korrekte Größenanpassung und die Verwendung responsiver Bilder mit demselben Seitenverhältnis verhindern Sie, dass sich Elemente beim Laden der Seite verschieben. Geben Sie die Größen dieser Elemente immer im Bild-CDN (Content Delivery Network) an.
- Verschieben Sie CSS aus dem Theme-Editor in die style.css des Child-Themes: Durch das Übertragen von CSS in ein Child-Theme können Layoutverschiebungen reduziert werden, da sichergestellt wird, dass die Stile korrekt geladen werden.
- Verwenden Sie Themes und Plugins, die Transformationsanimationen nutzen: Diese Tools haben im Vergleich zu anderen Animationsarten einen geringeren Einfluss auf Layoutverschiebungen.
Durch diese Anpassungen können WordPress-Website-Betreiber den CLS-Wert ihrer Seite erheblich senken, was zu einer stabileren und angenehmeren Benutzererfahrung führt.
Profi-Tipp: Implementieren Sie Lazy Loading für Bilder außerhalb des sichtbaren Bereichs. Dadurch werden Bilder erst geladen, wenn sie kurz vor dem Erreichen des sichtbaren Bereichs stehen, wodurch Layoutverschiebungen durch verspätet geladene Bilder vermieden werden.
Beachten Sie, dass der CLS eine wichtige nutzerzentrierte Kennzahl ist, die misst, inwieweit sich der Inhalt einer Website beim Laden verändert hat. Je niedriger der CLS-Wert, desto besser die Nutzererfahrung.
Um die CLS-Werte zu verbessern, ist letztendlich ein vielschichtiger Ansatz erforderlich. Regelmäßige Überprüfungen mit Tools wie PageSpeed Insights, einheitliche Layoutpraktiken und die sorgfältige Verwendung von Themes und Plugins tragen alle zu einem niedrigeren CLS-Wert und einer stabileren, benutzerfreundlicheren Website bei.
Zusammenfassung
Publisher, die Core Web Vitals (CWVs) messen, sind besser in der Lage, die Benutzerfreundlichkeit ihrer Websites zu optimieren.
Die Optimierung von CWVs verbessert nicht nur das Leseerlebnis erheblich, sondern trägt auch zur Suchmaschinenoptimierung bei. Seiten, die schnell laden, visuell stabil sind und zügig auf Nutzereingaben reagieren, sind nicht nur für Nutzer, sondern auch für Suchmaschinenalgorithmen attraktiv.
Neben dem Erlernen des Umgangs mit Tools wie PageSpeed Insights sollten Verlage auch die Trends im digitalen Verlagswesen , die Aktualisierungen der Suchmaschinenalgorithmen und die Erkenntnisse von Experten genau im Auge behalten, um ein erstklassiges Leseerlebnis zu bieten.
