Wie kann man Core Web Virtuals auf WordPress-Sites verbessern?

Warum ist Geschwindigkeit im digitalen Marketing wichtig? Benutzer, die schnellere Renderzeiten erleben, bleiben eher auf der Seite und surfen herum. Dies wiederum kann sich positiv auf Ihr gesamtes SERP-Ranking auswirken. Darüber hinaus wird die Zeit, die eine Webseite benötigt, um den ersten Anzeigebereich darzustellen, für Suchmaschinen immer interessanter. Tatsächlich hängt fast die Hälfte aller Google-Ranking-Faktoren direkt mit der Verbesserung der Benutzererfahrung zusammen. Suchmaschinen sind dafür bekannt, bestimmte Ranking-Faktoren zu betonen, darunter mehrere Aspekte des Ladens, bekannt als Core Web Vitals (CWV). Abgesehen davon, dass es sich direkt auf das Ranking auswirkt, beeinflusst Ihre Seitenerfahrung wahrscheinlich auch, wie engagiert die Benutzer beim Surfen in Ihren Inhalten sein werden und wie wahrscheinlich es ist, dass sie darauf zurückkommen.

Drei Komponenten von Core Web Vitals

Die Algorithmen von Google ändern sich ständig, um qualitativ hochwertige, benutzerfreundliche Websites zu fördern und diejenigen herunterzustufen, die ihren Qualitätsstandards nicht entsprechen. Ein Teil dieser Algorithmen sind die zentralen Web-Vitals, die bei der jüngsten Einführung einer Vielzahl von Updates eine wichtige Rolle spielen. Googles Ziel mit CWV ist es, Entwickler zu ermutigen, sich bei der Optimierung der Leistung ihrer Website mehr auf die Benutzererfahrung zu konzentrieren.

Größter Contentful Paint, First Input Delay, Cumulative Layout Shift – das sind die drei Komponenten von Core Web Vitals.

• Largest Contentful Paint – Der Largest Contentful Paint (LCP) ist ein wichtiges Kriterium, da die visuelle Wahrnehmung einer Website stark von der Ladegeschwindigkeit des größten Bildschirmelements beeinflusst wird. Die Zeit zwischen dem Laden von DOM-Inhalten und dem Moment, in dem der Benutzer etwas auf seinem Bildschirm sieht – ein großes Bild oder einen Textblock – ist die CPL oder Contentful Paint Latency. Es ist im Wesentlichen die Zeit, die zwischen dem Klick eines Benutzers (z. B. zum Laden einer Seite) und dem Moment, in dem er einen Inhalt sieht, vergeht. Wenn Ihr Contentful Paint länger als 4 Sekunden dauert, könnte sich das negativ auf Ihren SEO-Score auswirken.
• Erste Eingabeverzögerung – Die erste Eingabeverzögerung gibt an, wie lange eine Seite auf Ihre Eingabe reagiert, nachdem Sie auf etwas geklickt haben. Der FID wird normalerweise in Millisekunden (ms) gemessen. Wenn ein Benutzer beispielsweise auf ein Websiteelement klickt und darauf wartet, dass der Bildschirm mit neuen Informationen aktualisiert wird, verarbeitet der Browser diese Aktion und liefert ein Ergebnis. Je kürzer die FID, desto schneller können Benutzer mit der Navigation auf Ihrer Seite beginnen, wo Sie sie länger halten und Ihre Conversions steigern können. Google stellte klar, dass es eine erste Eingabeverzögerung von 100 ms für eine hervorragende Punktzahl und 300 ms für eine schlechte Punktzahl tolerieren würde.
• Kumulative Layoutverschiebung – Haben Sie schon einmal eine Seite nach unten gescrollt und plötzlich bemerkt, dass sich beim Scrollen ein großer Teil der Seite nach oben verschoben hat? Cumulative Layout Shift (CLS) ist, wenn sich Inhalt auf der Seite bewegt, nachdem er gemalt wurde. Das Ergebnis ist, dass Ihr Benutzer den Inhalt Ihrer Seite verstehen und neu analysieren muss, insbesondere wenn viel Text vorhanden ist. Ein ausreichender kumulativer Layout-Shift-Score liegt unter 0,1 und ein schlechter unter 0,25.

Wie misst man Core Web Vitals auf WordPress-Sites?

