4 einfache Maßnahmen um den WordPress Pagespeed Insights Score zu verbessern

Der Google Pagespeed Insights Score ist seit einiger Zeit in aller Munde, wenn es um das Thema Performance einer Webseite geht. Das betrifft natürlich auch WordPress-Webseiten. Wer eine WordPress-Webseite betreibt, dem sind meist gute Rankings wichtig und der will Google natürlich gefallen. Auch indem der Pagespeed Wert im grünen Bereich ist. Wie erreicht man also bei WordPress am schnellsten, dass der Pagespeed Score aus dem roten in den grünen Bereich wandert?

Theorie und Praxis des Pagespeed Insight Scores

Kommen Kunden auf mich zu und wollen den Pagespeed Score ihrer WordPress Webseite über 90 heben, damit die Site schneller lädt, bremse ich meist erstmal das Vorhaben etwas ein. Warum? Weil es 2 Probleme mit dem Pagespeed Score gibt:

1. Er sagt eigentlich nichts über die Geschwindigkeit einer Webseite aus (hier ist eher Pingdom geeignet): Der Score wird anhand von automatisierten Analysen einer Webseite erstellt. Es werden verschiedene Parameter herangezogen, welche überprüft werden. Zum Beispiel ob Bilder größer geladen werden, als sie angezeigt werden. Was für manchen Webdesigner normal ist um auf Retina Displays immer scharfe Bilder zu sehen, ist für Google gleich ein Grund einige Punkte abzuziehen. D.h. Google macht keine Ausnahmen bei der Bewertung zu Gunsten von gewünschter Optik. Das ist nicht immer praxisnah.
2. Google gibt Empfehlungen oder bemängelt Dinge, die gar nicht geändert werden können. Baut beispielsweise jemand Google AdSense Werbung in seine WordPress-Webseite ein, wird in Google Pagespeed Insights angemahnt, dass Scripte das Rendering der Site behindern, weil sie erst geladen werden müssten. Das lässt sich aber gar nicht verhindern, da die Werbung extern geladen wird. Ausserdem können diese Scripte nicht mit anderen Scripten für weniger Requests zusammengefasst werden. Auch ein Browser Caching ist nicht möglich. Wird aber beanstandet.

Man sieht, der Score ist nicht unbedingt als das Maß aller Dinge anzusehen, wenn es um sinnhafte Optimierung auf Pagespeed geht. Dumm nur, dass niemand weiß, wie sehr Google diesen Wert bei der Bewertung seiner Rankings heranzieht. Daher geht man lieber auf Nummer sicher und optimiert, was zu optimieren ist. Natürlich wird dann in vielen Fällen durch diese Optimierungen auch die Site schneller. Es ist aber bei weitem nicht so, dass man aus gesagten Gründen alle Empfehlungen umsetzen könnte und grundsätzlich an der 100 kratzen könnte. Zumindest nicht ohne einen enormen Aufwand zu betreiben.

Maßnahmen um den Pagespeed Wert zu verbessern

Welche Maßnahmen sollten also durchgeführt werden, um schlechte Pagespeed-Werte zu verbessern? Natürlich ist das von Site zu Site und von Server zu Server unterschiedlich. Erfahrungsgemäß sind es aber die 4 folgenden Maßnahmen, die den Wert deutlich verbessern lassen.

Ein schnelles WordPress Theme verwenden

Ein schnelles Theme ist die Basis für eine schnelle Website. Was hier verbockt wird, kann schwer wieder aufgeholt werden. Von daher ist die Auswahl eines richtig performanten Themes essentiell um den Core Web Vitals zu entsprechen und gute Scores bei Pagespeed Insights zu erreichen.

Bildergrößen in WordPress verringern

In den allermeisten Fällen mit denen ich zu tun hatte, sind die Bilder das Problem beim Pagespeed Score. Der normalsterbliche Webseitenbetreiber ist schlichtweg überfordert mit der Optimierung der Bilder für eine WordPress-Webseite. Es werden Bilder in Originalgröße von der Kamera in die Site geladen und eingebaut. Wenn dann auch noch die derzeit so hippen Slider zig Bilder über 500kb Größe anzeigen, dann muss man sich nicht wundern, wenn Google hier massenweise Punkte abzieht.

