caching

website-speed-test

Geschwindigkeit deiner Website optimieren

SEO, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Wir alle kennen die Tools zum Messen der Geschwindigkeit einer Website: Pagespeed, YSlow, Pingdom, Webpagetest oder das Kombitool aus Pagespeed und YSlow GTMetrix. Aber wie wird zum Beispiel Browser Caching aktiviert? Wer sich damit nicht auskennt, der findet viele, viele Artikel dazu, die viel Code in sich haben und nichts erklären. Hier ist noch einer davon. 😉
Über die vergangenen Jahre habe ich dieses Gist immer wieder ergänzt, verbessert und korrigiert. Entstanden ist eine sehr praktische Sammlung von Einstellungen, die fail safe die jeweiligen Möglichkeiten des Hosters ausnutzen. Die entsprechenden Anweisungen sind in If-Abfragen gekapselt, so dass es bei guten Hostern keine Probleme mit nicht unterstützen Modulen geben sollte.

Die Einstellungen teilen sich in drei Bereiche: Komprimierung (Deflate/GZip), Browser Caching (Ablaufdatum für statische Caching-Inhalte definieren) und dem Setzen von sinnvollen Headern (Keep Alive, Accept Encoding, etc.).

#
# Sources:
# http://stackoverflow.com/questions/7704624/how-can-i-use-gzip-compression-for-css-and-js-files-on-my-websites
# http://codex.wordpress.org/Output_Compression
# http://www.perun.net/2009/06/06/wordpress-websites-beschleuinigen-4-ein-zwischenergebnis/#comment-61086
# http://www.smashingmagazine.com/smashing-book-1/performance-optimization-for-websites-part-2-of-2/
# http://gtmetrix.com/configure-entity-tags-etags.html
# http://de.slideshare.net/walterebert/die-htaccessrichtignutzenwchh2014
# http://de.slideshare.net/walterebert/mehr-performance-fr-wordpress
#
<IfModule mod_deflate.c>
# Insert filters / compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt 
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml 
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json 
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
AddOutputFilterByType DEFLATE application/x-font-ttf 
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json 
AddOutputFilterByType DEFLATE font/opentype 
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
# Exception: Images
SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary
# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 month" 
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 1 minute"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month" 
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds" 
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" 
ExpiresByType text/cache-manifest "access plus 0 seconds" 
ExpiresByType audio/ogg "access plus 1 month" 
ExpiresByType video/mp4 "access plus 1 month" 
ExpiresByType video/ogg "access plus 1 month" 
ExpiresByType video/webm "access plus 1 month" 
ExpiresByType application/atom+xml "access plus 1 hour" 
ExpiresByType application/rss+xml "access plus 1 hour" 
ExpiresByType application/font-woff "access plus 1 month" 
ExpiresByType application/vnd.ms-fontobject "access plus 1 month" 
ExpiresByType application/x-font-ttf "access plus 1 month" 
ExpiresByType font/opentype "access plus 1 month" 
</IfModule>
## EXPIRES CACHING ##
#Alternative caching using Apache's "mod_headers", if it's installed.
#Caching of common files - ENABLED
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt|html|htm)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
 <FilesMatch "\.(js|css|xml|gz)$">
 Header append Vary Accept-Encoding
 </FilesMatch>
</IfModule>

<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>
<IfModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>
# Set Keep Alive Header
<IfModule mod_headers.c>
 Header set Connection keep-alive
</IfModule>
# If your server don't support ETags deactivate with "None" (and remove header)
<IfModule mod_expires.c> 
 <IfModule mod_headers.c> 
 Header unset ETag 
 </IfModule> 
 FileETag None 
</IfModule>

Browser Caching aktivieren

SEO, , , ,

Browser Caching ist eine einfache Methode um den Traffic einer Webseite zu reduzieren und somit die Performance zu erhöhen. Zudem dauert die Einrichtung im Apache Webserver maximal fünf Minuten und sollte bei allen gängigen Webhosting Paketen unterstützt werden.

Inhaltsverzeichnis:
Browser Caching nutzen
Browser Caching mit mod_expires
Browser Caching mit mod_headers
Auswirkung und Fazit

Performance Test via Google Page Speed Insights

Auf Google Pages Speed Insights, kann man seine Website auf Geschwindigkeit (Performance) überprüfen lassen und erhält zudem eine detailierte Auswertung und sehr ernst gemeinte Verbesserungsvorschläge. Eine Überprüfung von www.sysadminslife.com sieht zB. (ohne aktiviertem Browser Cache) wie folgt aus:

