PageSpeed - nicht nur für WordPress

Diesen Beitrag schrieb ich 8 Jahre und 9 Monate zuvor; die nachfolgenden Ausführungen müssen heute weder genau so nach wie vor funktionieren, noch meiner heutigen Meinung entsprechen. Behalte das beim Lesen (und vor allem: beim Nachmachen!) bitte stets im Hinterkopf.

Geschätzte Lesezeit: 4 Minuten

Mich macht es rasend, wenn Webseiten im Kriechgang sind, und damit bin ich nicht allein: ein Viertel der Nutzer verlässt unabhängig vom Endgerät eine Webseite, die vier Sekunden und mehr zum vollständigen Seitenaufbau benötigt.

Werte ermitteln

Google PageSpeed Insights Da ich sowohl beruflich als auch privat recht oft mit WordPress zu tun habe, stütze ich den Text auch darauf; so mancher Tipp ist jedoch auch auf beliebige andere Umgebungen anwendbar. Im ersten Schritt möchtest du nun sicher wissen, wie rasch deine Webseite reagiert und wie deine Besucher sie wahrnehmen; Web-Dienste wie webpagetest.org bieten einen ersten Einstiegspunkt; ich arbeite am liebsten mit Google PageSpeed Insights: URL eingeben, Test starten – und sich gegebenenfalls sehr vom Ergebnis überraschen lassen…

PageSpeed Developer Tools Ich für meinen Teil war jedenfalls sehr ernüchtert, weil die Werte für meine Site ursprünglich wirklich wahnsinnig schlecht waren. Mein erster Schritt bestand darin, vermehrt mit den Developer Tools des Chrome zu arbeiten (View → Developer → Developer Tools): über den Reiter „Network“ lässt sich beispielsweise die Ladegeschwindigkeit der Seite ermitteln, ob es Ladefehler gab, was überhaupt geladen wurde und wie lange das dauerte.

Hat sich etwas geändert?

Lief die Seite bisher flüssig und lahmt nun plötzlich? Dafür gibt es immer einen Grund. Frage dich, welche Änderungen du in der näheren Vergangenheit vorgenommen hast: ein neues Theme oder Plugin installiert? Ein WordPress-Update durchgeführt? Manuell an CSS-Files geschraubt oder sonstige Dateien modifiziert? Hast du einen neuen Artikel – vielleicht mit fehlerhafter Syntax – eingestellt? Gar nicht so einfach – gerade bei großen Seiten kann es sich daher bewähren, eine Art Logbuch zu führen und etwaige Änderungen zu protokollieren. Änderungen können testweise rückgängig gemacht und die Seite gegengetestet werden. Vielleicht lässt sich auf diese Art schon eingrenzen, was die Seite ausbremst

Gibt es offenkundige Fehlermeldungen?

Auch in Webhosting-Paketen hast du in der Regel Zugriff auf die Logs des Webservers: die musst du dir schnappen und analysieren. Gibt es Fehlermeldungen? Wird etwas angemahnt? Gibt es Anhaltspunkte?

Gibt es nicht ganz so offenkundige Fehlermeldungen?

Hierzu schaltest du WordPress in den Debug-Mode – allerdings wirklich nur zum Debuggen, im produktiven Betrieb hat das nichts zu suchen! Editiere hierzu deine wp-config.php; das Log-File wird in wp-content/debug.log hinterlegt.

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'WP_DEBUG_LOG', true );

Bilder optimieren

Ein Faktor, der mir bei sehr vielen Webseiten negativ auffällt, sind nicht optimierte Bildinhalte, die die Ladezeiten massiv verzögern – beispielsweise, wenn für einen Button mit 200px Kantenlänge ein Bild mit 2000px Kantenlänge hinterlegt und dann klein skaliert wird. Und viele Effekte – wie abgerundete Ecken, Deckkraft, Sättigung – lassen sich inzwischen über CSS manipulieren.

Revisionen kicken

Zu Anfang habe ich die Zahl der Revisionen, die in der Datenbank abgelegt werden, nicht beschränkt – was mir auf Dauer die Datenbank sehr vollgemüllt und den Seitenaufbau ausgebremst hat. Abhilfe schaffte für mich das Löschen der nicht mehr benötigten zahlreichen Revisionen.

mysql> select * from wp_posts WHERE post_type = 'revision';
...
1110 rows in set (0.14 sec)

mysql> delete from wp_posts WHERE post_type = 'revision';
Query OK, 1110 rows affected (0.24 sec)

Anzahl der Revisionen beschränken