Nun ist eben nicht jeder Webseitenbetreiber in der Lage seine Bilder mit einem Bildbearbeitungsprogramm zu bearbeiten. Wenn doch, dann bitte machen! Bilder wenn möglich nur in den Abmessungen hochladen, in denen sie dann auch eingebaut und benötigt werden. Wer nicht weiß, wie man das herausfindet, der ist meines Erachtens sowieso schon überfordert mit der Materie (das ist jetzt nicht abwertend, aber dennoch ernst gemeint).

Bilder sollten immer in Webqualität heruntergerechnet werden. Wer Photoshop verwendet kann sich im Bereich 60 bis 80% bei JPEGs bewegen. Bei PNGs ohne Transparenz kann man auf 24bit verzichten.

Hier ein paar Tipps, wie man als Laie Bilder umwandeln und herunterrechnen kann:

compressor.io

Compressor.io ist ein tolles Online Tool um Bilder (allerdings schon in den richtigen Abmessungen) nochmal zu komprimieren. D.h. es werden Informationen und Details entfernt auf Kosten der Qualität und der Dateigröße. Sehr gut für wenige Bilder.

Able Batch Converter

Der Able Batch Converter ist super geeignet um viele Bilder automatisch zu verkleinern (sowohl in den Abmessungen, als auch der Dateigröße). Mit ein wenig Trial & Error hat man hier ein geniales Tool in der Hand. Bei WordPress könnte man zB alle Bilder im Ordner wp-content/uploads auf seinen Rechner herunterladen, mit dem Able Batch Converter bearbeiten und dann wieder hochladen. Ich habe schon bei diversen Websites hier die Datenlast auf einen Bruchteil minimiert.

Imsanity

Imsanity passt auf, dass die Bilder die in WordPress hochgeladen werden, nicht zu groß sind. Spitzenmäßig gerade für Leute, denen das Vorabverkleinern schwerfällt.

WP Smush

WP Smush ist bekannt und wird häufig eingesetzt. Viele denken damit alles getan zu haben um die Bildergrößen zu optimieren. Aber da hier nur die Bilder in den hochgeladenen Abmessungen optimiert werden, ist es keine Hilfe um zu groß hochgeladene Bilder von der Dateigröße her zu verbessern. Sind die Bilder allerdings in den korrekten Abmessungen vorhanden, ist WP Smush super um die letzte Optimierung vorzunehmen.

Hier noch ein paar Tools um herauszufinden, wie groß die Bilder auf der eigenen WordPress-Webseite sind:

• Chrome Developer Tools: Mit Strg+J gestartet lässt sich im Bereich „Network“ die Größe der geladenen Elemente sehen. Nach Größe sortiert sieht man Ausreißer auf jeder Seite.
• Screaming Frog: Mit dem Screaming Frog lässt sich eine komplette Webseite durchforsten. Unter anderem lassen sich auch alle Bilder anzeigen und nach Größe sortieren. Da hier die komplette Webseite untersucht wird, ist das ein sinnvolles Tool um sich schnell einen umfassenden Überblick über zu optimierende Bilder zu machen. Bei den meisten Webseiten sollten Bilder über 100kb zumindest auf Optimierungspotential geprüft werden.
• View Image Info in Chrome: In Chrome benötigt man mittlerweile eine extra App um Bildergrößen einzusehen. In Firefox zB geht das unter „Rechte Maustaste->Grafik-Info anzeigen“.

Lazy Load

Und noch ein letzter Tipp hierzu: Kriegt man die Anzahl und Größe der Bilder nicht 100% in den Griff, so dass Google zufrieden ist, bleibt einem noch die Chance mit einem Lazy Load Plugin arbeiten zu können. Hierbei werden Bilder erst geladen, wenn der Besucher in die Nähe des Bildes scrollt. Gerade bei großen Webseiten macht das Sinn, damit die initiale Ladelast so gering wie möglich gehalten wird. Allerdings funktioniert das nicht immer super: Fehldarstellungen wie leer bleibende Bilderblöcke oder Themes, die Lazy Loading verhindern machen die Lösung nicht für jeden praktikabel. Hier hilft einfaches austesten von zB „Lazy Load„.

