Pagespeed: WebSite beschleunigen

Admin Service für besseres Pagespeed

Ausnahmsweise mal ein Vorwort

Pagespeed ist ein echtes Technik-Thema. Deshalb wurde dieser Beitrag speziell für Administratoren verfasst. Wir haben uns zwar bemüht, so viel wie möglich zu übersetzen, aber manchmal gibt es eben Grenzen. Was Ihnen wie böhmische Dörfer vorkommt, wird Ihrem ITler helfen. Wenn Sie jedoch keinen eigenen Admin haben und trotzdem Bescheid wissen wollen, fragen Sie einfach nach. Die BB-ONE.net hat dieses Procedere mehrfach erfolgreich durchgeführt und erklärt es Ihnen gerne auch in Hochdeutsch.

Im beschriebenen Fall hatte ein erfahrener Webserver-Admin das Problem tatsächlich in zwei Stunden sauber und sicher gelöst und darüber berichtet.

Ein Praxisfall: Schneller Server – lahme WebSite

Vor kurzem bekam BB-ONE.net den Auftrag, die WebSite eines Unternehmens zu „beschleunigen“. Die Site war mit Typo3 neu eingerichtet, sah gut aus, aber Google-Pagespeed  „meckerte“ über die Ladegeschwindigkeit. Für die Desktop-Variante gab es 57, für die Mobile-Variante 33 von 100 möglichen Punkten. Diese eher unterdurchschnittliche Leistung sollte verbessert werden.

Die WebSite läuft auf einem durchaus schnellen Server, wurde aber spürbar ausgebremst. Eine Analyse ergab, dass relativ viel Ladezeit beim Service „Browser-Caching“ verwendet wurde. Auch wurden sämtliche Daten unkomprimiert ausgeliefert. Der WebSiteAnalyzer setzte noch einen drauf und verlangsamte das ganze zusätzlich.

Erste Hilfe Maßnahmen

Messungen mit Google-Pagespeed ergaben, dass die ausgelieferte Datenmenge reduziert werden sollte. Also wurde dem Webserver Apache das Komprimieren beigebracht. Dafür gibt es das spezielle Modul Deflate (mod_deflate). In diesem Modul wird definiert, welche Datei-Typen vor dem Ausliefern komprimiert werden sollen. So wurden in der Konfigurationsdatei für den Webserver Apache zunächst diese Zeilen hinzugefügt:

LoadModule deflate_module /usr/lib/apache2/modules/mod_deflate.so
AddOutputFilterByType DEFLATE text/html text/plain text/xml

Mit der ersten Zeile wurde erreicht, dass das Modul Deflate beim nächsten Starten geladen wird. Die zweite Zeile weist das Modul an, welche Dateitypen komprimiert werden. Das brachte auf Anhieb 8 Punkte bei Google.

Aber da sollte doch noch mehr gehen, denn mit

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \
    \.(?:exe|t?gz|zip|bz2|sit|rar)$ \
    no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

wurde der erste „AddOutoutFilter“ ersetzt. Dadurch waren nun alle Dateitypen komprimiert, mit Ausnahme von ein paar Sonderfällen, die extra definiert wurden. Nach einem Neustart belohnte Google diese Maßnahme mit weiteren Punkten.  Falls Sie keinen Neustart riskieren wollen, können Sie die Konfigurationsdatei neu einlesen lassen:

/etc/init.d/httpd/restart bzw. /etc/init.d/httpd/reload

Mehr Pagespeed durch getunte .htaccess Datei

Anschließend wurde die Unterstützung für das Browsercaching optimiert. Browsercaching ist grundsätzlich gut, allerdings wird dabei einiges an Serverleistung gezogen. Daher sorgte auch hier eine intelligentere Konfiguration für eine deutliche Verbesserung, gemäß dem Motto: Caching ja, aber ohne überflüssiges Ausbremsen des Servers. Dazu wurden folgende Ergänzungen in der .htaccess-Datei vorgenommen:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType text/x-component A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/x-js A31536000
ExpiresByType text/html A3600
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600 ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600
ExpiresByType text/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType application/json A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/x-font-otf A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>

Diese „wenigen“ Zeilen regeln verkürzt formuliert, wie lange jeweils ein bestimmter Dateityp für „aktuell“ befunden wird. Die Zahl 31536000 steht für exakt ein Jahr. Ein Zeitraum, welcher für das Browsercaching ein guter Erfahrungswert ist.

Zusammen mit der Aktivierung der Datenkomprimierung waren wir nun bei 81 von 100 möglichen Punkten (Desktop). Das ist ein deutlich besserer Wert als die vorherigen 57. Allerdings gab es noch ein kleines Problem mit dem Javascript-Code von Piwik. Obwohl „js“ ausdrücklich bei der Browser-Caching-Definition genannt wurde, bremste dieser Code die Auslieferung noch aus.

Das Finetuning punktet bei Google-Pagespeed

Das vom Kunden verwendete Content Management System Typo3 (Version 6.2) arbeitete in der Konfigurationsdatei page.ts mit dieser Zeile:

g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);

Hier wurde die Kommunikation mit dem WebSiteAnalyzer „Piwik“ definiert, welcher die Nutzerdaten und Webseiten-Parameter normaler Weise auswertet. Eine kleine Änderung, nämlich

g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'/js/'; s.parentNode.insertBefore(g,s);

brachte dann den Erfolg. Google zahlte insgesamt 84 für die Umstellung auf diese Desktop-Variante aus.

Fazit

Für zwei Stunden Arbeit einen Sprung von 57 auf 87 von 100 möglichen Pagespeed-Punkten zu erreichen, ist ein sehr gutes Ergebnis. Finden wir jedenfalls. Falls Sie diesen Erfolg nachahmen wollen, behalten Sie bitte im Hinterkopf, dass diese Anleitung zu einem Server mit CentOS passt. Bei Debian geht das Verfahren etwas anders. Und wenn ein anderer WebServer statt des Apache gewählt wird, ändert sich noch mal einiges.

Doch das Grund-Prinzip bleibt immer identisch:

  1. Daten komprimieren
  2. Browser-Caching optimieren.

Viel Erfolg. Wenn Sie übrigens überprüfen lassen möchten, wie es mit Ihrem Pagespeed aussieht, lassen Sie einfach mal Ihre WebSite checken.