Core Web Vitals & Pagespeed – der ultimative WordPress Guide

Die Core Web Vitals sind seit Juni 2021 offizieller Ranking-Faktor in der Google-Suche. Sie sollen dazu dienen, die Nutzererfahrung einer Webseite besser zu bewerten. Diese Daten sind allerdings sehr technisch und die Akronyme FID, CLS, LCP, etc. machen das ganze nicht einfacher. Außerdem findet man im deutschsprachigen Internet nur wenig über die Zusammensetzung der einzelnen Punkte oder gar wie man diese Schritt für Schritt verbessern kann. Die Hauptursachen für eine langsame Website liegen an langsamen Servern, Medien, Plugins, Skripten von Drittanbietern, das Nicht-Benutzen von CDNs und die Verwendung von schlechten Cache-Plugins. Mit unserem Guide erhalten Sie einen Erfahrungsbericht und erfahren die größten Hebel, um die Core Web Vitals und den Pagespeed nachhaltig zu verbessern. Dazu haben wir die Unternehmenswebseite von SEO Bavaria optimiert – am Ende erfahren Sie, was es im Detail gebracht hat.

Unser Ausgangspunkt war ein Core Web Vitals Score von 50 und Mobil-Score von 40, was einen eher durchschnittlichen Ladezeit-Score bedeutet – getestet haben wir mit dem Lighthouse Tool (ohne FID, dafür mit TBT (Total Blocking Time)) in den Developer Tools sowie mit dem Webpagetest und den PageSpeed Insights (kombiniert Feld-, also User-Daten und reproduzierbare Labor-Daten). 

Warum sind die Core Web Vitals & Pagespeed so wichtig?

“Die Wahrheit ist, dass niemand eine langsam ladende Website mag, einschließlich Google.” 

Dieser Satz schließt nicht nur die Ladezeit ein, sondern auch die Core Web Vitals kommen hier ins Spiel. Denn selbst, wenn Ihre Website schnell lädt, kann es sein, dass sie nicht voll funktionsfähig ist, d.h., dass Nutzer nicht das tun können, was sie tun wollen oder nicht auf die Informationen zugreifen können, die sie benötigen. Und genau das messen die Core Web Vitals. Eine Verzögerung von 1 Sekunde bei der Seitenladezeit kann bis zu 7% Verlusten bei den Conversion, 11% weniger Seitenaufrufen und 16% weniger Kundenzufriedenheit führen.

Was sind die Core Web Vitals im Detail?

• Largest Contentful Paint (LCP): Der LCP misst, wie lange das größte Elemente einer Webseite zum Laden braucht (ohne Scrollen, nur sichtbarer Bereich der Webseite). Google gibt als Richtwert 2,5 Sekunden an. Der LCP zeigt nicht die reine Ladezeit, sondern vielmehr den Moment, in dem die Seite durch entsprechende Inhaltselemente für den User nutzbar ist.

• First Input Delay (FID): Der FID misst, wie lange eine Webseite braucht, um auf die erste Interaktion eines Nutzers (Mausklick, Scrollen, etc.) zu reagieren. Google gibt einen “guten” FID-Richtwert mit <100ms an. Da sich dies häufig nur mit Felddaten messen lässt, empfiehlt Google zum Testen den TBT-Wert als Alternative, der einen ähnlichen Ansatz verfolgt.

• Cumulative Layout Shift (CLS): Der CLS misst, wie sehr sich das Seitenlayout während des Ladens verschiebt. Das führt zu einer schlechten User Experience. CLS soll die visuelle Stabilität einer Webseite bewerten.

Wie kann man den Largest Contentful Paint verbessern?

Für die Optimierung des Largest Contentful Paint kommen wie so oft sehr viele Möglichkeiten infrage. Der größte Hebel hier sind Bilder. Man kann zum Beispiel prüfen, ob  Bilder auch kleiner bereitgestellt werden können. Auch bessere Kompressionsraten durch das Format webp können helfen. Ebenfalls kann die Verwendung von LazyLoad hilfreich sein sowie das Vermeiden/Reduzieren von renderblockierenden JS- und CSS-Dateien.

