Google PageSpeed optimaliseren met caching

Hoe we Google Pagespeed kunnen optimaliseren door de cache goed in te richten.

Eerder schreven we al een blog over Google’s Core Web Vitals, wat het is en wat we er mee doen. In die blog hebben we behalve uitgelegd wat het is, ook uitgelegd wat wij ermee doen. In deze blog leggen we je uit wat cache is en hoe we de cache optimaal instellen door middel van WP Rocket. Dé cache plugin voor WordPress en WooCommerce. Hiermee verhogen we de Google PageSpeed score waardoor jouw website of webshop voldoet een de Core Web Vitals.

Wat is cache

Websites en webshops worden (gedeeltelijk) opgeslagen in de cache van je browser. De cache is een opslagplaats waarin veelgebruikte bestanden en andere data tijdelijk kan worden opgeslagen, zo zijn ze sneller toegankelijk. Het zijn daarmee tijdelijke internet bestanden.

WordPress (en WooCommerce) snelheid optimaliseren met cache

In de afrondende fase van een development traject gaan wij aan de slag met het instellen van de cache. Dat doen we met WP Rocket. Het afstellen van de cache is een nauwkeurige klus: laat je de browser te veel bestanden opslaan in de cache? Dan bestaat de kans dat functionaliteiten niet (goed) meer werken. Zoals het configureren van een product of het toevoegen van een product aan de winkelmand.

Anderzijds is het configureren van de cache wel één van de belangrijkste punten in de afrondende fase: de snelheid van je webshop optimaliseren met 0.1 seconde kan namelijk al leiden tot een 8% verhoging van het conversiepercentage van e-commerce. De cache goed instellen kan je je WordPress website of webshop sneller maken, waarmee je het aantal conversies kunt verhogen.

Reden genoeg om dus aan de slag te gaan met het juist afstellen van je cache plugin.

CSS en JavaScript minimaliseren en optimaliseren met WP Rocket

CSS minimaliseren en optimaliseren

Allereerst zorgen we er voor dat WP Rocket de CSS minimaliseert. Met het minimaliseren van de CSS bestanden worden witruimte en reacties uit de CSS verwijderd, waardoor de bestandsgrootte wordt verkleind.

Vervolgens optimaliseren we de levering van CSS, het voorkomt render-blocking CSS op de website of webshop. Allereerst laten we de CSS asynchroon laden. Door critical CSS toe te passen, wordt de styling van de website of webshop boven de vouw inline ingeladen: hierdoor hoeft de browser niet eerst het CSS bestand te lezen bij het ophalen van de website of webshop. Er zijn verschillende tool om deze critical CSS te genereren.

JavaScript minimaliseren en uitgesteld laden

Als de cache voor de CSS goed is ingericht, is het tijd om de JavaScript te minimaliseren en uitgesteld te laden. Het minimaliseren van de JavaScript werkt hetzelfde als het minimaliseren van de CSS: witruimte en reacties worden namelijk ook uit de code verwijderd. Het resultaat is een kleinere bestand, welke sneller door de browser opgehaald kan worden.

Na het minimaliseren van de JavaScript, kiezen we voor de optie om JavaScript deferred te laten laden. Voor performance is het belangrijk dat JavaScript bestanden in de footer worden geladen, of dat deze uitgesteld worden geladen. Dat doen we zodat het downloaden van de JavaScript bestanden niet het laden van andere bestanden blokkeert. Met deze instelling krijgen alle scripts de defer attribute. Het is belangrijk om in deze fase de website of webshop goed te blijven testen, als je tegen problemen aanloopt kun je deze oplossen door bestanden uit te sluiten van deze optie.

Afbeeldingen optimaliseren met cache

Als de CSS en JavaScript cache goed is afgesteld, gaan we aan de slag met het optimaliseren van de media.

LazyLoad

LazyLoad is een functionaliteit waarmee afbeeldingen pas worden ingeladen op het moment dat ze nodig zijn. Door LazyLoad in te schakelen worden alleen afbeeldingen geladen die op dat moment binnen de viewport vallen. Deze optie schakelen we in voor afbeeldingen, iframes en video’s.

Afmetingen van afbeeldingen

Layout shifts kunnen we verminderen door alle afbeeldingen een width en height mee te geven. Door deze afmetingen vast te leggen in de HTML, weet de browser welk formaat de afbeelding heeft en voorkom je het verspringen van buttons en andere belangrijke elementen.

Levensduur van de cache bepalen

Standaard is de levensduur van de cache 12 uur. Dit betekent dat elke 12 uur het cache bestand wordt ververst op de server. Wij adviseren een levensduur van 10-24 uur. Afhankelijk van de functionaliteiten. Een simpele website kan bijvoorbeeld prima overweg met een levensduur van 24 uur, terwijl de cache van een webshop waar dagelijks veel in gewerkt wordt door de klant vaak beter een kortere levensduur kan hebben.

Cache door ons laten instellen?

Is jouw onderneming toe aan de volgende stap online? Loop je bijvoorbeeld tegen de limieten van SaaS oplossingen zoals LightSpeed of Shopify aan? Dan is het tijd om aan de slag te gaan met onze instap webshop. Een volledig maatwerk gerealiseerde voorzien van alle basis functionaliteiten om online te verkopen. Wij stellen de cache voor je in zodat je webshop razendsnel is!