Google Pagespeed Optimierung. So erreicht ihr 100 Punkte bei Google Pagespeed!

Top Pagespeed, trotz Wordpress

Von Anfang an war Wordpress für mich nicht der heilige Gral, es war ein gutes, jedoch recht träges Content Management System. Mit der Zeit lernte ich Wordpress selbst aber immer mehr zu schätzen, doch die Nachteile blieben, die Datenbankintensive Struktur änderte sich nicht und Wordpress war, so praktisch und hübsch es auch sein mag, einfach ein wenig zu langsam. Also konzentrierte ich mich schon sehr früh auf Performance-Optimierung, gründete FastWP und werkelte daran herum, Wordpress richtig schnell zu machen. Das gelingt mir mittlerweile recht gut, weil ich genau weiß worauf es ankommt. Auf FastWP treibe ich das Ganze auf die Spitze, nicht umsonst erreiche ich hier 100 von 100 Punkten bei Google Pagespeed (was immer mal wechselt, je nachdem was ich gerade teste oder geändert habe). Wie ihr das auch schaffen könnt und warum das nicht immer erstrebenswert ist, klärt dieser Artikel.

Wordpress Pagespeed-Optimierung

Wordpress ist von Haus aus also etwas lahm und nicht jedes Script wird unbedingt so intelligent eingebunden, nicht jedes Theme ist mit seinen Loops etc. wirklich auf Performance optimiert worden. Damit müsst ihr als Blogger leben, denn Performance spielt für viele immer noch eine eher untergeordnete Rolle, obwohl es mittlerweile eigentlich ganz oben auf der Liste stehen sollte. Was ihr tun müsst, um speziell bei Google Pagespeed gut dazustehen, habe ich hier mal zusammengefasst. Wer noch mehr über Performance-Optimierung wissen möchte, findet auf meiner Unterseite zur Wordpress Performance alles was er dazu braucht. Hier geht es dagegen ganz gezielt um Pagespeed und die Anforderungen die Google stellt.

CSS-Code im Header: Wer bei Google Pagespeed was erreichen will, darf keine blockierenden Inhalte bereitstellen. Google Fonts und Scripte im Head von Wordpress sind so ein Fall, genau wie verlinkte, große CSS-Dateien. Daher gehört CSS-Code mittlerweile minimiert in den Header und zwar inline. Auch dazu hatte ich schon einmal ein paar Zeilen geschrieben. Google Pagespeed honoriert nämlich Inline CSS, mit korrektem Caching ist eine CSS-Datei aber trotzdem stets schneller und logischer. Da müsst ihr selbst entscheiden, wie wichtig euch Google Pagespeed und die tatsächliche Performance ist.

HTML Minify: Code gehört heutzutage minimiert. Wer den Quelltext seines Wordpress Blogs auf diese Art verkleinert, spart zumindest immer einige Millisekunden Ladezeit, manchmal sogar noch mehr, je nach Größe und Umfang eures Blogs. Was möglich ist, sollte also immer auch minimiert werden. Das geht entweder per Snippet, oder über die mittlerweile üblichen Caching Plugins. Für eine Minimierung der CSS-Dateien etc. sorgt dagegen WP Minify Fix. Bei letzteren bedenkt aber bitte, dass sich mit HTTP/2 vieles in Sachen Performance-Optimierung verändert hat und ihr eventuell umdenken müsst, wenn ihr denn schon HTTP/2 zur Verfügung stehen habt.

Caching Plugin: Wordpress Caching Plugins gehören mittlerweile zum Standard und das ist auch gut so. Da die Inhalte in Wordpress dynamisch und nicht statisch sind, muss der Blog quasi bei jedem Aufruf erst einmal aus Einzelteilen zusammengesetzt werden. Das frisst Ressourcen. Solange nur ein paar Nutzer auf eurer Seite sind, ist das alles kein Problem, doch desto mehr es werden, desto schneller bricht euer Server in sich zusammen. Deshalb sind Caching Plugins auch so wichtig, gerade bei einem CMS wie Wordpress. Meine klare Empfehlung ist der Cache Enabler, das derzeit schnellste Caching Plugin für Wordpress. Wer sich auskennt nutzt außerdem dieses Snippet, um die PHP-Ausführung in Verbindung mit Cache Enabler komplett zu umgehen. Das bringt eine rasende Geschwindigkeit.