Wie kann ich den First Input Delay optimieren?

Häufig liegt schlechten FID-Werten die Übernutzung von JavaScript zu Grunde. Deshalb ist es wichtig, unnötiges JS aus dem Quellcode zu entfernen. Bei anderen Skripten kann die Komprimierung / Minifizierung helfen. SEOs können darauf achten, nicht zu viele Third-Party-Inhalte (Tracking-Pixel o.ä.) einzubauen, da diese auf Dauer auch verlangsamen. Zudem sollten unbenutzte Plugins gelöscht werden oder es kann helfen, eigene Skripte für bestimmte Plugins zu schreiben.

Wie kann ich den Cumulative Layout Shift optimieren?

Wichtig zu wissen ist, dass viele Elemente nachträgliche Verschiebungen hervorrufen können. Dies können beispielsweise Animationen, Banner, Cookie-Hinweise oder auch Bilder sein. Nicht vergessen werden darf, immer width- und height-Attribute bei Elementen anzugeben, um dem Browser bereits beim Laden den benötigten Platz für das Element aufzuzeigen.

Technische Pagespeed-Optimierungen anhand unserer WordPress-Webseite

Es ist wichtig, dass die Website von einem geeigneten, schnellen Server gehostet wird, um optimale Ladezeit-Ergebnisse zu erreichen. Die optimale Server Antwortzeit liegt unter 200 ms. Ein Wechsel kann sich also lohnen. Wir haben als Hoster Webgo verwendet.

Deaktivieren oder Entfernen nicht verwendeter Plugins

Zu viele Plugins können die Website verlangsamen. Behalten Sie nur die wichtigsten Plugins und löschen Sie die, die nicht benötigt werden. In unserem Beispiel wurden alle Plugins außer dem Page Builder Plugin, dem Übersetzungs-Plugin und dem SEO-Plugin deaktiviert. Den Rest haben wir über selbst verfasste Skripte gesteuert. 

Den Elementor Page Builder optimieren

Der Elementor fügt eine Fülle von DOM-Elementen (CSS, JS usw.) ein, was sich teilweise negativ auf die Ladezeit auswirkt. Um die Größe der DOM-Elemente zu reduzieren, haben wir im Elementor unter -> Einstellungen -> Experiments -> Optimierte DOM-Ausgabe, verbessertes Asset-Laden und verbessertes CSS-Laden aus dem Dropdown-Menü ausgewählt. Auch haben wir die Elementor-Standardschriftarten unter Einstellungen -> Allgemein deaktiviert und ein Skript dafür in der functions.php des Child Themes ergänzt. 

PHP-Version und WordPress aktualisieren

Des Weiteren ist es uns wichtig, unsere PHP- und WordPress-Version immer auf dem neuesten Stand zu halten. Das hat nicht nur Sicherheitsaspekte, auch stellen wir damit sicher, dass die Ladezeit nicht negativ beeinflusst wird durch alte Versionen.

Optimierungs-Plugin WP-Rocket konfigurieren 

WP Rocket ist für uns eines der besten Cache-Plugins zur Ladezeit-Verbesserung. Im weiteren Verlauf dieses Leitfadens werden wir uns ansehen, wie wir es konfiguriert haben, um ein sehr gutes Ergebnis zu erzielen.

Mobile Cache – aktiviert das Caching für mobile Geräte. Aktivieren Sie „separate Cache-Dateien für mobile Geräte“ nur, wenn Sie ein Plugin für Ihre mobile Website verwenden (wie die kostenlose Version von WP Touch). Der Rest der Optionen bleibt unverändert.

CSS-Dateien verkleinern – aktiviert die Verkleinerung, wodurch Leerzeichen aus dem Code entfernt werden. Optimize CSS Delivery – lädt nur kritische CSS-Dateien, die für die Seite benötigt werden.

JavaScript-Dateien minifizieren – aktiviert die Minifizierung, bei der Leerzeichen aus dem Code entfernt werden.

