Google PageSpeed Insights Fehlermeldungen

Shut up Google PageSpeed! Die wichtigsten Fehlermeldungen beheben

Zuletzt aktualisiert am

Google PageSpeed Insights ist hervorragend geeignet, um dir schnell einen Überblick über das Optimierungspotenzial deiner Seite 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 in einem seiner Blogposts Post, sagen wir mal, sehr deutliche Worte für sein Google PageSpeed Insights-Ergebnis gefunden. Und er kritisiert nicht nur das Tool, sondern auch die Nutzung des Tools durch die Anwender. 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.

Zum Glück hängen in den meisten Fällen aber die Google PageSpeed-Wertung und die Ladezeit zusammen. Das heißt, dass mit einer Optimierung der Ladezeit auch direkt PageSpeed-Fehlermeldungen behoben werden.

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

Dabei gehe ich auf folgenden Fehlermeldungen ein:

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 häufig erlebt, dass Nutzer stark auf ihren PageSpeed-Score fixiert waren ohne dabei die Ladezeit ihrer Seite im Auge zu haben.

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

ebook: Messe die Performance deiner Seite wie ein Profi

Google PageSpeed-Fehlermeldungen sind nicht immer richtig und wichtig

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

Nur wenn du bei der Optimierung deiner Seite 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.

MERKE: Immer erst die Seitenladezeit messen, bevor du deine Seite optimierst. Nur so kannst du einschätzen, wie erfolgreich die Optimierung war.

Aus Nutzerperspektive sind eine schnellere Seitenladezeit und geringere Seitengröße immer von Vorteil. Die Geduld und Aufmerksamkeitsspanne des durchschnittlichen Nutzers nimmt immer weiter ab (wie diese Studie von Microsoft zeigt) – das ist vor allem für den E-Commerce entscheidend – und immer mehr Besucher kommen ü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 Seiten sind daher angebracht.

Google PageSpeed gibt aber lediglich Hinweise auf Optimierungspotenziale deiner Seite 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 Seite abgedeckt werden. Die Fehlermeldung hat also keinerlei Relevanz für das Nutzererlebnis deiner Seite, 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-Note, sondern nach der Ladezeit. Diese ist die einzige wirklich wichtige Größe.

Aber was ist mit meinem Google-Ranking?

Am Beispiel des fehlenden Browser-Caching wird sehr gut deutlich, warum du dich nicht von einem vermeintlich schlechten PageSpeed-Ergebnis verunsichern lassen solltest.

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

Typischer Google PageSpeed Insights-Fehlermeldungen: Browser-Caching wird angeblich nicht richtig genutzt

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

Jedes Mal, wenn wir daher unsere Seite 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 Seite 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 Seite 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 reduzieren

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

Google PageSpeed Insights Fehlermeldungen – CSS reduzieren
Eine typische PageSpeed Insights-Fehlermeldung. Zwar liefert Google, klickt man auf “Reduzieren Sie CSS”, eine sehr gute Anleitung für die Reduktion von CSS, diese setzt aber einiges an CSS-Kompetenz voraus. Hier wird klar: Google PageSpeed Insights ist nicht unbedingt ein Tool, das Laien voraussetzungslos verwenden können.

Bedeutung: Diese Fehlermeldung zeigt an, dass die CSS-Dateien deiner Seite noch verkleinert werden können. Bei einer solchen Verkleinerung wird die Zeichenanzahl in den Dokumenten verringert. So schrumpft die Dateigröße. Kommentare, Leerzeichen und Formatierung werden beispielsweise gelöscht. Bei besonders starker Komprimierung kann CSS auch komplett von menschenlesbarer in maschinenlesbare Form transferiert werden.

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 CSS Compressor oder CSS Minifier, eigenhändig verkleinern.

Google PageSpeed Insights Fehlermeldungen – So komprimierst du CSS händisch mit dem CSS Compressor
Schon dieser kurze Codeschnipsel, der die Hintergrundfarbe definiert, kann durch eine CSS-Kompression um 16 Prozent reduziert werden. Hier die Oberfläche des CSS Compressors

