Browser caching is een techniek waarbij je browser requests zoals HTML, CSS, Javascript, afbeelding en andere assets lokaal bewaard op je toestel (PC, tablet of mobiel toestel). Wanneer je voor de eerste keer een web pagina bezoekt zal je browser de requests downloaden en lokaal bewaren.
De verschillende caching technologieën
Er zijn verschillende browser technologieën. In deze blog post serie neem ik graag volgende caching technieken onder de loep.
- Browser Caching
- CDN (Content Delivery Network) Caching
- Reverse Proxy Caching
- Server-Side Caching
- Database Caching
We starten deze blog post serie met Browser Caching.
Wat is browser caching?
Browser caching is een techniek waarbij je browser requests zoals HTML, CSS, Javascript, afbeelding en andere assets lokaal bewaard op je toestel (PC, tablet of mobiel toestel). Wanneer je voor de eerste keer een web pagina bezoekt zal je browser de requests downloaden en lokaal bewaren waardoor deze assets niet meer opnieuw door de web server moeten worden verwerkt als je browser deze asset (afbeelding, CSS, …) opnieuw nodig heeft.
Als caching is ingeschakeld op de web server van de pagina die je bezoekt zal de web server aan je browser (client) instructies bezorgen hoe je browser deze assets moet behandelen of in technische termen gezegd moet ‘cachen’.
Hoe weet ik wat er door mijn browser is gecached?
Via de browser developer tools kan je vrij eenvoudig te weten komen welke assets door je browser zijn gecached.

Wanneer je klikt op een request (hier de afbeelding) vind je bij de response header de setting Cache-Control
terug. Maar ook in de general instellingen vind je een status code 200
terug met de vermelding ‘from memory cache’.

Je kan de request headers ook via het curl
commando opvragen via volgend commando:
curl -I https://filipvanreeth.com/wp-content/uploads/2024/05/headway-5QgIuuBxKwM-unsplash.jpg
# Result
HTTP/2 200
date: Sun, 12 May 2024 16:01:51 GMT
content-type: image/jpeg
content-length: 328208
last-modified: Sat, 11 May 2024 09:05:27 GMT
etag: "663f34d7-50210"
cache-control: public, max-age=31536000
cf-cache-status: HIT
age: 111369
accept-ranges: bytes
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=dtZZeRwRcHUK1xd9mRRUNf89a0ypRvnjoGps%2BsQjPEhn1ZRzoMjiOjH1GV6hOfAGGpH%2FkkjU2hr5InvMW6Ke6zNdNRcIbLishJCTx0zBnYbTVxqfGgB%2BIS0f%2FVYmcu%2FB0tPkow%3D%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 882ba135db1ab76d-AMS
alt-svc: h3=":443"; ma=86400
ShellScriptOok hier vind je de cache-control: public, max-age=31536000
setting terug die we in onze .htaccess settings hebben ingesteld.
Waar en hoe kan ik als WordPress developer browser caching instellen?
Apache of NGINX
Je instellingen zijn afhankelijk van je web server. Er zijn twee populairste web server setups zijnde Apache of NGINX. Aangezien dat Apache één van de meest populaire is en dat de meeste NGINX setups ook .htaccess
ondersteunen beperk ik me tot de browser caching settings via .htaccess. Wil je liever een NGINX browser caching setup dan vind je hier alle informatie terug.
.htaccess
Het instellen van je .htaccess
voor browser caching is vrij eenvoudig. Onderstaande instelling voeg je toe in het .htaccess bestand in de root folder van je website.
Opgelet: je website kan per directory een .htaccess
bestand bevatten met specifieke instellingen. Zorg ervoor dat je het .htaccess bestand in je web root folder wijzigt. Hou er ook rekening mee dat een fout in je .htaccess
bestand je gehele website onderuit kan halen.
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Video
ExpiresByType video/webm "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
# Fonts
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType application/font-woff "access plus 1 year"
# CSS, JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
# Others
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpg|jpeg|png|gif|swf|css|js|ico|svg|webp)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>
ApacheGZIP compressie
Naast browser caching kan je ook GZIP compressie toepassen. GZIP compressie zorgt ervoor dat indien je bestanden niet zijn gecomprimeerd dat deze door de server in een gecomprimeerd formaat worden aangeboden.
Ook deze instellingen kan je makkelijk en snel toevoegen aan je .htaccess
bestand.
<IfModule mod_deflate.c>
# Force compression for mangled `Accept-Encoding` request headers
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/geo+json" \
"application/vnd.ms-fontobject" \
"application/wasm" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"font/otf" \
"font/ttf" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"text/cache-manifest" \
"text/calendar" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/markdown" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
# Add encoding for SVG files
<IfModule mod_mime.c>
AddEncoding gzip svgz
</IfModule>
</IfModule>
ApacheHappy browser caching
Voila, dat wat het. Niet zo complex, niet? In de volgende blog post nemen we CDN (Content Delivery Network) Caching onder de loep.