Google PageSpeed Insights ist hervorragend geeignet, um dir schnell einen Überblick über das Optimierungspotenzial deiner Website zu verschaffen. Ich zeige dir heute, wie du dieses Potenzial auch nutzt und deinen PageSpeed Score erhöhst. Du solltest dich aber nicht sklavisch nach den Google Ergebnissen richten. Denn die PageSpeed Fehlermeldungen sind nicht immer sinnvoll.

Der Kollege Caspar Hübinger hat vor einiger Zeit in einem seiner Blogposts sehr deutliche Worte für sein Google PageSpeed Insights Ergebnis gefunden. Und er kritisiert nicht nur das Tool, sondern auch die Nutzung des Tools selbst. Denn wenn man nicht weiß, wie man die einzelnen Optimierungsvorschläge zu interpretieren und beheben hat, kann man sich schnell in der unsinnigen Jagd nach einer 100er Wertung verlieren. Das allerdings wäre unklug. Denn utopisch hohe Google PageSpeed Wertungen sind meist Zeitverschwendung. Wichtiger ist die Optimierung der Ladezeit.

Fully responsive, loads in 500 ms, and Google’s shiny shittool tells me my mobile performance is “fair”, bc of render-fucking-blockhead CSS.

Caspar Hübinger (Glueckpress)

Ich zeige dir heute, wie du die wichtigsten Fehlermeldungen von Google PageSpeed Insights interpretierst und deine Website entsprechend optimierst.

Bevor ich dir aber zeige, wie du die einzelnen Fehlermeldungen interpretierst und die Fehler behebst, möchte ich erst noch einmal darauf eingehen, wie du Google PageSpeed Insights richtig nutzt. Denn wir haben schon erlebt, dass manche stark auf ihren PageSpeed Score fixiert waren, ohne dabei die Ladezeit ihrer Website im Auge zu haben.

Wenn dich dieser Abschnitt nicht interessiert, überspringe ihn einfach und lerne direkt, wie du die Fehlermeldung „CSS komprimieren“ behebst.

Google PageSpeed Fehlermeldungen sind nicht immer richtig und wichtig

Du solltest dich niemals ausschließlich auf die Ergebnisse beziehungsweise Fehlermeldungen von Google PageSpeed Insights verlassen. Denn das Google Tool misst den wichtigsten Kennwert deiner Website eben genau nicht: die Seitenladezeit. Um diese richtig zu messen, empfehle ich Webpagetest.org.

Nur, wenn du bei der Optimierung deiner Website von Anfang an die Seitenladezeit im Auge hast, kannst du sinnvolle Aussagen über den Erfolg der Optimierung treffen. Denn das Ziel einer jeden Optimierung sollte immer ein verbessertes Nutzererlebnis sein. Im Fall der Performanceoptimierung ist das natürlich die Seitenladezeit und die gefühlte Seitenladezeit.

Für das Nutzererlebnis sind eine schnellere Seitenladezeit und geringere Seitengröße immer von Vorteil. Die Geduld und Aufmerksamkeitsspanne der Menschen nimmt immer weiter ab (wie diese Studie von Microsoft zeigt) – das ist vor allem für den E-Commerce entscheidend – und immer mehr Traffic kommt über Mobilgeräte. Schon 2016 haben 56 Prozent der Deutschen das Internet regelmäßig über Smartphones oder Tablets aufgerufen. Hier sind Verbindungsgeschwindigkeiten und Datenvolumina nicht immer unbegrenzt. Schlanke, schnelle Websites sind daher angebracht.

Google PageSpeed gibt aber lediglich Hinweise auf Optimierungspotenziale deiner Website und erlaubt nur wenige Rückschlüsse auf das Nutzererlebnis. Die geringe Aussagekraft der Google PageSpeed Fehlermeldungen wird dadurch verstärkt, dass sich das Tool in bestimmten Bereichen nicht oder nur unter erheblichem Mehraufwand ruhigstellen lässt.

