Browser cache voor pagespeed in htaccess

Elke website moet gebruik maken van browser cache voor pagespeed. Dit is één van de eisen die door Google gesteld worden voor pagespeed en Web Vitals. Het is eenvoudig om dit zelf te doen en je hebt hier niet veel programmeer kennis voor nodig. Hier een korte uitleg en de code om zelf de browser cache in htaccess in te stellen op de juiste manier.

Lever statische items met een efficiënt cachebeleid

Heb je ooit deze tekst gezien in je pagespeed test van Google? Of zoiets als de afbeelding hieronder omschrijft?

Dan is het tijd dat je verder leest en zelf je htaccess op de beste manier aanpast voor browser cache voor pagespeed en Web Vitals.

Browser cache voor pagespeed

De browser cache is wat bezoekers opslaan in hun browser bij hun eerste bezoek aan een website. Dit is natuurlijk afhankelijk van de browserinstellingen. Bij het eerste bezoek aan een website slaat de browser verschillende informatie op, zoals css en javascript files, afbeeldingen, enz. Dit wordt opgeslagen in de browser cache.

De volgende keer dat zij jouw website bezoeken hoeft de browser niet alles opnieuw te downloaden. Dit is een aanzienlijke verbetering voor pagespeed en Web Vitals. Dit werkt niet alleen nadat de bezoeker de website voor de eerste keer heeft bezocht. Het werkt al als men bij het eerste bezoek meerdere pagina’s bekijkt. Belangrijke zaken staan dan al in de cache voordat men een andere pagina bekijkt.

Browser cache in htaccess

De browser cache in htaccess instellen is niet moeilijk en daar is weinig programmeer kennis voor nodig. Je hebt wel toegang nodig tot de ftp om de htaccess file te downloaden. Deze file, htaccess of .htaccess, staat in de root van je website. Als je de file niet ziet kan het zijn dat je verborgen files niet kan zien.

In filezilla kan je dan bij de server >> Force showingen hidden files aanklikken om de verborgen file te bekijken.

Download de file en plaats de volgende code onder de code die er al staat. Verwijder dus niets, Je plaatst er alleen een stukje extra code bij. Hierna kan je de file weer uploaden via de ftp en je zal zien dat je foutmelding is verdwenen.

# Browser cahe settings by Cornelis Freelance website ontwikkeling SEO & Pagesoeed
# https://www.cornelisdeleeuwvanweenen.nl/
 
AddType image/x-icon .ico
AddType application/vnd.ms-fontobject .eot 
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg
 
# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed 
# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
 
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                              "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest           "access plus 0 seconds"
# Your document html
  ExpiresByType text/html                     "access plus 0 seconds"
# Data
  ExpiresByType text/xml                      "access plus 0 seconds"
  ExpiresByType application/xml               "access plus 0 seconds"
  ExpiresByType application/json              "access plus 0 seconds"
# Feed
  ExpiresByType application/rss+xml           "access plus 1 hour"
  ExpiresByType application/atom+xml          "access plus 1 hour"
# Favicon (cannot be renamed)
  ExpiresByType image/x-icon                  "access plus 1 year"
# Media: images, video, audio
  ExpiresByType image/gif                     "access plus 1 year"
  ExpiresByType image/png                     "access plus 1 year"
  ExpiresByType image/jpeg                    "access plus 1 year"
  ExpiresByType video/ogg                     "access plus 1 year"
  ExpiresByType audio/ogg                     "access plus 1 year"
  ExpiresByType video/mp4                     "access plus 1 year"
  ExpiresByType video/webm                    "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"
# HTC files  (css3pie)
  ExpiresByType text/x-component              "access plus 1 year"
# Webfonts
  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"
  ExpiresByType application/x-font-ttf        "access plus 1 year"
  ExpiresByType font/opentype                 "access plus 1 year"
  ExpiresByType application/x-font-woff       "access plus 1 year"
  ExpiresByType image/svg+xml                 "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
# CSS and 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 month"
  ExpiresByType image/x-ico                   "access plus 1 year"
  ExpiresByType image/vnd.microsoft.icon      "access plus 1 year"
</IfModule>

Het is een lange lijst die misschien voor zich spreekt maar eventjes een snel en korte uitleg.
De regels 4 t-m 9 zijn om extra types zoals fonts, favicon en svg toe te voegen. De rest is een lijst met de verschillende bestandstypes en de levensduur van de cache. Vooral dit laatste is erg belangrijk.

De levensduur is de tijd dat iemand het in de browser cache kan bewaren voordat het vernieuwd moet worden. Is deze te kort dan krijg je in je pagespeed en Web Vitals score als nog een melding dat het niet goed is. Dat is waarom hier de meeste is ingesteld op 1 jaar.

Hiermee is de browser cache in htaccess instellen eenvoudig. Je hoeft alleen bovenstaande code te plaatsen in je htaccess file. Daarna zal de opmerking “Lever statische items met een efficiënt cachebeleid” in je pagespeed test zijn verdwenen.

Browser cache voor Web Vitals

De Web Vitals van Google zijn voornamelijk gerichte op de bezoekersvriendelijkheid om de bezoekerservaring te verbeteren. De reden waarom je de browser cache voor pagespeed gebruikt. Pagespeed is een belangrijk onderdeel van Web Vitals. Dus als je het doet voor pagespeed dan doe je het ook voor

Handmatig of met plugin?

Voor WordPress zijn er plugins die dit voor je doen maar weer een plugin die de website onveiliger en langzamer kan maken. Het is zo eenvoudig om dit zelf te doen dat het echt niet nodig is om een plugin te gebruiken. De plugins doen precies hetzelfde. Vaak geven ze je ook allerlei opties en mogelijkheden die je helemaal niet nodig hebt.

De enige reden om een plugin te gebruiken is als je niet bij je htaccess kan komen omdat je geen toegang hebt tot ftp bijvoorbeeld. Omdat de plugin hetzelfde doet zou je na het instellen de plugin kunnen verwijderen. Test hierna wel eventjes of het nog steeds goed werkt.

Voor Joomla geldt hetzelfde maar vergeet niet dat Joomla zelf beschikt over een standaard ingebouwde cache. Deze is erg goed maar is niet hetzelfde als de browser cache.