Academy

3 min lezen

Tim

Tim Oosterveld - Webdeveloper

Sitesnelheid optimaliseren met caching – Google PageSpeed

Wil je jouw sitesnelheid optimaliseren met caching? Als je jouw Google Pagespeed wilt optimaliseren is caching van groot belang. Maar wat is de cache precies en hoe kun je deze optimaal instellen middels WP rocket?

WP Rocket wordt gezien als de ultieme WordPress en Woocommerce plugin. Hiermee verbetert de Google PageSpeed score, waardoor jouw website of webshop geheel voldoet aan de Core Web Vitals. Met de Core web vitals meet Google de gebruikerservaring van jouw websitebezoekers. Laat je niet alleen een website ontwikkelen maar ook optimaliseren, dan zal dus ook die gebruikerservaring omhoog gaan. Dit zorgt ervoor dat Google jouw website automatisch hoger waardeert. In dit artikel vertellen wij je alles over hoe ons WordPress bureau jouw sitesnelheid kan optimaliseren met caching. Lees snel verder voor meer informatie. 

Wat is caching precies?

Een cache is ook wel de opslagplaats waarin veelgebruikte bestanden en data tijdelijk opgeslagen worden. Zo worden websites en webshops deels opgeslagen in de cache van je browser. Hierdoor worden het tijdelijke internetbestanden, wat ervoor zorgt dat ze sneller in gebruik zijn.

Cache gebruiken voor een snellere website

Hoe gebruikt ons webbureau cache om te zorgen voor een snellere website? Als wij klaar zijn met webdevelopment, stellen wij de cache in middels WP rocket. Dit is iets wat veel zorgvuldigheid vergt. Wat wij veel zien, is dat als er te veel bestanden zijn opgeslagen in de cache, de functies niet goed meer werken. Zo kan een product minder goed in de winkelmand worden toegevoegd of doen zich andere problemen voor. Het configureren van de cache is zeer belangrijk in de afrondende fase van het development. Door de snelheid te optimaliseren met 0,1 seconde kan dit al zorgen voor 8% verhoging van de conversie op je webshop. Door de cache dus goed in te stellen, maken we je website of webshop sneller.

Een snellere website/webshop = meer conversies.

CSS en JavaScript optimaliseren met WP Rocket

CSS minimaliseren + optimaliseren

Het eerste wat we doen is ervoor zorgen wat WP Rocket de CSS gaat minimaliseren. Bij minimaliseren van de CSS bestanden zullen zowel de reacties als de witruimte uit de CSS verwijderd worden. Dit zorgt ervoor dat de bestandsgrootte kleiner wordt.

Wat ons webdesign bureau daarna doet, is de levering van CSS optimaliseren. Zo wordt render-blocking CSS op jouw webshop of website voorkomen. We laten de CSS asynchroon laden en passen critical CSS toe. Dt zorgt ervoor dat jouw website of webshop online ingeladen wordt boven de vouw. Dit is ideaal, want zo hoeft het browser niet eerst het CSS bestand geheel te lezen als de webshop of website wordt opgehaald.

JavaScript minimaliseren + uitgesteld laden

Is de cache optimaal ingericht voor de CSS, dan minimaliseren we het Javascript en zorgen we ervoor dat deze uitgesteld gaat laden. Dit gaat hetzelfde als de minimalisatie bij CSS. Hierbij verwijderen we ook de witruimte en reacties uit de code. Het zorgt tevens voor een kleiner bestand, waardoor we sneller het browser kunnen ophalen.

Nadat we JavaScript geminimaliseerd hebben, zorgen we ervoor dat deze deferred gaat laden. Om een optimale performance te garanderen, dienen de bestanden in de footer of uitgesteld geladen te worden. Zo wordt het laden van andere bestanden niet geblokkeerd als JavaScript gedownload wordt. In deze fase dient je webshop of website goed getest te worden. Dit moet ook continu herhaalt worden. Is er sprake van problemen, dan kunnen deze worden opgelost door bestanden van de optie uit te sluiten.

Cache gebruiken voor optimalisatie van afbeeldingen

Zodra wij in het webdesign zowel de CSS als JavaScript goed afgesteld hebben, beginnen we met de optimalisatie van de afbeeldingen. Dit doen we als volgt:

Gebruik van LazyLoad

Door LazyLoad te gebruiken, kunnen de afbeeldingen worden ingeladen op het moment dat ze nodig zijn. Schakel je LazyLoad in, dan worden alleen de afbeeldingen die zich op dat moment in de viewport bevinden geladen. Ons webdesign bureau schakelt dit in voor afbeeldingen, maar ook voor video’s en iframes.

Afmetingen van afbeeldingen

We verminderen de layout shifts door alle afbeeldingen te voorzien van een standaard lengte en hoogte. Dit leggen we vast in HTML, zodat de browser weet welk formaat de afbeelding heeft. Hierdoor verspringen buttons e.d. niet.

De levensduur van de cache vaststellen

Een cache gaat standaard 12 uur mee. Na 12 uur wordt de cache weer ververst op de server. Echter adviseren wij een levensduur van 10 tot 24 uur. Een normale website kan prima draaien op een levensduur van 24 uur, maar een webshop cache heeft een veel kortere levensduur.

Hulp nodig bij het instellen van jouw cache? Neem contact met ons op!

Heb je hulp nodig bij het instellen van jouw cache? Neem dan contact met ons op. Als webbureau helpen we jou om de caching op de juiste wijze te integreren, zodat jouw website een flinke laadsnelheid bereikt. Met de specialisten van ons webbureau is dit je gegarandeerd!

Custom WordPress thema’s: hoe werkt het? Volgende artikel

Custom WordPress thema’s: hoe werkt het?