WordPress & browser caching uitgelegd

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.

  1. Browser Caching
  2. CDN (Content Delivery Network) Caching
  3. Reverse Proxy Caching
  4. Server-Side Caching
  5. 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
ShellScript

Ook 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.

<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>
Apache

GZIP 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>
Apache

Happy 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.