So wird beispielsweise der Hinweis auf Browser Caching immer dann auftauchen, wenn externe Ressourcen – auch Google-eigene Dienste – eingebunden werden. Doch können diese Ressourcen gar nicht vom Browser Caching deiner Website abgedeckt werden. Die Fehlermeldung hat also keinerlei Relevanz für das Nutzererlebnis deiner Website, sondern wird durch die Logik des Tools selbst produziert. Im schlimmsten Fall wird die Meldung aber so interpretiert, als sei gar kein Browser Caching aktiv.

Richte dich also nicht primär nach der Google Benotung, sondern nach der Ladezeit. Diese ist die einzige wirklich wichtige Größe.

Aber was ist mit meinem Google Ranking?

Am Beispiel der Meldung mit dem fehlenden Browser Caching wird deutlich, warum du dich nicht von einem vermeintlich schlechten PageSpeed Ergebnis verunsichern lassen solltest.

Hast du auf deiner Website beispielsweise Google Maps oder Google Analytics eingebunden, dann werden diese die folgende Fehlermeldung hervorrufen:

Gleiches bei anderen Diensten von Drittanbietern. Beispielsweise unserem Support Chat.

Jedes Mal, wenn wir daher unsere Website bei PageSpeed Insights testen, wird dieser Punkt angekreidet. Das heißt wir wissen, dass dieser Faktor unsere Ergebnisse immer negativ verzerrt und ignorieren ihn daher einfach.

Für die SEO deiner Website bedeutet das: Auch für das Ranking bei Google sind die Ladezeit und das Nutzererlebnis wesentlich wichtiger, als die konkrete PageSpeed Wertung.

Denn wenn du die Ladezeit deiner Website optimierst, wirst du automatisch viele der für Google wichtigen Bereiche bearbeiten. Eine Verbesserung der Ladezeit und des Google PageSpeed Scores hängen also in gewisser Weise zusammen.

Meiner Meinung nach solltest du dich aber nicht in der Jagd nach einer 100er Wertung verlieren.

Jetzt aber zu den Optimierungsschritten!

Fehlermeldung 1: CSS komprimieren

Unserer Erfahrung nach ist dies eine der abschreckensten Fehlermeldung von Google PageSpeed Insights.

Bedeutung: Diese Fehlermeldung zeigt an, dass die CSS Dateien deiner Website noch komprimiert werden können (oder im Fall oben, dass dies bereits erfolgreich getan wurde). Bei einer solchen Verkleinerung wird die Zeichenanzahl in den Dokumenten verringert. So schrumpft die Dateigröße. Kommentare, Leerzeichen und Formatierung werden beispielsweise gelöscht.

Umsetzung: Auch wenn dieser Hinweis abschreckend wirkt, die Umsetzung ist denkbar einfach. Für diesen Fall gibt es prinzipiell zwei Lösungsmöglichkeiten: Wenn du selbst fit in CSS bist, kannst du händisch die Zahl der CSS Dateien reduzieren und bei deren Erstellung eine Kurzschreibweise verwenden. Zudem kannst du die CSS Dateien über Onlinetools, wie den CSS Minifier, eigenhändig verkleinern.

Natürlich gibt es aber auch die komfortable Lösung mittels CSS Minifizierungsplugins in WordPress. Einige Plugins machen direkt einen Rundumschlag und können nicht nur CSS, sondern auch JavaScript und HTML komprimieren und optimieren.

Mit HTTP/2 macht ein Zusammenfassen von CSS nicht zwingend Sinn

Die eben genannten Minify Plugins sind weit verbreitet. Denn sie sind komfortabel und übernehmen die Komprimierung und die Zusammenfassung von CSS (und noch viel mehr) vollautomatisch. Das Zusammenfassen von CSS Dateien hat bis vor Kurzem auch noch sehr viel Sinn gemacht. Mittlerweile ist das anders: Denn seit es den HTTP/2 Standard gibt, sind Browser in der Lage, mehrere Dateien gleichzeitig vom Webserver zu laden.

Das heißt, dass die Daten nicht mehr zwingend zusammengefasst werden müssen, da mit HTTP/2 mehrere Datenpakete gleichzeitig ausgetauscht werden können. HTTP/2 muss z.B. vom Hoster eingerichtet worden sein und kann nur mit SSL Zertifikat genutzt werden.