Caching einbauen

Großes Potential um den Pagespeed Wert zu verbessern, liefert der Einbau eines guten Caching Plugins in WordPress. Es gibt einige gute am Markt, ich möchte jetzt auch gar nicht im Detail auf bestimmte Plugins eingehen. Nur damit ein paar genannt werden, die ich empfehle:

• Mein Favorit: WP-Rocket (bietet Minifizierung, Lazyload von Bildern, Script im Footer laden, Cache Prebuild, eigenes RocketCDN…)
• W3 Total Cache (bietet zudem auch Browser-Caching, Minifizierung, Nutzung eines CDN Servers, …)
• WP Super Cache (bietet zudem Pre-Caching, CDN Support, Komprimierung, …)
• Cache Enabler (ermöglicht auch den Einbau von webP Bildern für NOCH kleinere Bildgrößen)
• Comet Cache (einfach und schnell einzurichten)

Es gibt natürlich noch ein paar mehr, unter anderem auch kostenpflichtige, Caching-Plugins. Aber ich denke die meisten suchen nach kostenlosen Plugins. Die hier gelisteten sind auch wirklich für die meisten Fälle ausreichend. Ich persönlich nutze ausschließlich diese 4 Plugins und hatte nie den Bedarf an einem kostenpflichtigen Caching-Plugin.

Wie hilft das Caching bei einem schlechten Pagespeed Wert?

Eine WordPress-Webseite wird beim Aufruf vom Webserver aufgebaut. Hierbei wird PHP und diverse Datenbankabfragen ausgeführt. Das dauert natürlich länger, als wenn man nur eine statische HTML Seite von der Festplatte des Webservers abrufen müsste. Hier setzt das Caching an: Beim ersten Aufruf einer dynamischen Seite wird eine statische Version dieser auf der Festplatte des Webservers abgelegt. Der nächste Aufruf der Seite greift dann direkt auf die statische Version zu und somit ist der Aufruf der Seite deutlich schneller.

Das schlägt sich natürlich auch in den Werten von Pagespeed Insights nieder. Hier wird nämlich unter anderem auch auf die Verbinungsgeschwindigkeit zum Server getestet, die beim Caching einfach deutlich höher ist.

Anzahl Requests abbauen

Was sind Requests? Jede Datei, die benötigt wird um eine Webseite am Ende zusammenzusetzen, wird per Request von einem Server angefordert. Das kann eine JavaScript-Datei sein, die bestimmte dynamische Effekte lädt. Das kann eine CSS-Datei sein, die die generelle optische Darstellung der Site definiert (zB die style.css in WordPress). Oder aber auch Bilder, Videos, Schriften, … Jeder zusätzliche Request kostet Zeit um eine Webseite aufzubauen, da Anfrage und Lieferung eben Zeit benötigen.

Google empfiehlt natürlich zurecht die Anzahl Requests so gering wie möglich zu halten und die wenn möglich auch erst am Ende der Seite zu stellen. Das ist nicht immer möglich, da bestimmte Dateien (wie die style.css in WordPress) für die korrekte Darstellung der Site vor dem Anzeigen dieser, geladen werden müssen. Google bemängelt das als einen Request der „das Rendern behindert“. Das ist zwar korrekt, lässt sich aber manches mal nicht ohne großen Aufwand verhindern. So dass eigentlich meistens ein paar Requests übrig bleiben, die bemängelt werden, Punkteverlust nach sich ziehen, aber einfach nicht wirtschaftlich sinnvoll anders zu handhaben sind.

So wenig Requests wie möglich für einen besseren Pagespeed Wert

Somit sollte man bemüht sein zumindest die Anzahl der Requests so gering wie möglich zu halten, wenn man es schon nicht schafft alle abzuschaffen und die verbleibenden nach dem Rendern der Site nachzuladen.

Wie kann man also die Anzahl Requests bei einer WordPress-Webseite vermindern?

Am einfachsten geht auch das mit Plugins. Hier sind folgende zu nennen:

