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?
Schöne Studie! 🙂
Nur das WOFF würde ich bei Gzip rausnehmen, da es schon komprimiert ist, siehe auch:
https://github.com/h5bp/html5-boilerplate/issues/1135