Bevor du dich also für ein Plugin mit mehreren Dutzend Funktionen und Konfigurationsmöglichkeiten entscheidest, überlege gut, ob du dieses überhaupt brauchst. Vor allem dann, wenn du dir zutraust, CSS eigenhändig zu optimieren.

Denn ein zusätzliches Plugin kann deine Website unter Umständen langsamer machen. Vor allem, wenn die übrigen Funktionen der Alleskönner-Plugins nicht ihr volles Potenzial entfalten können.

Fehlermeldung 2: Ressourcen beseitigen, die das Rendering blockieren

Auch diese Meldung treibt vielen die Schweißperlen auf die Stirn, denn sie ist nicht ganz so leicht umzusetzen und zudem einer von Google PageSpeeds ewigen Kritikpunkten.

Bedeutung: Eine Website wird in einer bestimmten Reihenfolge aufgebaut. Diese Ladereihenfolge kann optimiert werden. PageSpeed bemängelt fast immer, dass CSS Dateien diese optimale Ladereihenfolge blockieren. Und zwar auch bei bereits sehr gut optimierten Websites (wie der Fall Caspar Hübinger zeigt). Dennoch kann der Hinweis sehr wertvoll für die Ladezeitoptimierung sein. Im Prinzip sagt dir dieser Hinweis, dass JavaScript oder CSS Code, der wichtig für ein zu ladendes Element ist – beispielsweise eine Hintergrundfarbe – zum Zeitpunkt des Ladens des Elements noch nicht verfügbar ist. Dadurch wird es solange nicht angezeigt, bis der entsprechende CSS Befehl geladen wurde. Das erhöht zwar nicht die Ladezeit deiner Website, beeinflusst aber vor allem das Nutzererlebnis, da die Website gefühlt länger lädt.

Umsetzung: Eine gängige Lösung ist die Umsetzung einer Daumenregel: CSS in den Header. Das bedeutet, dass du CSS Code vom Hauptteil des HTML Dokuments, dem „body“, an den Anfang des Dokuments, den „head“, verschiebst und dort als „style“ einbindest.

An diesem Beispiel wird deutlich, was ich meine. Der Codeschnipsel unten definiert eine Hintergrundfarbe für einen Blog. Das „style“ Element wird im „head“ des HTML Dokuments geladen. So lädt der Seitenhintergrund nicht erst am Ende des Dokuments und erzeugt einen unschönen Farbsprung oder blockiert gar das Rendering.

<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>

Diese Optimierungsmaßnahme kannst du wiederum auf zwei Weisen umsetzen: Du kannst selbst den Code anfassen und die CSS Codes in den Header verschieben, oder du kannst ein Plugin die Arbeit machen lassen.

Das Plugin Autoptimize etwa setzt zum Rundumschlag an: Du wählst hier die Optionen für alle nicht von dem Vorgang ausgeschlossenen CSS Dateien.

Der Auszug aus den Optionen des Plugins zeigt: Auch die Pluginvariante ist nicht ohne ein grundlegendes Verständnis des Vorgangs umsetzbar. Auch in die Plugins musst du dich also einarbeiten.

Fehlermeldung 3: Bilder effizient codieren

Auch an diesem Punkt meckert PageSpeed Insights häufig herum. Allerdings ist dieser Fall fast immer schnell und einfach umsetzbar und bringt meist auch handfeste Ladezeitvorteile.

Bedeutung: Viele unterschätzen die Rolle der Bildgröße für die Ladezeit ihrer Website. Dabei sind Bilder sehr häufig eine der größten Ladezeitbremsen. Auch wenn bei einzelnen Bildern nur geringe Datenmengen eingespart werden, kann sich das eingesparte Gesamtvolumen auf eine stattliche Datenmenge addieren.