• Autoptimize
• W3 Total Cache (bietet Minifying in Kombination mit dem Caching)
• Better WordPress Minify

Natürlich kann man bei selbst erstellten Plugins oder Themes in WordPress die geladenen Scripte zusammenfassen in 1 große Datei und Bilder in Sprites umwandeln um so wenige Bilder wie möglich zu laden. Die meisten nutzen aber die genannten Plugins um sich das Leben so einfach wie möglich zu machen. Hierbei werden in der Regel CSS-Dateien und JavaScript-Dateien zusammengefasst zu einem großen Request. Dieser wird dann bei Google Pagespeed als das „Rendering des Inhalts blockierender“-Request bemängelt. Das lässt sich aber wie gesagt kaum vermeiden. Durch das Minifying werden dennoch einige Punkte dem Pagespeed Wert hinzugefügt.

Im übrigen hilft hier auch die Nutzung von http/2 nicht weiter, welches manche Webhoster schon anbieten. HostPress und All-Inkl sind 2 dieser Webhoster, die einen sehr gut bei der Optimierung der Performance unterstützen. Hier werden die Requests gleichzeitig abgearbeitet und nicht nacheinander. Dadurch erhöht sich die Ladegeschwindigkeit einer Webseite. Google berücksichtigt es aber nicht in seinem Score.

Browsercaching aktivieren

Browsercaching ganz kurz erklärt: Es ist nicht nur möglich eine Webseite auf einem Server zu cachen, sondern auch möglich, dass der Browser Elemente der Webseite (zB Bilder und Scripte) in seinem Zwischenspeicher ablegt. Bei erneutem Aufruf wird dann das Element nicht vom Server gezogen, sondern vom lokalen Rechner. Das erhöht stark die Geschwindigkeit beim Surfen durch eine Site.

Es lassen sich diverse Dateiformen cachen, manche sollte man nicht im Browser cachen, da dann Änderungen an der Site nicht bemerkt werden. CSS Dateien sollten wenn überhaupt nur einen kurze Cachedauer zugeordnet bekommen. Bei Bildern ist das in der Regel anders. Diese werden selten geändert. Browsercaching wird im Idealfall in der .htaccess-Datei im root der WordPress-Webseite eingebaut. Es ist aber auch möglich Plugins hierfür zu nutzen.

Browsercaching in die .htaccess-Datei einer WordPress-Webseite einbauen

So könnte ein Browser-Caching Block aussehen. Nähere Infos zu Browser-Caching entnimmt man den bereits vorhandenen Ressourcen im Web (man muss ja nicht alles zig mal durchkauen), zum Beispiel dieser Webseite hier.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 week"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 week"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

Alternativ nutzt man auch hier Plugins. Zu nennen sind:

• W3 Total Cache (Ja, das Plugin kann ziemlich viel. Eine allumfassende Lösung für die Pagespeed Insights Probleme. Link siehe oben.)
• Browser caching with .htaccess

Trotz Browsercaching meckert Pagespeed

Baut man externe Ressourcen, wie zB Scripte oder Bilder, ein (zB über Werbebanner bei AdSense oder Google Analytics), dann meckert Pagespeed Insights, dass diese Ressourcen nicht im Browser gecached werden können. Das ist natürlich totaler Quatsch, da die Ressource ja extern liegt und in der Regel nicht gecached werden SOLL. Gerade bei AdSense oder Analytics sollte Google das doch eigentlich wissen. Man sieht also wieder: Der Score ist nicht immer unbedingt sinnvoll berechnet.

Gründe warum der Pagespeed Wert schlecht ist

Als Fazit könnte man folgendermaßen vorgehen bzw. sich fragen: Warum ist bei manchen Webseiten oder WordPress Blogs der Pagespeed Insights Score so schlecht?

Kurz und knapp:

• Zu große Bilder machen Webseiten elend lahm
• Bilder größer zu laden als anzuzeigen wird von Google gnadenlos bestraft
• Das Laden vom Server ohne Caching ist für Google ein No Go
• Zu viele geladene Bilder, Scripte, Schriften, … belasten die Ladezeiten und verhindern das Rendern der Site
• Viele Elemente werden unnötig geladen, da kein Browsercaching eingerichtet wurde