Um Ihre wichtigsten Web-Vitals für WordPress-Websites zu optimieren und sicherzustellen, dass Ihre Website auf einem maximalen Effizienzniveau läuft, ist es wichtig, alle notwendigen Tools zum Überwachen, Verfolgen und Analysieren der wichtigen Datenpunkte zu haben.

Google Search Console

Nach der Messung der tatsächlichen Benutzerdaten generiert die Search Console CWV-Berichte mit der Anzahl der Seiten, auf denen die Probleme gefunden wurden, getrennt für die Desktop- und mobile Version der Website. Es umfasst die URL-Leistung basierend auf ihrem Status (Schlecht, Verbesserungsbedürftig, Gut), zentrale Web-Vitals (CLS, FID, LCP) und Gruppen ähnlicher Seiten. Es ist auch wichtig zu beachten, dass eine URL, die nicht über genügend Berichtsdaten für einen bestimmten Messwert verfügt, nicht in den Bericht aufgenommen wird.

PageSpeed-Einblicke

Gleichzeitig können Sie mit PageSpeed ​​Insights Ihre Website aus der Perspektive von Google-Crawlern und -Benutzern betrachten, eine Analyse der Probleme Ihrer Seite bereitstellen und Vorschläge zur Verbesserung der Leistung machen. Mit dem Bericht können Sie besser verstehen, welche Ressourcen zu erhöhten Ladezeiten beitragen. Sie erhalten außerdem einen Bericht, der wichtige Einblicke in die Seite bietet und Sie darüber informiert, wie Sie die erforderlichen Änderungen vornehmen können.

SE-Ranking

Neben den oben genannten Tools bietet Website Audit by SE Ranking auch einen zentralen Web-Vitals-Bereich separat für Desktop- und Mobilversionen. Dieses Tool kann für SEO-Spezialisten noch informativer sein, da es mögliche technische Probleme auf Ihrer Website erkennt. Basierend auf den Audit-Ergebnissen liefert das Tool den Gesamtzustand der Website und eine Liste der Probleme, die sich auf die Leistung auswirken, mit detaillierten Beschreibungen und Tipps zu deren Lösung.

Die häufigsten Probleme mit Core Web Vitals und wie man sie behebt

1- Der Server ist zu langsam

Es ist wichtig, sich daran zu erinnern, dass nicht alle WordPress-Websites gleich erstellt werden. Dies kann dazu führen, dass einige Websites langsamer als andere mit identischen Einstellungen ausgeführt werden. Der Grund dafür ist, dass viele Faktoren die Geschwindigkeit des Servers beeinflussen können: die Anzahl der installierten Plugins, die Menge an Skripten und CSS, der Serverstandort usw.

Es gibt jedoch Hostings, die speziell für WordPress-Websites optimiert sind. Sie haben normalerweise eine schnellere Ladegeschwindigkeit aufgrund von Caching-Software und können mit vielen Besuchern umgehen. Ein solches Hosting kann viele technische Probleme bewältigen und verfügt über viele vorinstallierte Plugins. Sie können also einfach eine oder mehrere Websites erstellen und das WP-Hosting alle technischen Dinge für Sie erledigen lassen.

2- Große Bilder und Videos

Wenn Sie an einer Website arbeiten und es an der Zeit ist, einen zentralen Web-Vitals-Test durchzuführen, werden Sie wahrscheinlich einige Probleme im Zusammenhang mit Bildern und Videos feststellen. Die zugrunde liegende Ursache für eine langsame Seitengeschwindigkeit sind zu schwere Bilder und Videos. Die uralte Klischeefrage „Wie viele Megabyte sind zu viel“ ist in letzter Zeit sicherlich in der Welt der Core-Web-Vitals aufgetaucht. Genauer gesagt stellt sich die Frage, wie Sie die Verwendung von Bildern, Videos und anderen großen Dateien auf Ihrer Website optimieren sollten.