Damit sich die Datenbank nicht erneut so aufblasen kann, habe ich die maximale Zahl möglicher Revisionen pro Post auf vier beschränkt; die jeweils älteste fliegt raus. Von Zeit zu Zeit lösche ich das, was aufgelaufen ist, dennoch gerne manuell – es gibt wohl auch Plugins, die diesen Job erledigen, aber dieser Ansatz gefällt mir nicht.

define( 'WP_POST_REVISIONS', 4 );

Plugins abschalten

Wenn dir bis hier hin noch nichts untergekommen ist, das offensichtliche Fehler wirft, kannst du alle Plugins deaktivieren und schauen, wie die Seite sich nun verhält; wenn sie schnell und performant ist, ist der Übeltäter eines der Plugins – also schalte sukzessive zu, teste, prüfe, schaue. Plugins sind nicht selten schlampig programmiert, ballern die Datenbank mit sinnlos vielen Anfragen zu oder fressen überproportional viel Speicher. Kurzfristig kann dir das Plugin „Plugin Performance Profiler„ eventuell auch erste Hinweise liefern. Gut zu wissen: auch deaktivierte Plugins fressen Ressourcen (werden beispielsweise auf Updates hin überprüft) und sind gegebenenfalls Einfallstor für Schad-Code – nicht benötigte Plugins solltest du nicht lediglich deaktivieren, sondern sie auch wirklich löschen.

Theme abschalten

Das Standard WordPress-Theme trägt den Namen des aktuellen Jahres – im Moment wäre das also Twenty Sixteen – und ist ein sehr schlichtes, optimiertes und performantes Theme. Ersetze also testweise das von dir verwendete Theme durch diesen Default – auch Themes sind mitunter mit der heißen Nadel gehäkelt, verwenden veraltete PHP-Aufrufe oder machen sonstigen Quatsch.

Die Keule: MySQL im Debug-Mode

Neulich hat eines der von mir verwendeten Plugins derart quer geschossen, dass ich ihm nur mit Hilfe des MySQL-Debug-Mode auf die Schliche kommen konnte – hierzu musste du in /etc/my.cnf die entsprechenden Optionen eintragen und anschließend das Error-Log bzw. auch das Slow-Log betrachten. Doch keine Sorge, das ist beim besten Willen nicht der Regelfall.

Empfehlenswerte Plugins zur Verbesserung des PageSpeed

  • Autoptimize – minimiert den Code, fasst CSS- und Java-Script zusammen, packt was möglich ist in den Footer, steckt Daten in den Cache; dabei ist die Einrichtung denkbar simpel – einfach das Plugin installieren, aktivieren, Häkchen setzen und go.
  • Ein Caching-Plugin, beispielsweise WP Super Cache – es sorgt dafür, dass statische Versionen der Seiten bei Anfrage rausgehauen werden und umgeht somit sowohl den PHP-Parser als auch weitere Datenbankanfragen; hier ist in den erweiterten Einstellungen etwas mehr Einarbeitung nötig, um wirklich optimale Ergebnisse zu erzielen, aber in vertretbarem Rahmen (und es lohnt sich sehr!).
  • Above The Fold Optimization – hier steht schon in den Installationshinweisen, dass dieses Plugin auf Optimierung ausgelegt ist, nicht auf simple Bedienbarkeit; wer aber etwas Zeit investieren möchte, wird mit diesem Plugin eine weitere Beschleunigung seiner Seite feststellen dürfen.

Ich bin mit meinen Optimierungen noch nicht durch; ich versuche derzeit, meiner schlechten Time To First Byte (TTFB) auf die Schliche zu kommen, bislang allerdings mit mäßigem Erfolg. Aber auch hier gibt es noch sehr viel zu lernen, und ich bin gespannt, ob ich das Rätsel lösen werde.

Alle Bilder dieser Seite: © Marianne Spiller – Alle Rechte vorbehalten
Hintergrundbild: 1199x 730px, Bild genauer anschauen – © Marianne Spiller – Alle Rechte vorbehalten

Eure Gedanken zu „PageSpeed - nicht nur für WordPress“

Ich freue mich über jeden Kommentar, es sei denn, er ist blöd. Deshalb behalte ich mir auch vor, die richtig blöden kurzerhand wieder zu löschen. Die Kommentarfunktion ist über GitHub realisiert, weshalb ihr euch zunächst dort einloggen und „utterances“ bestätigen müsst. Die Kommentare selbst werden im Issue-Tracker und mit dem Label „✨💬✨ comment“ erfasst – jeder Blogartikel ist ein eigenes Issue. Über GitHub könnt ihr eure Kommentare somit jederzeit bearbeiten oder löschen.