HowTo: WordPress auf hohen PageSpeed optimieren – Teil 2

Nachdem wir uns bereits um die optimale Bildergröße gekümmert und den HTML und CSS Code per Kompressor verkleinert haben (HowTo: WordPress auf hohen PageSpeed optimieren – Teil 1), kommen wir nun noch zu weiteren Punkten, die wir verbessern können:

„Browser Caching nutzen“, Dateien online komprimieren
Die folgenden Änderungen können in einer htaccess-Datei vorgenommen werden. Bei Hosting-Paketen ist dies meistens auch die einzige Möglichkeit. Wer einen eigenen (V) Server hat, sollte die Änderungen direkt in der vhost-Datei vornehmen.

Warum? Nun, die htaccess-Datei wird bei jedem Aufruf einer Datei gelesen. Egal ob die Index-Seite, den eingebetteten Bildern, JavaScript und CSS-Dateien. Also alleine für eine Startseite gut und gerne fünf bis zehn Aufrufe. Wenn die Änderung zentral in der vhost vorgenommen werden, wird dies nur beim Start des Apache einmalig gelesen.

Hinweis für Plesk: Bei meinen Plesk-Servern ist das Apache Modul „mod_expires“ nicht aktiviert. Dies kann jedoch über die Plesk-Oberfläche erledigt werden. Aber auch der klassische Weg, das Modul über Apache zu aktivieren, ist möglich.

# BEGIN WordPress

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
 AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
 AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
 AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
 AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
 AddOutputFilterByType DEFLATE font/truetype font/opentype
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Was macht unser Code? Der Code besteht aus drei Blöcken, die jeweils das Vorhandensein eines bestimmten Apache-Modules (<IfModule) prüfen. Wenn das Modul vorhanden ist, wird der Code innerhalb der IF-Tags ausgeführt. Fehler im Code quittiert der Apache mit einem Fehler 500.

mod_expires.c: Wir aktivieren dieses Modul und weisen den Apache an, bestimmten Dateitypen wie Grafiken, JS oder CSS-Dateien ein bestimmtes Ablaufdatum im Header mitzusenden. Somit kann der aufzurufende Browser die Datei cachen und läd sie nicht immer erneut vom Webserver. Dies spart sehr viel Bandbreite, wenn immer wiederkehrende Bilder oder eine zentrale CSS-Datei nicht bei jedem Blättern einer Seite erneut geladen wird.

mod_deflate.c: Obwohl wir unseren HTML und CSS Code bereits über einen Kompressor optimiert haben, weisen wir nun den Apache an, die definierten Dateien per gzip online zu komprimieren und so verkleinert an den Browser zu senden. Was aufwändig klingt, zeigt sich in der Praxis als gängig und optimal. Die Zeit, die der Server für die Komprimierung und der Ziel-Browser für das Entpacken benötigt, ist durch den geringeren Datenaustausch von Server zum Client gut angelegt. Auch kommen heute alle gängigen Browser mit einer solch online optimierten Übertragung zu Recht. In unserer Definition werden nur Textdateien (HTML, CSS etc) und keine Bilder komprimiert.

Im dritten und letzten Teil unserer kurzen Artikelserie über PageSpeed gehen wir auf JavaScript, den Zeichensatz und Mod_rewrite ein.