Wordpress .htaccess: Neben einem guten Caching Plugin, braucht es auch noch das Caching via .htaccess, sowie einige andere Optimierungen. Das sorgt dann dafür, dass bestimmte Inhalte im Browsercache verbleiben und beim erneuten Aufruf eures Wordpress Blogs nicht erst geladen werden müssen. Wer beispielsweise beim Aufruf eures Blogs alle Thumbnails der Artikel geladen hat, braucht diese, wenn er eine Stunde später noch einmal bei euch vorbeischaut, schließlich nicht erneut zu laden. Genau dafür sorgt Browsercaching. Es sichert die Inhalte im Cache, sodass der Besucher diese nicht erneut von eurem Server abfragen und herunterladen muss. Außerdem wird hier Gezirp-Komprimierung und mehr via .htaccess aktiviert. Was eure .htaccess enthalten sollte, erfahrt ihr in meinen Artikel zu perfekten Wordpress .htaccess. Geht eigentlich ganz leicht und ist schnell angepasst.

Bildoptimierung: Ganz wichtig ist für Google Pagespeed, dass alle Bilder verlustfrei komprimiert wurden. Früher war dieser Schritt noch komplett optional, heute gehört die vernünftige Optimierung von Bildern schlichtweg zum Standard und wird auch von Google vorausgesetzt. Dazu eignen sich verschiedene Plugins, die ich euch in diesem Artikel vorstelle. Mein Favorit und persönlicher Liebling ist und bleibt Optimus, welches ich inzwischen seit mehreren Jahren auf all meinen Blogs im Einsatz habe. Spitzenleistung zum kleinen Preis, mit regelmäßigen Updates und effizientem Code.

Typische Pagespeed Meldungen

Egal wie gut ihr euren Blog auch optimiert, meistens hat Google Pagespeed am Ende noch etwas zu meckern und zu melden, beklagt sich über dieses und jenes, wie eine alte Ehefrau. Ein paar sehr typische Meldungen habe ich hier mal aufgelistet, samt Lösung bzw. Hinweis dazu, wie ihr die entsprechenden Vorschläge vernünftig umsetzten könnt bzw. wo ihr ansetzten müsst. Ich denke den meisten wird das ein wenig helfen, doch noch den ein oder anderen zusätzlichen Punkt herauszuholen. Falls ihr noch andere Hinweise bekommt bzw. Fragen dazu habt, schreibt sie gerne in die Kommentare und ich schaue mal ob ich sie hier aufnehmen kann.

Google Analytics Fix: Google bemängelt in Pagespeed den eigenen Code von Google Analytics, stellte aber auch schon klar, dass sich daran nichts ändern wird. Also hilft nur ein Workaround, indem die Google Analytics API dazu genutzt wird, um einen Cachebaren Code zu erschaffen. Im Original lässt sich Google Analytics nämlich nur für 2 Stunden im Cache ablegen, was Google Pagespeed eben nicht gefällt. Der Code von Google Analytics Light ist damit der einzige Weg, trotz Google Analytics die 100/100 bei Pagespeed zu erreichen.

Eine weitere Option ist es Google Analytics “lokal zu hosten”. Mittlerweile bieten verschiedene Plugins solche Lösungen an, unter anderem z.B. wp-Rocket.

Sichtbare Inhalte priorisieren

Ein häufiger Hinweis bei Google Pagespeed Insights ist der, dass bestimmte Elemente nicht mit der vollständigen HTML-Antwort geladen werden können. Im Grunde sind das in den meisten Fällen ganz einfach Bilder, die im Header etc. platziert sind und erst entsprechend aufgerufen und heruntergeladen werden müssen. Eine Lösung kann dann sein, dass ganze als Base64 hinzuzufügen, oder auf das Bild zu verzichten und das Logo komplett mit CSS umzusetzen, was mittlerweile ja oft kein großes Problem mehr darstellt. Vorteile von Base64 habe ich in diesem Artikel erläutert und die Technik ein wenig genauer erklärt. Innerhalb von Wordpress gibt es übrigens auch die Möglichkeit, Bilder automatisiert in Base64 umzuwandeln. Aber Vorsicht mit der Technik, denn nicht immer ist dieser Weg empfehlenswert.

Inhalte die das Rendering blockieren

Ebenfalls häufig beschwert sich Google Pagespeed gerne mal über Inhalte die das Rendern der sofort sichtbaren Inhalte behindern bzw. blockieren. Das liegt vor allem an externen Dateien, die im Head implementiert werden und durch ihr Laden (wir vergessen jetzt mal HTTP/2) den Prozess des sofort sichtbaren, also ohne scrollen angezeigten Content blockieren. Auch Bilder oder Videos können dafür sorgen, dass durch das Laden alle anderen Inhalte warten müssen. Hier hilft es, Priorisierungen einzuführen, sodass beispielsweise iframes und Bilder erst geladen werden, wenn der Content komplett abgefragt wurde.