Denn ein Bild ist selten nur ein Bild. WordPress generiert beim Upload automatisch mehrere Thumbnails des Bildes. Wenn du also auf deiner Startseite nicht die Originale verwendest, sondern kleinere Versionen davon, also Thumbnails bzw. Featured Images, dann sollten diese natürlich auch optimiert werden. Aus einem Bild werden so schnell mehrere Dateien, die auch eine multiple Datenlast mit sich bringen.

Umsetzung: Prinzipiell hast du zwei Möglichkeiten, um deine Bilder zu optimieren. Entweder optimierst du die Bilder vor dem Upload oder aber nach bzw. während des Uploads. Ersteres kannst du über Online- oder Offlinetools machen, letzteres machst du über entsprechende WordPress Bildoptimierungsplugins.

Wenn du die Komprimierung sinnvoll in deinen Arbeitsablauf integrieren kannst, macht es durchaus Sinn, die Bilder vor dem Upload zu optimieren. Hierfür gibt es Onlinetools, wie Kraken.io. Oder du reduzierst die Qualität und damit die Dateigröße deiner Bilder offline, zum Beispiel direkt in Photoshop. So sparst du dir das extra Plugin und hältst deine Website schlank.

Die komfortablere Lösung ist natürlich auch hier ein Plugin. Plugins wie Optimus oder Smush optimieren nämlich nicht nur das Hauptbild, sondern auch alle Abwandlungen davon. Zudem ist Smush auch in der Lage, alle deine bestehenden Bilder nachträglich zu optimieren.

Die Plugins arbeiten dabei unter anderem mit einer sogenannten “lossless compression”. Das heißt, dass die Dateigröße der Bilder zwar verkleinert wird, deren sichtbare Qualität aber nicht abnimmt.

Fehlermeldung 4: Textkomprimierung aktivieren

Diese Fehlermeldung von Google PageSpeed ist sehr schnell zu beheben und kann die Ladezeit deiner Website deutlich verringern.

Bedeutung: Bilder und CSS deiner Website hast du jetzt schon so weit wie möglich verkleinert. Gut so! Doch damit ist es noch nicht getan. Denn jetzt kannst du noch einen weiteren Kompressionsmechanismus nutzen. Du kennst den Vorgang wahrscheinlich vom Download großer Datenpakete: Diese hast du meist in gezippter, also komprimierter Form vorliegen. Das macht die Daten beim Download kleiner und den Download damit schneller. Allerdings müssen die Datenpakete nach dem Download noch entpackt werden. Genau dasselbe passiert beim Seitenaufbau: Der Webserver liefert die Datenpakete komprimiert aus, der Webserver entpackt sie. Das macht die Datenübertragung schneller und verringert die Seitenladezeit.

Umsetzung: Entweder ist die Datenkomprimierung schon serverseitig eingestellt, oder du musst sie selbst aktivieren. Bei Raidboxes musst du dich um nichts mehr kümmern. Denn wir haben standardmäßig die besonders starke Brotli Komprimierung aktiv.

Mit dem folgenden Eintrag in deiner .htaccess kannst du die sogenannte GZIP Komprimierung aber auch händisch aktivieren. Vorausgesetzt, du hast einen Apache Webserver.

<ifModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>
 
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

Fehlermeldung 5: Statische Inhalte mit einer effizienten Cache Richtlinie bereitstellen 

Meiner Meinung nach ist der Hinweis auf Browser Caching der mit Abstand nervigste bei Google PageSpeed Insights. Denn das Browser Caching kannst du nur für eigene Ressourcen einrichten. Für externe Ressourcen ist Browser Caching nicht möglich.

Bedeutung: Browser Caching bedeutet, dass sich der Browser eine statische Version deiner Website speichert und bei einem wiederholten Besuch nicht mehr beim Webserver anfragen muss, sondern die Website schon fertig geladen ist.

Umsetzung: Entweder hat dein Hoster Browser Caching schon serverseitig aktiviert, oder aber du kannst es durch eine Manipulation der .htaccess Datei einstellen (nicht vergessen: Diese Einstellung klappt nur auf Apache Webservern). Der Beispielcode unten setzt den Browsercache zum Beispiel auf einen Monat, d.h. die statische Version deiner Website wird einen Monat lang im Browser des Besuchers gespeichert.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