Natürlich gibt es aber auch die komfortable Lösung via Plugin. Autoptimize macht direkt einen Rundumschlag und kann nicht nur CSS, sondern auch JavaScript und HTML komprimieren und optimieren. Zudem cacht das Plugin deine Seite. Wenn du möchtest, kannst du die Optimierungsleistung aber auch auf CSS beschränken. Auch Better WordPress Minify erledigt den Job zuverlässig und lässt sich entsprechend konfigurieren.

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 mehrere 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 Seite unter Umständen langsamer machen. Vor allem, wenn die übrigen Funktionen der Alleskönner-Plugins nicht ihr volles Potenzial entfalten können.

Fehlermeldung 2: JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen

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

Bedeutung: Eine Webseite 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 Seiten (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 die Ladezeit deiner Seite, beeinflusst aber vor allem das Nutzererlebnis, da die Seite 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 unsere spezifische Hintergrundfarbe für den 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. Auch hier helfen die beiden Alleskönner Autoptimize und Better WordPress Minify weiter.

 

Google PageSpeed Insights Fehlermeldungen – Ausschnitt aus dem Plugin Better WordPress Minify

 

Das Minify-Plugin zeigt in den Optionen beispielsweise an, welche CSS-Dateien bereits in den Header verschoben wurden. Du könntest hier auch händisch weitere CSS-Ressourcen hinzufügen.

Google PageSpeed Insights Fehlermeldungen – Ausschnitt aus dem Optimierungsplugin Autoptimize

 

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

Die Auszüge aus den Optionen der Plugins zeigen: 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 optimieren

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.

Google PageSpeed Insights Fehlermeldungen – Auch bei der Bildoptimierung meckert PageSpeed häufig rum

 

Bedeutung: Viele Nutzer unterschätzen die Rolle der Bildgröße für die Ladezeit ihrer Seite. 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 Plugins.

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 Seite schlank.

Die komfortablere Lösung ist natürlich auch hier ein Plugin. Add-ons 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: Komprimierung aktivieren

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

Google PageSpeed Insights Fehlermeldungen – Komprimierung

 

Bedeutung: Bilder und CSS deiner Seite 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. Bist du RAIDBOXES-Kunde, 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: Browser-Caching nutzen

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.

Typischer Google PageSpeed Insights-Fehlermeldungen: Browser-Caching wird angeblich nicht richtig genutzt

Bedeutung: Browser-Caching bedeutet, dass sich der Browser eine statische Version deiner Seite speichert und bei einem wiederholten Besuch nicht mehr beim Webserver anfragen muss, sondern die Seite 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 Seite 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 Seite optimiert, CSS reduziert, komprimiert und in die richtige Reihenfolge gebracht und den Browser deiner Besucher dazu gebracht die Seite zu cachen. All diese Maßnahmen verkürzen die Seitenladezeit deiner Seite.

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-Seite zwischen und sorgt dafür, dass nicht jedes Mal die gesamte Seite neu geladen werden muss. Stattdessen wird eine statische, also bereits fertig gerenderte Variante deiner Seite 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 Seite zwischenspeichern und zu einer deutlichen Ladezeitverkürzung bei wiederkehrenden Webseitenbesuchern führen.

Die hohe Potenz der Caching-Plugins ist gleichzeitig ihre größte Schwäche. Es kann durchaus sein, dass ein Caching-Plugin deine Seite für Erstbesucher zunächst langsamer macht. Denn je komplizierter dein Blog oder deine Seite 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 Webseite betreibst, dann können minimalistische Lösungen durchaus besser sein als Caching-Alleskönner. Eines dieser schlanken Plugins ist bspw. 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 Seite mit Optimierungs-Plugins bringt tendenziell wenig.

Und du solltest bei der Optimierung darauf achten deine Erfolge richtig zu messen. Egal, ob du per Hand oder via Plugin optimierst. Nutze PageSpeed Insights als ersten Orientierungspunkt, um die Schwachstellen deiner Seite zu identifizieren. Miss dann einmal die Ladezeit deiner Seite vor der Optimierung. Erst nach dieser Erfassung der Ausgangslage macht es wirklich Sinn deine Seite 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.

Die neuesten Artikel rund um WordPress direkt per Mail?

Kein Problem, melde dich einfach für unsere kostenlosen WP-News an!

Ja, ich bin mit der Datenverarbeitung einverstanden.