Page Speed

Ein von Google PageSpeed Insights gerade bei WordPress-Installationen gern bemängelter Punkt ist das fehlende Browser Caching. Hierbei geht es um einen einfachen Mechanismus, der Deine Seite für den Benutzer schneller macht:

Die Browser müssen beispielsweise Bilder nicht bei jedem Besuch neu herunterladen, die können sie sich einfach auf die Festplatte speichern und nächstes Mal einfach von dort aufrufen. Das ist in der Regel viel schneller, als das Bild nochmal zu laden. Der Nachteil ist nun der: Wenn Du das Bild änderst, zeigt der Browser trotzdem das alte Bild an, weil er nicht merkt, dass sich das Bild geändert hat.

Um dieses Verhalten nun kontrollierbar zu machen, wurde die Möglichkeit geschaffen, dem Browser zu sagen, wie lange eine Datei vom Webserver gültig sein soll. Wenn Du dem Titelbild also eine Laufzeit von einer Woche gibst, wird der Browser dieses Bild eine Woche lang nicht mehr nachfragen und statt dessen die Kopie von der lokalen Festplatte nehmen und anzeigen. Ja, wenn Du das Bild in dieser Woche änderst, wird es erst nach Ablauf der Gültigkeitszeit vom Browser angezeigt.

Und nun die Crux: WordPress gibt in der Standard Installation keine Gültigkeitsdauer mit. Das heißt, dass die Browser keine Datei zwischenspeichern und sie alles bei jedem Besuch immer wieder neu herunterladen. Besonders langsam werden dadurch Seiten mit vielen Bildern, aber auch alle andere.

Browser Caching kann nur in der .htaccess eingeschaltet werden und zwar durch einfügen dieser Zeilen:

# BEGIN Browser-Caching aktivieren - Olaf Kapinski 2017-05
<IfModule mod_expires.c>
ExpiresActive On
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 year"
# Media: images, video, audio
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresDefault "access 1 month"
</IfModule>
# END Browser-Caching aktivieren

Dieser Codeblock ist selbsterklärend, denke ich. Du kannst längere Cachezeiten eintragen, also month gegen year tauschen, ich habe aber bessere Ergebnisse mit diesen ehr konservativen Einstellungen.
Erweitere die .htaccess erst, wenn Dein WordPress fertig ist. Wenn Du noch am Entwickeln der Seite bist, kann Dich der Browsercache leicht in den Wahnsinn treiben, weil Änderungen nicht sichtbar werden.

Danach wertet Google PageSpeed Insights den Bereich Browser Caching zumindest als weitgehend aktiviert und gibt reichlich Punkte. Und Deine Webseite wird merklich schneller, probier es aus.

 

Speed it up!

Dein OLAF KAPINSKI