PageSpeed

Im Zusammenhang mit dem Relaunch der Seite interessiert natürlich auch wie sie sich im WWW verhält. Die alte Wordpress-Version hatte stets Mühe beim initialen Seitenaufbau. Das erste Laden hat gut und gerne einige Sekunden gedauert. Das ist nun anders!

Mit dem nun verwendete CMS Yellow von Datenstrom ist die Seite bedeutend schneller unterwegs. Ein paar Anpassungen am Code, eine Erweiterung der .htaccess Datei und etwas Optimierung der Inhalte und schon rennt die Seite mit wahnsinniger Geschwindigkeit!

Hinweise von Google-PageSpeed

Grundlage für meine Anpassungen waren die Hinweise von Google PageSpeed Insights. Die grobe Installation des CMS, mit den gewünschten Plugins, erzielte eine Wertung um die 70 bis 80 Punkte. Das war mir zu wenig! 100 Punkte wollte ich haben - nicht weniger!

Cache everything!

Ein Browser, der einmal auf einer Seite war, sollte bereits die wichtigsten Ressourcen (JavaSkript, Stylesheet, Schriftarten, ...) heruntergeladen haben und diese im Idealfall wiederverwenden. Das verringert die Ladezeiten der Seite beim weitersurfen und spart Traffic.

Dazu muss dem Browser mitgeteilt werden, weche Gültigkeitsdauer die geladenen Ressourcen besitzen. Am einfachsten geht das über die klassische .htaccess-Datei.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType text/html "access 1 day"
</IfModule>

Wichtig ist es den richtigen MIME-Type zu treffen. Bei der WOFF-Datei für die Font Awesome Schriftart habe ich mich etwas schwer getan.

Anfragen reduzieren

Bekannt ist, dass das Nachladen von Ressourcen der Geschwindigkeit einer Seite nicht gut tut. Deshalb sollte u.U. darauf geachtet werden, CSS-Dateien zu bündeln oder JavaSkript an das Ende des HTML-Quelltextes zu verlegen. Da das CMS JavaSkript- und CSS-Dateien über einen eigenen Handler ausliefert, hatte ich Schwierigkeiten mit dem Caching. Kurzerhand habe ich das CSS komplett in die Seite eingebunden. Natürlich kann man hier Kritik üben. Dem Ziel (100 Punkte im PageSpeed-Test) hilft diese Maßnahme jedoch.

Externe Bibliotheken vermeiden

Anfangs hatte war ein Twitter-Widget auf der Seite aktiviert. Dieses lud jedoch merkwürdig viele externe Ressourcen nach, auf die ich keinen Einfluss habe. Der Versuch des serverseitigen Caching war, aufgrund der hohen Dynamik, nicht erfolgreich. Also weg damit. Ein schnöder Link tut es am Ende auch.

Den Rest macht Google

Übrig bleiben dann noch Optimierungen in der Dateigröße von Bildern und JavaSkript-Dateien. Wer weder Lust noch die Möglichkeit hat entsprechende Werkzeuge anzuwenden, dem bietet PageSpeed Insights alle bemängelten Dateien in einer optimierten Version zum Herunterladen an.

PageSpeed-Tester

Mit den folgenden Online-Werkzeugen (unvollständige Liste) kann die Geschwindigkeit einer Website gemessen werden:

Fazit

PageSpeed ist nicht alles! Möchte man auf Teufel komm raus ein hohes Ergebnis haben, muss man viel Zeit für die Recherche und Anpassung investieren und ggf. Abstriche bei Inhalten und Funktionen machen. Je komplexer die Seite, desto schwieriger wird es.

Ich konnte durch mein Werken die gewünschten 100 Punkte im Google PageSpeed Insight erreichen. Bei den anderen Website-Testern (siehe Liste) schneidet die Seite ebenfalls gut ab und ist i.d.R. über 80% schneller als der Durchschnitt.