Essentials für Google PageSpeed Insights #01: Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen – .htaccess

Google gibt Web-Entwicklern mit den PageSpeed Insights ein mächtiges Tool an die Hand, welches neben einem etwas kryptischen und nichts-sagendem Score auch wirklich hilfreiche Tips ausgibt, anhand derer eine Website sinnvoll weiterentwickelt werden kann.

Eine der häufigsten auftauchenden Fehlermeldungen ist dabei „Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen“.

Nun stellt sich oftmals die Frage:

Was tun?

Am besten lässt sich dafür die .htaccess-Datei nutzen, die auch unerfahrene Nutzer bei Shared-Hostern erstellen und/oder modifizieren können.

Zuerst muss eine .htacces Datei erstellt werden, bzw. die bestehende Datei geöffnet werden.

Am besten erstellt man eine .htaccess in einem Texteditor und speichert sie vorerst als „htaccess.txt“ ab.

In diese Datei müssen nun einige Anpassungen, um eine Cache-Richtlinie einzurichten.

Zuerst definieren wir Datei-Typen, die serverseitig meist unwichtig und daher nicht bekannt sind. In diesem Fall sind das die OpenFont-Schrifttypen .eot, .ttf, .otf, .woff und .woff2, sowie das moderne Vektorformat .svg:

AddType application/vnd.ms-fontobject .eot 
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType application/font-woff2 .woff2
AddType image/svg+xml .svg

Erst „schalten“ wir den Cache aktiv ein.

Nun legen wir fest, wie lange der Inhalt der Seite gesamt bzw. den Inhalt, dem wir keine extra Regel geben, gecached werden soll. In diesem Fall ist der „default“ die Zeit des Aufrufens der Seite plus 60 Sekunden:

ExpiresActive On
ExpiresDefault "access 60 seconds"

Anschließend sollten einige extra Regeln festgelegt werden. In diesem Beispiel lege ich fest, dass Bilder einen Monat lang gespeichert werden sollen, ebenso wie css und Javascript-Dateien, Schriften aber ein Jahr lang gespeichert sein sollen.

ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType text/css "access plus  1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/font-woff2  "access plus 1 year"

Zu guter letzt packen wir alles in ein <IfModule>, um unerwünschte 500-Fehler zu vermeiden, die bei bestimmten Server-Konfigurationen, z.B. ohne vorgesehenen Cache, vorkommen könnten:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType text/css "access plus  1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/font-woff2  "access plus 1 year"
</IfModule>

Nun muss die htaccess.txt auf den Server, in das Hauptverzeichnis (meist /html) der jeweiligen Seite hochgeladen werden. Dort sollte sie von htaccess.txt zu .htaccess (ohne Dateiendung) umbenannt werden.

Dabei kommt es je nach (S)FTP-Client manchmal zu Warnmeldungen, diese könnt ihr ignorieren bzw. bestätigen.

Nun sollte Google PageSpeed Insights – zumindest in diesem Punkt – nicht mehr meckern.