Die Faustregel lautet, eine primäre Bild- und Videogröße zu haben und dann die Breiten- und Höhenattribute in Ihre Bilder und Videoelemente aufzunehmen. Es ist oft besser, Ihre Bilder vor dem Hochladen auf eine bestimmte Breite anzupassen und ein neues Bildelement zu erstellen, das bestimmte Bereiche wie Hintergründe, unnötigen Text usw. abschneidet. Es gibt viele kostenlose Bildbearbeitungsanwendungen online, mit denen Sie Fotos zuschneiden und in der Größe ändern können . Das Problem bei der Anzeige größerer Bilder ist die größere Downloadgröße und Bandbreite, die benötigt wird, um sie anzuzeigen.

Dasselbe gilt für Videos – das Voranpassen des Videos kann die Seitengeschwindigkeit erheblich verbessern, da der Browser keine Verkleinerung benötigt – das Video kann in normaler Größe abgespielt werden. Da native Videos schwer sind, können Sie sie außerdem durch Youtube-Einbettungen ersetzen, was die Website erheblich beschleunigt.

Die Verwendung von Lazy Loading ist eine weitere großartige Möglichkeit, die Seitengeschwindigkeit zu verbessern, ohne die Benutzererfahrung zu beeinträchtigen. Lazy Loading ist eine Technik, bei der Bilder nur dann geladen werden, wenn sie in das Ansichtsfenster (oder den Bildschirmbereich) gelangen. Dieser Ansatz bewirkt, dass Bilder beim Scrollen nach und nach geladen werden, wodurch die Seitengeschwindigkeit erhöht wird. Der beste Teil? Es ist elementar, mit WordPress Lazy-Loading-Plugins wie Lazy Load zu implementieren. Dies wird die Benutzererfahrung erheblich verbessern. Benutzer müssen nicht warten, bis die Seite geladen ist. Nach ein paar Scrolls werden die Bilder von selbst geladen.

3- Nicht optimierter Code

Nicht optimierter Code kann Ihren zentralen Web-Vitals-Score wie First Contentful Paint und Ihre Benutzererfahrung beeinträchtigen. Der größte Schuldige hier ist in erster Linie JavaScript. Denn es muss heruntergeladen und ausgeführt werden, nachdem die Seite geladen wurde. (JavaScript kommt vor HTML, wodurch das Laden der Seite blockiert wird). Dies kann leicht zu einem eingefrorenen Bildschirm für mehrere Sekunden führen, insbesondere wenn die Verbindung des Benutzers nicht schnell ist. Wenn JavaScript nicht optimiert ist, riskieren Sie daher, dass Ihre Website Leistungspunkte verliert. Um sicherzustellen, dass das Laden der Seite nicht blockiert wird, bis das JavaScript geladen wurde, können Sie async- und defer-Tags verwenden. Außerdem ist es eine gute Praxis, unnötige Elemente aus Ihren Codedateien zu entfernen.

Codeverkleinerung entfernt unnötige Kommentare, Leerzeichen und Zeilenumbrüche aus dem Code. Dies kann Ihnen helfen, die Größe Ihrer Datei zu reduzieren, was zu schnelleren Downloadzeiten in den Browsern Ihrer Besucher führt. Dafür gibt es zwei Gründe. Erstens beschleunigt es das Herunterladen für Ihre Besucher. Zweitens wird es kleiner, sodass weniger Serverressourcen verwendet werden. Einige Dateien, die Sie leicht verkleinern können, umfassen <style>- und <script>-Dateien. Sie können sich selbst testen, indem Sie eine Datei vor und nach der Optimierung vergleichen. Bei Stylesheets oder JavaScript-Dateien sind die Ergebnisse möglicherweise nicht sehr auffällig. Das liegt daran, dass CSS- und JS-Komprimierungstools wie YUI Compressor, Minify usw. diese Dateitypen weitaus besser optimieren als Minifizierungs-Plugins.

Das DOM (Document Object Model) ist die Hierarchie aller Elemente in einem Dokument. Das DOM besteht aus HTML-Tags, denen CSS-Stile und JavaScript zugeordnet sind. Da die Anzahl der Elemente ziemlich hoch sein kann, wird Ihre Seite groß. Dies kann zu Leistungsproblemen führen, wenn Sie die Seite auf Mobilgeräten bereitstellen. Daher ist es wichtig, die Anzahl der Elemente zu minimieren und ihre Platzierung in Ihrem Dokument zu optimieren.

4- Layoutverschiebungen

