Hoe verbeter ik de snelheid van mijn WooCommerce webshop?

Misschien wel één van de meest gestelde vragen die wij ontvangen is: Hoe verbeter ik de snelheid van mijn WooCommerce webshop? En dat is niet vreemd, want paginasnelheid is superbelangrijk. Aan de ene kant geef je de bezoeker hiermee een prettige ervaring in je webshop, aan de andere kant is het een belangrijke rankingfactor voor Google. Een trage WooCommerce webshop kost je geld. We hoeven het belang van paginasnelheid dan ook meestal niet uit te leggen. Maar hoe verbeter je die snelheid nou?

In dit artikel laat ik je een aantal stappen zien die je kunt uitvoeren ter verbetering van de paginasnelheid.

 

Nulmeting

Er zijn verschillende websites waar je de huidige paginasnelheid kunt meten. Google Pagespeed Insights en GTMetrix zijn 2 bekende tools die dit voor je doen, maar in dit artikel wil ik gebruik maken van WebPageTest.org. Om iets beter inzicht te krijgen, ga je op deze website eerst naar de Advanced Settings en klik je op het tabblad Chrome. Hier vink je Capture Lighthouse Report aan. Lighthouse is een nieuwe tool van Google die je helpt de kwaliteit van websites te verbeteren.

Het rapport dat WebPageTest.org genereert ziet er uit als onderstaand. Zoals je ziet, zijn in dit voorbeeld niet alle resultaten even goed. Ook al scoort de website www.sweatpak.nl een A op 2 punten, de F komt 3x voor en dit heeft dan ook verbetering nodig. Ook de totale Lighthouse PWA score van 31 is te laag.

webpagetest-result

In bovenstaand voorbeeld is het belangrijk te letten op First Byte en Start Render. Deze 2 metingen geven je een goede indruk van je paginasnelheid.

De First Byte geeft de tijd aan die nodig is vanaf het moment dat een client een verzoek indient om de eerste byte aan gegevens van de webserver te ontvangen.

De Start Render geeft de snelheid weer waarmee het eerste element op een pagina verschijnt. Dit kan een achtergrondkleur, een tekstblok of iets anders zijn. Een snelle load geeft de bezoeker alvast een indicatie dat de pagina wordt weergegeven en dat de rest van de content binnenkort verschijnt.

Bovenstaande nulmeting geeft ons voldoende kansen om deze website te verbeteren.

 

Hosting

Hosting is de ruimte op internet die je nodig hebt om je website te publiceren en ervoor te zorgen dat je website voor de rest van de wereld zichtbaar wordt. De hosting is daarmee een belangrijke factor waar door WooCommerce webshop bezitters helaas nog wel eens op wordt bespaard. Kies je voor een goedkope webhosting oplossing, dan is de kans groot dat je terecht komt op een shared hosting oplossing waarbij je de beschikbare ruimte en capaciteit moet delen met soms wel honderden andere websites. Het verbeteren van je paginasnelheid begint dan ook vaak met het selecteren van de juiste hosting.

Wij geven je graag advies over de beste keus op het gebied van hosting voor jouw WooCommerce webshop. 

 

WooCommerce thema

Het thema dat je gebruikt voor je WooCommerce webshop is heel belangrijk als het gaat om laadtijd. Bij het kiezen van een nieuw thema is het dan ook altijd verstandig te kijken wat de ontwikkelaar heeft gedaan aan SEO-optimalisatie. Ook kun je bijv. een demowebsite eens scannen in een tool als WebPageTest om te zien welk resultaat dit oplevert.

Onderstaande thema’s zijn goed geoptimaliseerd voor WooCommerce en SEO:

 

Minimaliseer je code

Een webpagina bestaat uit heel veel losse onderdelen die allemaal via de code van je website worden geladen. Hoe meer onderdelen er op jouw website staan, hoe meer code er in de bron van je site moet komen en hoe langer het duurt tot de website volledig is geladen. Deze code beïnvloedt de prestaties van je webshop en is daarmee een belangrijk onderdeel om te optimaliseren.

De plug-in Autoptimize is gratis te installeren en helpt je bij het minimaliseren van de code. De plug-in werkt heel eenvoudig. Na het installeren en activeren vink je 3 vakjes aan zoals onderstaand te zien is.

autoptimize-plugin-woocommerce-snelheid

Autoptimize voegt bestanden samen zodat je browser minder bestanden hoeft te laden. Deze bestanden worden ook nog eens verkleind en gecached. Al deze optimalisaties verbeteren de laadtijd van je webshop.

In het 1e voorbeeld van www.sweatpak.nl gaf alleen het installeren van deze plug-in al een verbetering in de WebPagetest resultaten. De First Byte zit nu op 1.568s en Start Render verlaagde naar 2.400s. Met het installeren van 1 gratis plug-in kun je dus de paginasnelheid al verbeteren.

 

Optimaliseer je afbeeldingen

Nog veel te vaak zien wij websites met immens grote afbeeldingen, soms zijn dit exact de afbeeldingen zoals gemaakt met een camera. De afbeelding wordt dan misschien wel kleiner op de website getoond, maar de browser moet nog steeds het grote bestand laden. Zorg dus dat je afbeeldingen al op het juiste formaat zijn voor je deze gaat toevoegen aan een product of blog. Je kunt hiervoor een programma als Photoshop gebruiken, maar er zijn ook websites die je hierbij helpen. TinyPNG is zo’n website die je .png of .jpg bestanden verkleint en zonder kwaliteitsverlies optimaliseert. Je zult zien dat het verkleinen van je afbeeldingen via TinyPNG je snellere laadtijden gaat bezorgen, ook al is het wel even een extra stap.

Origineel screenshot gemaakt van TinyPNG website – 317KB

 

Dezelfde afbeelding na optimalisatie door TinyPNG – 76KB

tinypng-screenshot

Je zult begrijpen dat in een webshop met honderden afbeeldingen het verschil heel groot wordt.

Heb je al een webshop, dan adviseer ik om TinyPNG eerst toe te passen op de vaste afbeeldingen zoals je logo en bijvoorbeeld de achtergrondafbeelding. Vervolgens kun je vanaf nu de nieuwe afbeeldingen optimaliseren via TinyPNG. Voor de aanwezige afbeeldingen in je webshop kun je de TinyPNG plug-in installeren die deze optimaliseert. Ook deze plug-in installeerde ik op www.sweatpak.nl en dit leverde een flinke besparing op, zoals te zien in onderstaand voorbeeld.tinypng-plugin-afbeeldingen-optimaliseren

Andere tips om de paginasnelheid te verbeteren door optimaal gebruik van afbeeldingen:

  • Gebruik een CDN, afbeeldingen worden dan op een externe server opgeslagen en hoeven niet geladen te worden via jouw webpagina. Dit kan via Cloudflare of Jetpack.
  • Gebruik de juiste afmetingen van de afbeeldingen in je webshop en uploadt de afbeelding direct in dit formaat zodat de browser niet hoeft te rekenen voor je.

 

Conclusie

Is jouw WooCommerce webshop (te) traag? Een snelle WooCommerce webshop zorgt voor meer conversies en maakt je beter vindbaar in Google. Het is dus nogal de moeite om hier tijd en aandacht aan te besteden. Dit is bovendien geen eenmalige taak, maar een continu proces waar je steeds mee bezig moet blijven. Wil je de paginasnelheid van jouw webshop eens kritisch laten bekijken. Neem dan contact met ons op voor een vrijblijvend voorstel.

×
×

Winkelmand

Send this to a friend