Leverage Browser Caching – Wat wil dat zeggen?

Wat te doen bij een ‘Leverage Browser Caching’ melding

Wanneer je gebruik maakt van de Google PageSpeed of een andere performance tool dan kun je een wanneer je WordPress gebruikt, de terugkoppeling krijgen: ‘Leverage Browser Caching’. Wat wil dat nu in vredesnaam zeggen?

Browser Caching is, zoals je waarschijnlijk wel weet, het lokaal opslaan van informatie die je net van het Internet hebt gehaald. Het is zonde van je bandbreedte als je iedere keer opnieuw alle pagina’s, afbeeldingen en andere zaken op moet halen van het Internet. Daarom slaat je browser deze informatie op op je harddisk.

Sommige informatie kan echter regelmatig aangepast worden en om te voorkomen, dat je browser je verouderde informatie laat zien -je zou het niet op prijs stellen, wanneer je bank je je saldo van gisteren en niet van vandaag laat zien- heeft de beheerder of bouwer van de website de mogelijkheid in te stellen welke pagina’s hoe lang gecachd mogen worden of misschien wel, dat het helemaal niet mag (zoals in het voorbeeld van de bank).

Weinig veranderlijke bestanden

Nu gaat WordPress hier in zijn algemeen goed mee om, maar er zijn een paar uitzonderingen. De belangrijkste uitzondering wordt waarschijnlijk wel gevormd door zogenaamde ‘media files’, zoals afbeeldingen, PDF bestanden, geluids- en video bestanden. Mocht je overigens video bestanden op je eigen server hosten, heb je duidelijk nog enkele blogartikelen van mij gemist. Dat doen we natuurlijk bij diensten als Vimeo of Amazon, niet op de eigen server.

Voor de meesten van ons zijn media bestanden bestanden die zelden of nooit wijzigen. Een afbeelding die je eenmaal als illustratie bij een blogartikel gebruikt zal misschien later wel vervangen worden (je haalt die afbeelding weg en voegt een nieuwe toe) maar wijzigen… vast niet.

Afhankelijk van de configuratie van de server waarop we alles geplaatst hebben, zal er echter wel tegen de browser van onze bezoeker vertelt worden, dat de afbeelding slechts een beperkte houdbaarheidsdatum heeft. Een typische standaardwaarde hiervoor is 2 uur. Dus wanneer iemand je site na 2 uur opnieuw bezoekt, worden alle afbeeldingen die hij al eens had gedownload opnieuw geladen. Voor die éne bezoeker maakt het weinig uit, maar stel je eens voor, wat het betekent wanneer je duizenden page-hits per dag hebt. Je kunt al snel 20 tot 50% van je bandbreedte besparen door wat slimmer te cachen.

Maar hoe doe je dat? Wanneer jouw website draait onder Apache of een daarmee verwante webserver, dan kun je dit doen door de .htaccess van je WordPress directory aan te passen. Eén waarschuwig vooraf. Eén tikfout in dit bestand, en je hele website is onbereikbaar geworden.

Wanneer ik .htaccess zeg en jij gelijk denkt: Leuk, ik mag weer, dan mag je het stukje over Yoast SEO overslaan. Heb je nog steeds geen idee waar ik het over heb, lees dan rustig verder.

Yoast SEO

Om de .htaccess aan te passen, moet je via FTP of via het bestandsbeheer van je server aan de slag. Ik weet dat een groot deel van mijn klanten al draaierig wordt als ze het woord FTP horen, maar gelukkig is er ook een omweggetje. Want hoogstwaarschijnlijk gebruik jij Yoast SEO. Het meest bekend ben je waarschijnlijk met de ‘on page’ SEO op de pagina’s en blogposts zelf. Maar er is ook nog zoiets als de ‘algemene’ instellingen van Yoast. En die vind je natuurlijk in het WP Admin menu onder ‘SEO -> Extra’. Als jij onder ‘SEO’ geen ‘Extra’ hebt staan heb je waarschijnlijk te maken met een prehistorische versie van Yoast en is het tijd om eerst de updaten. .

Op de pagina die je dan ziet heb je de keuze ‘Bestandsbewerker’. Klik je daar op, dan zie je mogelijk eerst een vak met de inhoud van je bestand ‘robots.txt’, of de melding, dat dit bestand nog niet bestaat, als dat het geval is, en daaronder een vak met de inhoud van je .htaccess bestand. De kans is groot dat daar in ieder geval het volgende in voorkomt:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Plaats nu helemaal boven aan dit bestand de onderstaande code.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
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 text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Sla daarna het bestand weer op.

Wat heb ik nu eigenlijk gedaan?

Ik neem het je niet kwalijk, als je eigenlijk niets begrijpt van alle bovenstaande code. Maar wat je eigenlijk doet is je webserver vertellen welke bestandstypen hoe lang gecached moeten worden. Mocht je één jaar of één maand wel wat lang vinden, dan staat het je vrij kortere termijnen te bedenken. Welk bestandstype waarbij hoort kun je grofweg raden, door te kijken naar de tekst achter /… ’text/css’ bijvoorbeeld is een bestand wat eindigt met de extensie ‘css’.

Hier ga ik er eigenlijk van uit, dat je site redelijk statisch is: Je zal niet snel een afbeelding veranderen, in die zin, dat je een afbeelding in dezelfde folder met dezelfde naam maar met een andere inhoud plaatsen. Geef je in de vorm van afbeeldingen screenshots van de laatste aandelenkoersen weer, dan kies je natuurlijk niet voor deze aanpak.

En wat levert het mij op?

Als het goed is, levert het je een snellere site op. Omdat een groot aantal bestanden nog in de cache zit, zal de browser minder vaak vragen om een afbeelding door te sturen. En dat verschil is bij een drukke website duidelijk merkbaar. Bovendien zal Google je iets aardiger gaan vinden. Het feit dat bestanden langer gecached worden wordt door Google positief gewaardeerd. Je laat je bezoekers niet onnodig bestanden binnen slepen en een goede gebruikerservaring is ‘Google positief’. Wat ook ‘Google positief’ is, is is een snellere site.

En dat allemaal met een paar regels code die je niet eens begrijpt. Wat kan het leven soms mooi zijn!

[text-blocks id=”algemeen”]

 

Dit artikel geeft een antwoord op onder meer de volgende vragen :

• Hoe maak ik mijn WordPress website sneller?
• Hoe test ik de snelheid van mijn WordPress website?
• Wat betekent ‘Leverage Browser Caching’?
• Hoe kan ik de performance van mijn WordPress website verbeteren?
• Wat kan ik met Google PageSpeed en WordPress?
• Wat kan ik met Yahoo YSlow en WordPress?