Auch Javascript und CSS-Dateien im Head der Seite können für diese Meldung sorgen. In diesem Fall verlegt sie einfach direkt ganz nach unten, oder ladet sie nach Möglichkeit asynchron. Am besten ist aber, alles was nicht sofort gebraucht wird, nach ganz unten vor das schließende “</body>” zu schieben. Also Scripte, Google Fonts, CSS-Dateien und mehr. Nur so ist die 100/100 bei Google Pagespeed mit Wordpress möglich.

Antwortzeit des Servers reduzieren

Ebenfalls typisch für Google Pagespeed ist das Meckern über die Reaktionszeit des Servers. Im Gegensatz zu vielen anderen Meldungen, hat diese aber wirklich Hand und Fuß und sollte durchaus ernst genommen werden. Hier versagt meistens die Anbindung des eigenen Hosters.

Also investiert ein wenig mehr Geld in einen stärkeren Server. Sind es typische Zusatz-Files die diesen Fehler verursachen, kann auch ein Content Delivery Network(CDN) Abhilfe schaffen. Meistens reicht ein Upgrade des Servers aber aus, um die Antwortzeit entsprechend zu verbessern. Ein CDN ist nur selten wirklich notwendig und besseres Hosting ist meist angebrachter. Hier empfehle ich auf einen schnellen, etablierten Hoster zu setzten, der auf Dauer meist die bessere Wahl darstellt.

Update: in verschiedenen Tests konnten wir die Antwortzeit des Servers um mehr als 50% senken. WIE? durch den Wechsel zu einem anderen Provider. Mittlerweile empfehlen wir ausschließlich Raidboxes für WordPress Seiten. Sobald auch nur annähernd darüber nachgedacht wird eine Seite mit Wordpress zu betreiben die auch eine gewisse Anzahl an Besichern pro Tag erwartet (>150 pro Tag) – sollte man einfach den Weg gehen und zu einem optimalen Anbieter wechseln. HIER GEHT ES ZUR VORSTELLUNG VON RAIDBOXES.

Pagespeed ist nicht alles

Am Ende möchte ich aber auch noch einmal eindringlich davor warnen, sich nur auf den Google Pagespeed zu fokussieren. Eine Punktzahl von 100 bedeutet noch lange nicht, dass euer Wordpress Blog wirklich perfekt lädt. Gerade im Einzelfall kommt es immer wieder vor, dass bestimmte Empfehlungen von Google Pagespeed gar keinen Sinn ergeben, vor allem eben mit einem CMS wie Wordpress.

Blind die Tipps von Google umzusetzen, führt daher vielleicht zu einer hohen Punktzahl, aber nicht unbedingt zu einem Performance optimierten Blog. Leider wollen viele Anwender am Ende aber vor allem Punkte sehen, verstehen nicht, dass im Einzelfall eine 70 oder 80 bei Pagespeed besser sein kann, als eine 90 oder 100. Werdet also bitte nicht blind für echte Optimierung, denn dazu gehört mal als das zu befolgen was Google für richtig hält.

Wordpress und der Feature-Wahn

Abgesehen von der reinen Optimierung, sollte euch euer Wordpress Theme entsprechend angepasst werden, um bei Pagespeed möglichst gut darzustehen. Hier gilt dasselbe wie immer, denn wenn ein Theme für Wordpress verspricht alles zu können und unzählige Features mitbringt, dann ist es meist nicht Performance-Optimiert und meist nicht einmal sinnvoll programmiert.

Dann geht es nur darum, den Kunden mit Feature-Versprechen zu ködern und zu blenden. Gerade Anfänger und Neulinge fallen darauf leider oft herein und merken dann erst nach einigen Monaten, dass das Theme zwar hübsch ist und alles kann, sie aber nur die Hälfte benötigen und die Performance wirklich mies ist. Skalierbarkeit ist wichtig und Purismus steigert häufig die Conversion Rate, da einfach wenig Ablenkung vorhanden ist. Wer sich die großen Player anschaut (Google, Facebook, Amazon), der sieht was das bedeutet. Schlichtes Design, starke Technik, perfekte Optimierung. So bleibt ein Web Service skaliarbar, schnell und fokussiert auf seine Stärken. Nicht nachmachen, aber daraus lernen.