Eine Layoutverschiebung ist ein Phänomen, das auftritt, wenn die Größe des Browserfensters Ihres Besuchers geändert wird. Und Elemente Ihrer Website, wie Bilder, Schriftarten und Farben, lockern sich auf oder verändern ihre Position. Dies erschwert es den Lesern, sich auf das zu konzentrieren, was Sie zu präsentieren versuchen. Der Layout Shift Score ist ein Score, der verfolgt, wie stark Ihre Website von Layoutänderungen auf verschiedenen Geräten betroffen ist. Es ist eine ziemlich große Sache, wenn es um Ansichtsfenster geht. Denn wenn sich Ihre Designs zu stark verschieben, könnten Sie Besucher und Conversions verlieren. Layoutverschiebungen zu minimieren und so weit wie möglich zu optimieren, führt zu weniger Abwanderung und letztendlich zu mehr Seitenaufrufen.

Darüber hinaus können sich erhebliche Layoutverschiebungen negativ auf Ihre SEO-Bemühungen auswirken. Das Entwerfen eines großen Layouts kann jedoch schwierig zu warten sein. Dies liegt daran, dass Sie die Website nicht speziell mit einem responsiven Design gestaltet haben. Das Layout muss also angepasst werden, damit es für alle Geräte passt. Dies regelmäßig zu tun, kann zeitaufwändig sein. Es erfordert Beharrlichkeit und Konsistenz, um erfolgreich zu sein, ohne Kompromisse bei Qualität oder Funktionalität einzugehen. Deshalb ist die beste Lösung, das Design Ihrer Website responsive zu gestalten. Responsive Bildschirme passen ihre Größe entsprechend der Bildschirmgröße an, auf der sie angezeigt werden. Die Implementierung reaktionsschneller Bildschirme bedeutet, dass sich Ihre Website anpasst, ohne langsamer zu werden oder abzustürzen.

5- Caching-Problem

Beim Erstellen einer Webressource werden für verschiedene Ressourcen unterschiedliche Caching-Richtlinien verwendet. Caching-Richtlinien definieren, wie jede Ressource zwischengespeichert wird, und stellen Informationen darüber bereit, wie lange die Ressourcen zwischengespeichert werden sollen. Sie müssen diese Richtlinien einrichten. Damit Webressourcen wiederverwendet werden können, ohne sie jedes Mal neu erstellen zu müssen, wenn Benutzer darauf zugreifen. Um die Leistung zu verbessern, ist es wichtig sicherzustellen, dass Ihre Server keine Zeit damit verschwenden, bereits erstellte Ressourcen zu erstellen. Mithilfe der serverseitigen Skripttechnologie können Sie diese Richtlinie nutzen. Stellen Sie sicher, dass lebenswichtige Ressourcen niemals neu erstellt werden, es sei denn, es hat sich etwas an ihnen geändert.

Signed Exchange (SXG) ist eine neue Initiative, die das Prefetching von Inhalten aus dem Internet unter Wahrung der Privatsphäre ermöglicht. Ein signierter Austausch enthält eine Spezifikation dafür, welche Ressourcen eine Website vorab abrufen möchte. Stellen Sie außerdem sicher, dass diese Ressourcen sicher abgerufen werden (ohne private Informationen preiszugeben). Das Binärformat des signierten Austauschs ist ein Asset-Transfer-Format. Dies bedeutet, dass der Inhalt über HTTPS mit einem zusätzlichen angehängten Header übertragen wird. Dies ist eine aufregende neue Möglichkeit, der Google-Suche zu ermöglichen, die Leistung beim Laden von Seiten zu verbessern. Besonders auf AMP-Seiten oder jeder anderen Art von Seite, die auf externe Ressourcen angewiesen ist.

Abschluss

Core Web Vitals sind drei von Google entwickelte Metriken, die die Erfahrung eines Benutzers beim Laden einer Webseite bewerten. Die drei wichtigsten Web-Vitals sind entscheidend, um zu verstehen, wie schnell eine Seite geladen wird. Wie schnell der Browser auf Benutzereingaben reagiert und wie instabil der Inhalt ist, wenn er im Browser geladen wird. Langsame Ladezeiten wirken sich darauf aus, ob Besucher auf Ihrer Website bleiben oder nicht. Sie könnten die Website ganz verlassen oder weniger Zeit damit verbringen, sich mit Ihren Inhalten auf der Website zu beschäftigen.