Google PageSpeed Insights spiller.me

wall < "PageSpeed – nicht nur für WordPress"

Broadcast message from spillerm@unixe.de (pts/1) (Mi Jan 27 13:59:10 2016):
4
Diesen Beitrag schrieb ich vor 3 Jahren. Behalte das beim Lesen bitte im Hinterkopf.

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.

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.

Werte ermitteln

Google PageSpeed InsightsIm 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.

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 heissen 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 anschliessend 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.

UnterschriftIch 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.

4
  1. Danke für den Artikel! Ich habe mich auch mal wieder daran gesetzt und diesmal auch erfolgreich!
    Die TTFB hat man leider nicht vollständig selbst in der Hand, da spielt ja z.B. der Provider (Netz & Host) auch eine große Rolle. Evtl. hilft noch etwas MySQL Tuning?

    • TTFB – klar, hängt vom Provider ab, aber nicht nur wie ich festgestellt hab. Denn: eine reine HTML-Seite wirft in meinem Fall keine TTFB-Warnung, eine WordPress-Seite aber schon.

      Ich konnte es mittels Zen Cache massiv drücken und schlussendlich in den Griff bekommen; vielleicht ist für dich auch WP TTPC interessant, das man direkt an memcached anknüppeln kann.

      MySQL-Tuning hat in Sachen TTFB für mich nichts geändert, hat aber insgesamt sehr viel Last vom System genommen.

      Und was ist sehr empfehlen kann: das PageSpeed Module von Google, ich hab’s für nginx im Einsatz — da ist aber wirklich Einarbeitung erforderlich, das läuft nicht so nebenher :-)

      Viele Grüße!

Keine weitere Reaktionen mehr möglich.