Auf dem letzten WordPress Meetup Köln war das Thema Performance Optimierung von WebSites, als Beispiel hatte Phillip auch wpcgn.de aufgerufen und einige Dinge aufgezeigt. Nach der Vorlage musste ich ja jetzt ran und die Seite schneller machen 😉

Ausgangslage war der Test via Pingdom Website Speed Test:

Perf. 74/100 • 26 Requests • 1,4s Load Time • 1,4 MB Size

Als erstes habe ich die Header Grafik und das IWCGN Logo optimiert und damit gut 500kB an Daten eingespart.

Im nächsten Schritt habe ich die verwendeten Google Fonts ausgeschaltet mit dem Plugin: Disable Google Fonts und somit weitere 100kB an Daten und 5 Requests eingespart.

Weiterhin wurde die fehlende GZip Kompression angemeckert, also habe ich zuerst versucht diese mit einem weiteren Plugin: GZip Ninja Speed Compression zu aktivieren, dies hat aber nicht für alle Bestandteile der Site funktioniert, so das ich es dann über die .htaccess Datei im Root der WebSite selber aktiviert habe, mit dem Ergebniss weiter 445kB an Daten eingespart zu haben.

## ENABLE COMPRESSION ##
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png
## ENABLE COMPRESSION ##

Jetzt galt es noch die nötigen Requests zu minimieren, indem JavaScript, CSS und HTML Dateien zusammengefasst werden, dazu habe ich das Plugin: Autoptimize installiert und damit weitere 15kB an Daten und 8 Requests gespart.

Jetzt ging es zum Schluss ans Caching und dafür habe ich das Plugin: Cachify aktiviert und damit die Ladezeit um weitere 0,4s reduziert, allerdings habe ich das Caching noch zusätzlich in der .htaccess Datei mit folgenden Einstellungen optimiert:

# Keep-Alive
<ifModule mod_headers.c> 
Header set Connection keep-alive 
</ifModule>

# Set Expires Headers
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Jan 2015 20:00:00 GMT"
</FilesMatch>

# Set the cache-control max-age
# 1 year
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=31449600, public"
</FilesMatch>
# 2 DAYS
<FilesMatch ".(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>
# 4 HOURS
<FilesMatch ".(html|htm)$">
Header set Cache-Control "max-age=14400, must-revalidate"
</FilesMatch>

# Turn off the ETags
Header unset ETag
FileETag None

# Turn off the Last Modified header except for html docs
<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
</FilesMatch>

All diese Einstellungen führten zu folgendem Ergebniss:

Ergebnis: 86/100 • 13 Requests • 1s Load Time • 405kb Size

Also unterm Strich die Hälfte der Requests gespart, die Größe der Seite um 70% reduziert und damit gut 0,4s schnellere Ladezeit, nicht schlecht, oder was meint Ihr?