Beispiel einer Site mit zu vielen Requests, zu großen Bildern und zu langer Ladezeit:

Auf der Site im Screenshot sieht man, dass durch einen Slider mit sehr großen Bildern, die Ladezeit auf über 14 Sekunden aufgeblasen wird. Würde man allein die ersten 10 Bilder optimieren, könnte man mehrere MB Ladelast verhindern. Minifizierung würde ca. 100 Requests sparen, was gerade bei großen mit vielen Besuchern absolut nötig ist. So wird die Serverlast verringert und der User hat eine bessere Benutzererfahrung.

Pagespeed Score 100

Jetzt wird der eine oder andere Hardcore-Optimierer natürlich fragen: und wie komme ich jetzt auf 100 Punkte bei Pagespeed Insights um noch viel bessere Rankings zu bekommen?

Mal abgesehen davon, dass es meist keinen Sinn macht die Optimierung so weit zu treiben, weil diverse Versuche im Netz zu finden sind, die bewiesen haben, dass die Steigerung von 85 auf 100 Punkte (also grün auf grün) keinerlei Rankinggewinne gebracht hat: Der Aufwand ist einfach viel zu groß herauszufinden, welche CSS Statements für die erste Ansicht einer Site nötig sind, diese vorab und dann den Rest im Nachhinein zu laden.

Außerdem hat Google selbst schon bestätigt, dass eine schnelle Site nicht zwangsweise Rankingvorteile hat, schon gar nicht eine besonders schnelle Site einer schnellen Site gegenüber. Es ist eher umgekehrt: Ist die Site elend langsam, behindert sie den User der Site in seiner Benutzererfahrung. Er springt dann ab, was Google natürlich mitbekommt. DAS kann als Rankingfaktor negative Auswirkung haben. Aber nicht die Site von 2 Sekunden Ladezeit auf 1.5 Sekunden zu bringen und die „magische“ 100 im Pagespeed Score stehen zu haben.

Somit bleibt zu sagen: Ja, bitte die hier genannten Maßnahmen umsetzen um den Pagespeed Score in vertretbare Höhen zu bringen und letztendlich dem User eine bessere Erfahrung bei seinem Besuch auf der WordPress-Webseite zu bieten. Aber bitte nicht übertreiben und gerne auch mal einen gelben Score stehen lassen. Alles was über 70 ist, ist absolut OK (gerade bei mobil). Werte zwischen 70 und 90 halte ich für sinnvoll. Jede Stunde die benötigt wird um den Score um 1 Punkt zu erhöhen halte ich persönlich für Verschwendung.

Nicht nur auf den Pagespeed Wert schauen

Der Pagespeed Wert von Google Pagespeed Insights ist ein guter Indikator dafür, ob es Optimierungspotential auf einer Webseite gibt. Allerdings lässt sich hier nicht prüfen, wie schnell eine Webseite tatsächlich lädt. Daher empfehle ich bekannte Anbieter für Pagespeed-Tests zu nutzen, die die Ladezeit berücksichtigen. Es hilft niemandem weiter, wenn zwar ein guter Pagespeed Score erreicht wird, aber die Ladezeit ansich dennoch schlecht ist.

Das ist durchaus möglich, wenn alle Vorschläge von Google umgesetzt wurden, aber die Ladelast einer Seite dennoch riesig ist. Ich denke hier zum Beispiel an Galerien, die zwar komprimierte Bilder laden, aber diese nicht lazy loaden oder einfach zu viele davon darstellen. Der Pagespeed Score muss hier nicht unbedingt schlecht sein. Am besten prüft man die Site mit den folgenden Anbietern:

• Pingdom
• GTMetrix
• Webpagetest.org

Pagespeed Insights Score in WordPress vom Fachmann optimieren lassen

Natürlich kann nicht jeder das hier gezeigte umsetzen, auch wenn es bereits die tatsächlich am einfachsten umzusetzenden Maßnahmen sind um den Pagespeed Score einer WordPress-Webseite zu verbessern. Wer damit nicht zurecht kommt und Hilfe benötigt, der kann sich gerne an mich wenden für eine Pagespeed Optimierung.