Waarom Browsercaching?

De belangrijkste reden om browsercaching te gebruiken is dat het de belasting op de webserver vermindert, waardoor de laadtijd van de website voor de gebruikers wordt versneld.

Wat is Browser Caching?

De statische data zoals JavaScript en CSS source codes, afbeeldingen, mediabestanden, pdf’s die veel gebruikt worden voor het opladen van een website, kunnen door de browsercaching methode tijdelijk in de computer van de bezoeker opgeslagen worden. Op deze manier kan de bandbreedteverbruik en serverbelasting van de website verminderen. Het dient wel gezegd te worden dat deze methode alleen de laadsnelheid van terugkerende bezoekers verbetert.

(!) HTML is niet statisch.

Browsercaching kan via het configuratiebestand van uw webserver geactiveerd en ingesteld worden. Als u geen toegang heeft tot de configuratiebestand, kunt u zelfstandig gebruik maken van een .htaccess-bestand. Deze file bevindt zich in de root van uw website server.

Voor het activeren van browsercaching worden er twee methoden gebruikt: Expires Header of Cache-Control Header. Met behulp van deze Headers wordt aan de browser doorgegeven hoe lang het een statische data in zijn cache moet opslaan.

Stel dat we aan de browser doorgeven dat het alle afbeeldingen van jpeg format voor één week moet opslaan. Via onze CMS website of een FTP verbinding maken we de .htaccess file open en voegen de volgende regel toe:

ExpiresByType image/jpeg "access plus 1 month"

Hiermee schakelen we de browserchaching in voor alle onze website afbeeldingen die een “jpeg” formaat hebben en geven aan dat de cacheduur een maand lang moet zijn. Op dezelfde manier kunt u de Expires voor alle andere image formaten en ook voor andere resources instellen.

Een cacheduur mag ten minste één week en maximaal één jaar lang zijn voor een resource. Voor de advertenties of Affiliate Marketing websites moet dit ten minste één dag lang zijn.

Onderstaande methoden kunt u toepassen op een website die op een Apache webserver draait. Doe dit indien u eerder met .htaccess hebt gewerkt.

Wees alert: het invoeren van onjuiste codes kan uw website laten crashen.

Browser Caching Activeren via Expires Header

U moet eerst Expires Header inschakelen: ‘ExpiresActive On’ en Expires instellen.

ExpiresDefault en ExpiresByType hebben volgende syntaxis:

 ExpiresDefault "base[plus num type] [num type] ..." 
 ExpiresByType type/encoding "base[plus num type] [num type] ..."

De base is access, now (= access) of modification.
Het plus zoekwoord is optioneel.
Num moet een integer waarde zijn en het type is een van: years, months, weeks, days, hours, minutes, seconds.

Onderstaande resources dienen als voorbeelden. Kies eerst de resources die uw website nodig hebben en bepaal hoe lang dat door browser opgeslagen moet worden.

.htaccess-mod_expires

 ###BEGIN CHACHING 
<IfModule mod_expires.c>
 #Activate
 ExpiresActive On
 # TEXT: JAVASCRIPT, CSS, HTML, XML
 ExpiresByType application/javascript "access 2 months"
 ExpiresByType text/x-javascript "access plus 1 month" 
 ExpiresByType text/css "access 2 weeks"
 ExpiresByType text/html "access plus 0 seconds"
 ExpiresByType text/xml "access plus 0 seconds"
 # IMAGES
 ExpiresByType image/gif "access 1 month"
 ExpiresByType image/jpeg "access 1 month"
 ExpiresByType image/jpg "access 1 month"
 ExpiresByType image/png "access 1 month"
 # FAVICON
 ExpiresByType image/x-icon "access 1 week"
 # Video, Audio
 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"
 # APP - DATA
 ExpiresByType application/xml "access plus 0 seconds"
 ExpiresByType application/json "access plus 0 seconds"
 ExpiresByType application/xhtml-xml "access 2 months"
 ExpiresByType application/rss+xml "access plus 1 hour"
 ExpiresByType application/atom+xml "access plus 1 hour"
 ExpiresByType image/svg+xml "access plus 1 month"
 #DEFAULT
 ExpiresDefault "access 1 month"
 </IfModule>
 ### END CHACHING

ETags Uitschakelen of Inschakelen

Wat is Etags?

Browserverzoeken kunnen een etag en een expire gebruiken om te controleren of er een resource is gewijzigd sinds het werd aangemaakt.

Met het uitschakelen van Etags dwingen we de browser om te vertrouwen op onze Expires header. Op deze manier wordt de browser nooit geverifieerd op refresh en staat het op onze vervaldatum. De bezoeker zal wachten om de wijzigingen op onze webpagina’s te zien totdat hij/zij de cache of vervaldatum wist. Deze optimalisatie methode stellen we niet voor single server omgeving.

#BEGIN Disable ETag 
 FileETag None 
 #END Disable ETag

 #BEGIN Enable ETag
 FileETag MTime Size
 #END Enable ETag

Browsercaching Activeren via Cache-Control Header

De tweede methode voor browser caching is de Cache-control Header. Deze moet u eerst activeren en daarna stelt u de headers (alleen resources die uw website nodig heeft) in. U kunt ook apart voor iedere resource een header en max-age (de hoeveelheid tijd waarvoor een bestand moet worden gecached) definiëren of alles in een header instellen. Hier hebben we gekozen om bepaalde resources (ico, pdf, flv, jpg, js, css en enzovoort) in een header te instellen.

.htaccess-mod_headers

<IfModule mod_headers.c> 
   <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
     Header set Cache-Control "max-age=604800, public"
  </FilesMatch>
</IfModule>

De max-age (vervaldatum of maximale leeftijd) wordt uitgedrukt in seconden.

De max-age waarden:

• Een minuut: maximale leeftijd = 60
• Een uur: max-leeftijd = 3600
• Eén dag: max-leeftijd = 86400
• Een week: maximale leeftijd = 604800
• Een maand: max-leeftijd = 2628000
• Een jaar: max-leeftijd = 31536000

Last-Modified Header

Schakel ETags en Last-Modified headers niet uit voor uw .html-bestanden, laat teninste één van hen aanstaan.

Als u beide verwijdert, elimineert u de If-Modified-Since, If-None-Match verzoeken en hun 304 niet-gewijzigde reacties.

<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header unset Last-Modified
</FilesMatch>
</IfModule>