Auch hier gilt: Bist du Raidboxes Kunde, dann ist Browser Caching bereits standardmäßig aktiv.

My 2 Cents: Ohne Cache ist alles nichts

Gut, jetzt hast du die Bilder deiner Website optimiert, CSS reduziert, komprimiert und in die richtige Reihenfolge gebracht und den Browser deiner Besucher dazu gebracht, die Website zu cachen. All diese Maßnahmen verkürzen die Ladezeit deiner Website.

Bedeutung: Ohne einen ordentlichen Cache vergibst du allerdings sehr viel von diesem Potenzial. Caching ist und bleibt der mit Abstand wichtigste Performancefaktor. Ein Cache speichert die Inhalte deiner WordPress Website zwischen und sorgt dafür, dass nicht jedes Mal die gesamte Website neu geladen werden muss. Stattdessen wird eine statische, also bereits fertig gerenderte Variante deiner Website aus einem Zwischenspeicher ausgeliefert. So werden insbesondere das langsame PHP und die Datenbank umgangen.

Umsetzung: Auch hier gilt wieder: Entweder hat dein Hoster schon einen serverseitigen Cache eingerichtet, oder du nutzt ein Caching Plugin. Hier gibt es einige sehr mächtige Plugins, die große Teile deiner Website zwischenspeichern und zu einer deutlichen Ladezeitverkürzung bei wiederkehrenden Websitebesuchen führen.

Die hohe Potenz der Caching Plugins ist gleichzeitig ihre größte Schwäche. Es kann durchaus sein, dass ein Caching Plugin deine Website für Erstbesucher zunächst langsamer macht. Denn je komplizierter dein Blog oder deine Website ist, desto komplizierter und umfangreicher muss auch die Cache Engine sein, die deinen Blog zwischenspeichert. Das ist insbesondere für Shops relevant.

Wenn du eine vergleichsweise einfache Website betreibst, dann können minimalistische Lösungen durchaus besser sein als Caching Alleskönner. Eines dieser schlanken Plugins ist beispielsweise Cache Enabler.

Du solltest beachten, dass Caching Plugins meist auch das Reduzieren und Zusammenfassen von CSS oder JavaScript übernehmen. Daher solltest du einmal überprüfen, ob dein Caching Plugin nicht schon die Plugins zur CSS Optimierung überflüssig macht.

Nutzt du serverseitiges Caching, empfiehlt es sich, die Caching Funktionen von Plugins wie Autoptimize zu deaktivieren, bzw. einmal zu testen, ob diese überhaupt einen weiteren Performancevorteil bringen.

Fazit: Mit wenigen Plugins viel bewegen

Du hast es während des Lesens schon bemerkt: Für die Optimierung von CSS, Bildern und der Optimierung der Ladereihenfolge gibt es Plugins, die dir viel Arbeit abnehmen. Aber eben nicht die gesamte Arbeit. Auch Caching Plugins liefern schnell einen merklichen Effekt, sind aber teils sehr umfangreich und bieten viele Konfigurationsmöglichkeiten und teils redundante Funktionen.

Befasse dich auf jeden Fall näher mit den Plugins, die du nutzt. Nur wenn du weißt, was geschieht wenn du bestimmte Funktionen nutzt, kannst du auch sinnvoll optimieren. Ein Überladen der Website mit Optimierungsplugins bringt tendenziell wenig.

Und du solltest bei der Optimierung darauf achten, deine Erfolge richtig zu messen. Egal, ob du von Hand oder via Plugin optimierst. Nutze PageSpeed Insights als ersten Orientierungspunkt, um die Schwachstellen deiner Website zu identifizieren. Miss dann einmal die Ladezeit deiner Website vor der Optimierung. Erst nach dieser Erfassung der Ausgangslage macht es wirklich Sinn, deine Website Schritt für Schritt zu optimieren. Denn nur dann, wenn du die Ladezeit vor der Optimierung und nach jedem Optimierungsschritt kennst, kannst du auch bestimmen, was die einzelnen Optimierungsmaßnahmen gebracht haben.