Zuletzt aktualisiert am 25. Dezember 2023 von Lars
Als Websitebetreiber hat man es wirklich nicht immer leicht. Damit man überhaupt im Internet-Dschungel gefunden wird, gilt es, sich gemäss den Ideen des Suchmaschinen-Riesen Google zu verhalten. Dieser ändert fortlaufend den Algorithmus, nachdem die Suchergebnisse berechnet werden.
Schon lange gilt Mobile First Index. Google bewertet also eine Website nach den Informationen, die auf der mobilen Version der Website zu finden sind. Dann kam die Ladezeit als Ranking-Faktor hinzu. Dank Google E-A-T (Expertise, Authority und Trustworthiness) geht nun nichts mehr ohne Autorenboxen.
Nun sollen im März 2021 Websites, die auf mobilen Geräten nicht richtig dargestellt werden, komplett aus dem Index fliegen. Wie genau das ablaufen soll, ist mir auch nach Durchsicht einiger Blog-Artikel noch nicht wirklich klar geworden. Auf irgendeinem Whitepaper von Google ist das bestimmt zu finden.
Doch dieser Artikel soll sich um die WordPress-Optimierung, die Core Web Vitals und meine Erfahrungen damit drehen. Auch die Core Web Vitals werden 2021 Rankingfaktor. Das von mir verwendete CMS ist WordPress und daher dreht es sich hier auch fast ausschliesslich um die Core Web Vitals in Kombination mit WordPress.
tl;dr - Zusammenfassung des Artikels
- Google passt seine Suchalgorithmen ständig an.
- Da die meisten Websites ihren Traffic über Google bekommen dürften, kann man je nach Wichtigkeit diese Änderung nicht vernachlässigen.
- Das Suchranking setzt sich aus mehreren Faktoren zusammen, die zusammen spielen. Die Geschwindigkeit ist auf jeden Fall nur eine davon. Eine superschnelle Website, die ansonsten in kaum einem anderen Kriterium hohe Werte erreicht, wird daher nicht wirklich ranken.
- Die Ladezeit ist schon länger Suchkriterium.
- Neu kommen die Core Web Vitals hinzu. Sie bestehen aus drei Teilwerten:
- Largest Contentful Paint (LCP): Dauer, bis der Inhalt deiner Website geladen ist.
- First Input Delay (FID): Zeit von der ersten Interaktion eines Besuchers deiner Website bis zu dem Zeitpunkt, bis der Browser auf diese Interaktion reagiert.
- Cumulative Layout Shift (CLS): Wert, der die Stabilität einer Website angibt. Nach Google sollte sich beim Laden einer Website das Layout nicht verschieben.
- Auch die Core Web Vitals werden inzwischen im Analyse-Tool Google PageSpeed Insights angezeigt. Im oberen Bereich werden aber die Durchschnittswerte der gesamten Website angegeben. Die eigentlichen Messwerte stehen weiter unten.
- Beim Testen und Optimieren mit PageSpeed und anderen Speed-Tool muss man beachten, dass man nach Änderungen an der Website auch den Cache von WordPress leert und mindestens eine zweite Messung machen, damit man die Werte aus dem Cache erhält.
- Weitere Messungen sind ebenfalls sinnvoll, da die Messungen auch bei kurz hintereinander folgenden Messungen zumindest leicht verschiedene Werte liefern.
- Die von PageSpeed Insights angegebenen Tipps und Verbesserungsvorschläge machen in der Regel Sinn und sollten bestmöglich beachtet werden. Allerdings wird man mit WordPress kaum (oder sogar nie) eine Website hinbekommen, die sowohl in der mobilen Ansicht als auch in der Desktopansicht auf 100 Punkte kommt. Es lohnt sich auch mal einen Blick auf ein anderes Tool. Mir gefällt GiftOfSpeed sehr gut.
- WordPress ist für viele User eine Art "Blackbox" und wird nur über Themes und Plugins konfiguriert. Was diese intern bewirken, bleibt oft unklar. Um das zu ändern, muss man sich schon sehr viel Know-How aneignen und auch selber coden können.
- Generelle Tipps zur Performance-Optimierung von WordPress:
- Bilder komprimiert und in der richtigen Grösse ausliefern.
- Einsatz eines Caching-Plugins.
- Plugins auf ein Minimum reduzieren.
- Laden von externen Ressourcen vermeiden.
- Einsatz eines schnelleren Themes.
- Linktipp zum Thema: 11 Ladezeit-Tipps für eine bessere Website-Performance und Ladezeiten-Optimierung nur mit WordPress Plugins
- Probleme bei der Performance-Optimierung:
- Für Nachvollziehbarkeit sorgen, alle Änderungen dokumentieren.
- Nicht zu viele Optimierungs-Plugins einsetzen, viele arbeiten mit den gleichen Funktionen und können sich negativ beeinflussen.
- Bei mir funktioniert die Kombination LiteSpeed Cache (Cacheplugin, setzt aber spezielle LiteSpeed Server beim Webhoster voraus) und Autoptimize ganz gut.
- Ausführlich mit den Dokumentationen zu den Plugins auseinandersetzen.
- Notfalls zurück an den Anfang, gegebenenfalls mit Test-Website ohne Plugins von Anfang an alles noch einmal sauber durchtesten.
- Tipps zur Core Web Vitals Optimierung von WordPress:
- Sticky Menüs, also Menüs, die am oberen Bildschirmrand beim Scrollen verbleiben, deaktivieren. Diese erhöhen den CLS-Wert.
- Auch andere Elemente, die das Layout verändern, deaktivieren.
- Bei der Verwendung von externen Elementen, wie zum Beispiel Google Fonts, diese zum Beispiel zwischenspeichern oder preloaden.
- Auch andere Speedtest nutzen, mir gefällt GiftOfSpeed sehr gut.
- Tolle Website zum Thema: Optimierung der Google Core Web Vitals Werte – Beispiele, Tipps und Empfehlungen
Was sind die Core Web Vitals?
Über die Core Web Vitals wurde schon viel geschrieben, daher werde ich hier nur recht knapp im Allgemeinen darauf eingehen.
Die Core Web Vitals bestehen aus 3 Werten:
Largest Contentful Paint (LCP)
LCP ist die Dauer, bis der Inhalt deiner Website geladen ist. Google wünscht sich hier 2.5 Sekunden oder schneller.
First Input Delay (FID)
FID misst die Zeit von der ersten Interaktion eines Besuchers deiner Website bis zu dem Zeitpunkt, bis der Browser auf diese Interaktion reagiert. Google wünscht sich hier einen Wert von 100 Millisekunden oder kleiner.
Cumulative Layout Shift (CLS)
Manchmal verschieben sich beim Laden einer Website einzelne Elemente im Layout einer Website noch. Das ist für den Benutzer verwirrend. Er kann dann zum Beispiel passieren, dass ein Benutzer ein Element einer Website anklickt, was dann aber an einer anderen Stelle geladen wird. CLS misst, wie stabil das Layout einer Webseite ist. Google wünscht sich hier einen Wert von 0.1 oder kleiner.
Die Core Web Vitals drehen sich also zum einen auch um die Geschwindigkeit, aber auch um den sauberen Aufbau einer Website.
Wie sind (waren) die Core Web Vitals Werte bei mir?
Die Core Web Vitals werden auch im PageSpeed Tool von Google PageSpeed Insights angezeigt.
Und dass sieht bei mir so aus:
Für Mobile und Desktop ist das Ergebnis unterschiedlich. Durch Klick in die blaue Leiste kann man zwischen Mobile und Desktop umschalten.
Missverständnis Nummer 1
Ich habe mir zunächst immer die Werte unter Origin Summary angeschaut (erste rote Box). Diese Werte sind aber die Durchschnittswerte der gesamten Website und ändern sich natürlich nicht, wenn man anfängt zu optimieren.
Die tatsächlichen Werte der jeweiligen Website, die man untersucht, stehen darunter (zweite rote Box).
Warum steht aber unter der zweiten Box: "Die Werte sind geschätzt und können variieren"?
Ganz einfach: Weil es so ist. Führt man mehrere Messungen durch, dann können sich diese zumindest leicht ändern.
Missverständnis Nummer 2
Wenn ich optimiere und habe bereits ein Caching-Plugin installiert, dann muss ich den Test immer mehrmals laufen lassen.
Es ist wichtig, nach jedem Optimierungsversuch an der Website auch den Cache von WordPress zurückzusetzen, um überhaupt das Ergebnis der Optimierung und nicht womöglich einen alten Stand zu messen. Beim ersten Test via PageSpeed Insights wird die Website aber möglicherweise nicht sofort aus dem Cache geladen. Also braucht man hier mindestens schon mal 2 Leseversuche.
Nach meinen Erfahrungen können mindestens 3 weitere Messungen nicht schaden, denn die Messwerte schwanken. Gerade die Core Web Vital-Werte können hintereinander gemessen grün, gelb oder sogar rot sein. Es stellt sich für mich die Frage, ob Google das dann auch so misst, dass es vom besten Wert ausgeht. Hoffentlich. Konkret fehlen mir hierzu die Informationen.
Einige Blog-Artikel schreiben ausserdem, dass die Werte auch bei Google zwischengespeichert werden. Was dann bedeuten würde, dass ich zwischen jeder Messung auch noch warten muss. Das scheint mir aber nicht der Fall zu sein, denn ich messe auch bei schnell hintereinander durchgeführten Messungen der selben Website unterschiedliche Werte.
Google PageSpeed Insight: Nicht der "Heilige Gral"
Wichtig ist: Google PageSpeed Insights ist ein tolles Tool. Es gibt viele wertvolle Tipps zur Optimierung und diese sollte man auch versuchen zu befolgen. Aber: Man wird es mit WordPress aber kaum schaffen, die Punktzahl auf 100 zu bekommen und keinerlei Warnhinweise mehr zu sehen.
Es lohnt sich da auch durchaus mal den Blick zu den "Kollegen". Denn auch die "kochen nur mit Wasser".
Sehr interessant ist hier, dass sich die "Grossen" nicht so sehr um die Ladezeit zu kümmern scheinen, wohl aber um CLS.
Die Website selbstaendig-im-netz.de von Peer Wandinger beschäftigt sich mit dem Internet als Einnahmequelle. Peers Websites sind, soweit ich weiss, alle mit WordPress und er hat mit dem Artikel 11 Ladezeit-Tipps für eine bessere Website-Performance und Ladezeiten-Optimierung nur mit WordPress Plugins zwei sehr gute Artikel zum Thema geschrieben, die ich jedem nur ans Herz legen kann.
In einem Beitrag bei Peer habe ich auch gelesen, dass er sich sehr gut mit Programmierung auskennt und auch Anpassungen an den WordPress-Dateien selber vornimmt. Mein Ziel war es, dass nur mit Bordmitteln und Plugins zu schaffen, um nicht unnötig Zeit mit der Einarbeitung in die "WordPress-Innereien" zu verbrauchen.
"Blackbox" WordPress
WordPress ist toll, aber beim Thema des Artikels kommt das konzeptionelle Problem von WordPress ins Spiel. Obwohl ich mittlerweile einen guten Grundstock an Know-How zum Thema WordPress habe, ist das Ganze doch einfach immer noch eine Art Blackbox für mich. Man klickt sich sein CMS samt Plugins zusammen und weiss zumindest nicht zu hundert Prozent, was genau unter der Haube passiert. Macht ja auch nichts, so lange es läuft.
Vor WordPress habe ich mit einem CMS gearbeitet, wo ich das Theme und sogar Plugins selber geschrieben habe. Das hatte den Vorteil, dass ich ziemlich genau verstand, was da passierte, aber ich verbrachte auch unheimlich viel Zeit mit anderen Dingen als der Erstellung von Content.
Aufgrund seiner Verbreitung findet man aber auch viele Hinweise zur Optimierung von WordPress Websites. Aufgrund der Menge ist es aber dann durchaus nicht einfach, die richtigen zu finden.
Allgemeine Tipps zur Performanceoptimierung von WordPress
Schauen wir uns erste einmal an, wie man allgemein die Performance von WordPress optimiert.
Bilder komprimiert und in der richtigen Grösse ausliefern
JPG ist nicht gleich JPG. Mann kann in gängigen Bildbearbeitungen einen Komprimierungsgrad eines Bildes einstellen und damit teilweise massiv Platz einsparen. Ausserdem sollte man die Bilder schon vorab auf die richtige Grösse reduzieren und in dieser hochladen. Die Bilder sollten keinesfalls via CSS verkleinert ausgeliefert werden. Das benötigt unnötig Platz und damit Ladezeit.
Einsatz eines Caching-Plugins
Ein Cache auf Seiten von WordPress sollte unbedingt zur Ladezeitverbesserung eingesetzt werden.
Plugins auf ein Minimum reduzieren
Es gibt WordPress-Plugins fast für jeden Zweck. Gerade als Einsteiger macht es sehr viel Spass noch diese und jene Funktion über ein Plugin "nachzurüsten". Jedoch gibt es sehr viele Plugins, die die Ladezeit verzögern. Daher sollte man seine Plugins auf ein Minimum reduzieren.
Laden von externen Ressourcen vermeiden
Das Laden von externen Ressourcen sollte man so gut wie möglich vermeiden. Man hat keinerlei Einfluss auf die Verfügbarkeit der externen Ressourcen. Läuft auf dem Server extern was "krumm", lädt auch die eigene Website langsamer.
Externe Ressourcen können zum Beispiel Webfonts sein. Aber auch die Google Ads, die ich früher nutzte, haben das System sehr verlangsamt.
Nützliche Links zur WordPress-Optimierung im Internet
Ich kann jedem WordPress Website-Betreiber, dessen Website generell nicht "in die Pötte" kommt, Peers Wandiger Seite Ladezeiten-Optimierung nur mit WordPress Plugins. Hier beschreibt er, mit welchen Kniffs und Plugins man WordPress flott bekommt.
Es geht aber nicht...
Tipps zu den Core Web Vitals unter WordPress
Nun zu den Core Web Vitals.
Falls noch nicht gesehen, sollte man sich mit seiner Website auch bei der Google Search Console anmelden. Unter dem Menüpunkt "Core Web Vitals" kann man sich - vorausgesetzt die Website hat eine nennenswerte Anzahl an Besucher - die "Core Web Vitals" Übersicht anschauen.
Missverständnis Nummer 3
Bei lars-schlageter.com ist seit 02.11.2020 also alles eigentlich schon im grünen Bereich. Was aber habe ich dort gemacht? Es hätte sich gelohnt über alle Änderungen an einer Website ein Logbuch zu führen. Das werde ich zukünftig machen.
Das merkwürdige ist, dass beide Websites praktisch identisch sind, weitgehend die gleichen Plugins einsetzen und sich fast nur in den Farben unterscheiden.
CLS fixen
Auch hier half mir nach längerer Recherche mal wieder die Website Selbständig im Netz von Peer Wandiger. Auf der Seite Optimierung der Google Core Web Vitals Werte – Beispiele, Tipps und Empfehlungen hat er sich genau dem Problem angenommen, da er wohl genau das gleiche Problem hatte.
Bei mir war der CLS-Wert zunächst bei it-zeugs.de schlecht.
Ich bin nach dem Artikel von Peer vorgegangen und habe in Google Chrome zunächst die Entwicklertools aktiviert. Am Einfachsten geht das über Rechte "Maustaste" > "Untersuchen" im Browser.
In diesem Modus aktiviert man bei den drei Punkten "..." > "More Tool" > "Rendering" sowie "..." > "More Tool" > "Network conditions".
Bei Rendering aktiviert man "Layout Shift Region" und bei "Network Throtteling" "Slow 3G".
Die Seite lädt zwar langsamer und alles wird blau, doch ich sehe trotzdem kein Layout shiften.
Dieses Vorgehen dürfte also bei groben Werten was bringen, aber nicht hier bei mir. Was nun?
Zunächst bin ich über folgende Hinweise von PageSpeed Insights gestossen.
Ähnlich wie bei Peer könnten die Fonts (also die Schriftarten noch das Problem sein). So gut wie niemand verwendet noch Standardschriftwaren, denn nur somit kann man sicher sein, dass eine Website überall gleich aussieht. Für einen kurzen Moment laden aber die meisten Browser erst einmal die Standardschriftart, bevor sie die Schrift mit den nachgeladenen Webfonts neu rendern, was zu einer kleinen, kaum wahrnehmbaren Verzögerung kommen kann.
Also teste ich
<link rel="preload" as="font" href="/fonts/roboto-v18-latin-ext_latin-regular.woff2" type="font/woff2" crossorigin="anonymous"> <link rel="preload" as="font" href="/fonts/roboto-v18-latin-ext_latin-700.woff2" type="font/woff2" crossorigin="anonymous"> <link rel="preload" as="font" href="/fonts/roboto-v18-latin-ext_latin-italic.woff22" type="font/woff2" crossorigin="anonymous"> <link rel="preload" as="font" href="/fonts/roboto-slab-v7-latin-ext_latin-700.woff2" type="font/woff2" crossorigin="anonymous">
im Header zu ergänzen.
Doch das brachte alles nichts.
Nach vielen Stunden des Probierens habe ich mir die Anleitung nochmal vorgenommen und bin über diesen Satz gestolpert: "Zudem habe ich hier eine mitscrollende Hauptnavigation, die ebenfalls ein netter Effekt ist, aber Google wohl ebenfalls nicht gefällt. Ich habe die mitscrollende Navigation deshalb raus genommen, indem ich das Plugin myStickymenu deaktiviert habe."
Siehe da. Mein Theme hat die Option "Sticky Menu". Und bei it-zeugs.de hatte ich diese aktiviert, bei lars-schlageter.com nicht.
CLS-Problem gefixt.
Und Erkenntnis des Tages: Dokumentationen zum Thema sollte man jeweils sehr genau lesen.
LCP fixen
Probleme habe ich auf meiner Website noch mit LCP. Diesen bekomme ich nicht in den grünen Bereich. Die Tipps, die Google PageSpeed mir liefert, finde ich schwer zu interpretieren und helfen mir nicht sehr.
Etwas besser gefällt mir hier der Speedtest GiftOfSpeed. Dort kann ich auch einen Test von Frankfurt aus starten.
Speziell die Sektion "slowest local resources" zeigt ganz gut, wo es klemmt. Der Haupt-Klemmer kommt von einem lokalen Proxy, der die Amazon Produkt-Bilder zwischenspeichert und ausliefert. Doch etwas Taschengeld muss sein, daher möchte ich derzeit nicht darauf verzichten.
Auch die Webfonts, die it-zeugs.de verwendet. benötigen nochmal 0.4 Sekunden Ladezeit.
Ich habe mich entschlossen, das dann doch erstmal noch so zu lassen und abzuwarten, ob mich überhaupt ein nennenswerter Besucherverlust treffen wird. Da ich nicht von meinen Websites leben muss, kann ich mir das durchaus leisten.
Die nächsten logischen Schritte wären, die Webfonts rauszuschmeissen und mit Standard-Fonts zu arbeiten. Ausserdem könnte man die Amazon-Werbung zumindest in der Seitenleiste mit HTML kodieren und die Bilder lokal abspeichern, so dass sie schneller ausgeliefert werden.
Aktueller Stand it-zeugs.de
Update
Bis die Google Search Console die Anpassung mit bekommt, gehen einige Tage ins Land. Aber schliesslich ist es geschafft:
Links
- GiftOfSpeed - ein weiterer Speedtest, der mir sehr gut gefällt
- Die 11 schnellsten WordPress-Themes im Jahr 2021 (basierend auf ausführlichen Tests)
- Ladezeiten-Optimierung nur mit WordPress Plugin
- How to load web fonts to avoid performance issues and speed up page loading
- 11 Ladezeit-Tipps für eine bessere Website-Performance
- Optimierung der Google Core Web Vitals Werte – Beispiele, Tipps und Empfehlungen
Hallo, hier schreibt Lars. Dipl-Ing. Ingenieurinformatik (FH). Seit Jahrzehnten in der IT tätig. Geprüfter (und begeisterter) Webmaster. Ebenso begeisterter Windows-, Apple-, und Office-User. Ich schreibe über alle möglichen Themen rund um IT. Mehr über mich erfährst du hier: Über mich. Danke für deinen Besuch!