Google sagt: “Browser-Caching nutzen” – Leverage Browser Caching

“Die Aktualität der folgenden Cache-fähigen Ressourcen ist nur von kurzer Dauer. Legen Sie fest, dass folgende Ressourcen künftig mindestens einmal pro Woche ablaufen”

Jeder moderne Webbrowser (Chrome, Firefox, Internet Explorer, etc) hat einen eingebauten Cache, was bedeutet: dass Dateien zwischengespeichert und nicht bei jedem Aufruf neu heruntergeladen werden müssen. Darunter fallen in der Regel Dateitypen wie Bilder, Stylesheets, Javascripts, etc.. Der Browsercache funktioniert allerdings nur dann vernünftig, wenn auch am Webserver entsprechende Regeln bzw. ein Ablaufdatum für die einzelnen Dateitypen festgelegt wird.

Ist eine entsprechende “expire” Regel aktiviert, so wird dem Browser vom Webserver mitgeteilt, dass zB. das Bild background.jpg für 7 Tage gecached werden kann. Der Browser muss das Bild somit nicht bei jedem Seitenaufruf neu laden, sondern behält es in seinem Zwischenspeicher. Das spart somit Traffic und dadurch auch Ladezeit.

Browser Caching aktivieren – htaccess mit mod_expires

Damit man das Browser Caching nun auf dem eigenen Root Server aktivieren kann, wird zuvor das Modul “mod_expires” aktiviert, falls es noch nicht aktiviert ist. Ein managed Webhosting Paket sollte das Modul eigentlich zur Verfügung stellen. Unter den gängigsten Linux Distributionen wird mod_expires folgendermaßen auf der Commandline aktiviert. Ein Neustart des Apache Prozess ist anschließend erforderlich:

1
2
a2enmod expires
/etc/init.d/apache2 restart

Anschließend wird in die bestehende .htaccess Datei (falls vorhanden) oder in eine neue .htaccess Datei folgender Inhalt eingefügt. Der Teil kann auch direkt in die globale Apache Konfiguration oder in die Vhost Konfiguration geschrieben werden. Die If Anweisung schützt dabei den Apache Prozess, sodass angeführte “Expire Regeln” nur zum Einsatz kommen, wenn auch das Modul mod_expires aktiviert ist:

1
2
3
4
5
6
7
8
9
10
11
12
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/gif "access plus 7 days"
  ExpiresByType image/ico "access plus 7 days"
  ExpiresByType image/jpeg "access plus 7 days"
  ExpiresByType image/jpg "access plus 7 days"
  ExpiresByType image/png "access plus 7 days"
  ExpiresByType text/css "access plus 7 days"
  ExpiresByType text/javascript "access plus 7 days"
  ExpiresByType application/x-javascript "access plus 7 days"
  ExpiresByType application/javascript "access plus 7 days"
</IfModule>

“ExpiresByType” spricht den MIME Type an und setzt via “access plus 7 days” den Cache Wert auf 7 Tage. Die entsprechenden Dateien bleiben also bis zu 7 Tage im Browser Cache erhalten. Hier kann natürlich auch ein höherer oder für gewisse MIME Types (css, xml, js, ..) auch ein niedrigerer Wert eingestellt werden. Je nach Anwendungsgebiet kann hier variiert werden. Mit 7 Tage haben wir allerdings gute Erfahrungen gemacht.

Alternative: Browser Caching mit mod_headers

Als Alternative zur Methode mit dem Modul mod_expires gibt es noch eine Variante mit dem Modul mod_headers. Hier können die Dateitypen direkt über die Dateiendungen angesprochen werden und nicht via MIME-Types:

1
2
a2enmod headers
/etc/init.d/apache2 restart

Nachdem das Modul aktiviert wurde, kann folgender Teil wieder direkt in die .htaccess Datei oder in die Apache Konfiguration eingetragen werden.

1
2
3
4
5
<IfModule mod_headers.c>
<FilesMatch "\.(gif|ico|jpeg|jpe|png|css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

Header set Cache-Control setzt den Wert für max-age auf 604800 Sekunden (7 Tage). Dem Browser wird somit mitgeteilt, dass die gespeicherten Dateien für 7 Tage aktuell sind und nicht erneut vom Server geladen werden müssen. Wenn man für andere Dateitypen noch verschiedene Ablaufdaten festlagen möchte, dann kann einfach eine weitere Zeile (<FilesMatch …. </FilesMatch>) eingefügt werden.