JavaScript-Ausführung verzögern – verzögert das Laden von JavaScript bis zur Benutzerinteraktion. Allein diese Funktion hat die Ladezeit um etwa 3 Sekunden reduziert, da alle Skripte verzögert werden. Hierbei kann man eigene Skripte ausschließen, um noch mehr herauszuholen.

Aktivieren Sie alles außer dem WebP-Caching. Wenn Sie ein WebP-Plugin verwenden, stellt es in der Regel bereits WebP-Bilder bereit. Wenn Sie YouTube-Videos einbetten, kann das Ersetzen von YouTube-iframes durch ein Vorschaubild die Ladezeiten Ihres Videos oft um die Hälfte verkürzen.

Lazy Load – verzögert das Laden von Bildern, Iframes und Videos, bis Sie auf der Seite nach unten scrollen und sie sichtbar werden.

Neben diesen Einstellungen haben wir noch WordPress Embeds deaktiviert – es verhindert, dass andere Websites unseren Inhalt auf ihrer Website einbetten, was Bandbreite verbraucht und den Server belastet. Außerdem fügt WP Rocket fehlende Breiten- und Höhenattribute zu HTML-Bildern hinzu, was die Verwendung expliziter Breiten- und Höhenangaben für Bildelemente in PageSpeed Insights beheben sollte.

Durch die Aktivierung von Preloading, was den Browser anweist, erst mit dem Abrufen von Ressourcen zu beginnen, sobald sie benötigt werden, konnten wir auch einige Millisekunden sparen. Das Vorladen haben wir ebenso bei den Fonts aktiviert. Außerdem haben wir auch bei Links das Preloading aktiviert, was dafür sorgt, dass der HTML-Code einer Seite im Hintergrund geladen wird, wenn ein Nutzer 100 ms oder länger über einem Link verweilt oder ihn berührt, so dass die Seite sofort geladen wird, wenn der Nutzer tatsächlich auf den Link klickt. Durch das Prefetching von DNS Requests, wird dem Browser geholfen, Anfragen schneller zu laden.

CloudFlare-Zusatzmodul aktivieren

Nachdem Sie ein Cloudflare-Konto eingerichtet haben, können Sie es in WP-Rocket integrieren. Aktivieren Sie das Add-on und klicken Sie auf Optionen ändern, kopieren Sie den globalen API-Schlüssel und die Zone-ID aus dem Cloudflare-Konto und fügen Sie das E-Mail-Konto, mit dem Sie sich bei Cloudflare registriert haben, in die Kontomail ein.

Bilder optimieren mit Imagify

Wenn es um Pagespeed geht, nehmen Bilder eine große Rolle ein, daher ist es wichtig, besonderes Augenmerk auf sie zu legen. Es gibt zwei Möglichkeiten, Bilder zu optimieren, zum einen manuell durch Verkleinerung der Bilder und Konvertierung in WebP, zum anderen mit Hilfe von Plugins wie Imagify. Für unsere SEO Bavaria Website haben wir Imagify verwendet, um unsere Bilder zu optimieren. Dieses Plugin ist kein “Muss”, die Umwandlung in WebP ist auch mit WP Rocket möglich. 

CDN verwenden

CDNs sind ideal, wenn Sie Besucher haben, die weit von Ihrem Ursprungsserver entfernt sind. Sie spiegeln Ihre Website in mehreren Datenzentren, wodurch die geografische Entfernung zwischen Ihrem Server und den Besuchern verringert wird. In unserem Beispiel wurde Cloudflare verwendet. 

Fazit:

WordPress gehört zu den Sorgenkindern, wenn es um Ladezeit geht. Mit einigen technischen Umsetzungen kann man sich aber die Vorteile von WordPress, wie die intuitive Bedienung, zu Nutze machen und gleichzeitig eine schnelle Webseite besitzen. Mit der vorgestellten Anleitung und den angewendeten Tools haben wir unseren Core Web Vital Performance Score von 50 auf 92 angehoben.

Sollten Sie bei der technischen Umsetzung dennoch Probleme haben, melden Sie sich gerne bei uns und vereinbaren Sie einen Termin, um Ihrer Webseite den ultimativen Pagespeed-Push zu geben!