Auswirkung und Fazit

Sobald die htaccess Datei gespeichert wird, ist das Browser Caching aktiv. Eine Aktualisierung des Google Page Speed Insights sollte dabei sofort eine Score Verbesserung anzeigen:

Der Score nur durch die Aktivierung des Browser Caching von 87 auf 90 gestiegen. Das mag auf den ersten Blick nicht viel erscheinen, bringt aber tatsächlich ein wenig Geschwindigkeit und sollte daher auch genutzt werden. Warum Potential verschenken, wenn es so einfach umgesetzt werden kann? ;)

Weitere Verbesserungsmöglichkeiten bietet die gzip Komprimierung einer Website und die Verwendung eines OPcache für PHP.

wp-post

Browser-Caching nutzen – Leverage browser caching

SEO, , , , ,

Wenn das PageSpeed Tool den Punkt Leverage browser caching moniert, dann weist dies auf nicht vorhandenes oder eingeschränktes Cachen der analysierten Webseite hin. In diesem Fall muss der Browser, mit dem der Besucher die Webseite aufruft, alle Inhalte wie Bilder, Logo, CSS und Javascript Dateien neu von der Webseite laden. Je mehr Daten/Inhalte der Browser neu laden muss, desto mehr Traffic versursacht dies, sowie die Ladezeit erhöht sich.

Wenn man nun dem Browser erlaubt einige der Daten der Webseite aus dem Cache zu beziehen, dann wird nicht nur die Ladezeit und der Traffic geringer, sondern die Webseite baut sich in dem Browser schneller auf. Mittels Leverage browser caching lässt sich dies erreichen.

Browser-Caching aktivieren

Damit das Leverage browser caching (Browsercache) optimal genutzt werden kann, muss auf dem Server (wo die Webseite liegt) eines der beiden Module mod_expires oder mod_headers aktiviert sein. Dies ist glücklicherweise bei den meisten Webspace-Anbietern der Fall.
Weiterhin muss die Möglichkeit gegeben sein Einstellungen per .htaccess vornehmen zu können. Sollte dies mit dem aktuellen Webspace nicht möglich sein, hilft eventuell ein Upgrade oder eine Nachfrage bei dem Hoster.

In die .htaccess Datei kann unter Nutzung des Modules mod_expires folgendes eingefügt werden:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>
Alternativ kann man anstelle von “access plus 1 month 1 days” auch “access plus 604800 seconds” schreiben.

Nutzt man dagegen das Modul mod_headers, dann kann folgendes in die .htaccess Datei eingetragen werden:

<IfModule mod_headers.c>
<FilesMatch “\.(js|css)$”>
Header set Cache-Control “max-age=86400, public”
</FilesMatch>

<FilesMatch “\.(gif|png|jpg|jpeg|pdf|ico)$”>
Header set Cache-Control “max-age=604800, public”
</FilesMatch>
</IfModule>
Dabei ist der erste Eintrag für Javascript und CSS Dateien, der zweite für Bilder und PDF-Dokumente.

Leverage browser caching Einstellungen
Mittels der “IfModule mod_expires.c” Abfrage wird geprüft ob das Modul mod_expires aktiviert und somit genutzt werden kann. Erst wenn diese Server-Abfrage erfolgreich war, greifen die nachfolgenden Leverage browser caching Einstellungen.

Der Wert innerhalb der Anführungszeichen(„) legt das Verfallsdatum fest. So z.B. bei “access plus 604800 seconds” nach 604800 Sekunden. Man kann mittels der verschiedenen Zeilen für jeden einzelnen Dateityp genau festlegen wann dessen Verfallsdatum sein soll. Wer z.B. für CSS und HTML Dateien kein Verfallsdatum festlegen möchte, aufgrund von ständigen Änderungen, der entfernt die entsprechenden Zeilen einfach aus der .htaccess Datei.

Wer einen eigenen Webserver mit vollen Zugriff hat, der kann diese Einstellungen auch direkt Konfigurationsdatei des Servers durchführen und muss keine .htaccess Datei nutzen.

Fazit: Mit den kleinen Leverage browser caching (Browsercache) Einstellungen lassen sich sehr schnell große Erfolge hinsichtlich der PageSpeed Optimierung erzielen. Denn die Ladezeit der Webseite verbessert sich deutlich wenn nicht bei dem Aufruf jeder einzelnen Seite alle Dateien (CSS, Javascript, Bilder) neu von dem Server herunter geladen werden müssen.