Trage WooCommerce-winkels kunnen je op verschillende manieren geld kosten, van een toename in het aantal verlaten winkelwagentjes tot het verlies van klantloyaliteit. Volgens Unbounce zegt bijna 70% van de consumenten dat de paginasnelheid hun wens om bij een onlinewinkel te kopen beïnvloedt. Het probleem is dat de snelheid afhangt van tal van factoren, en de verbetering ervan kan veel tijd en moeite vergen.
Volgens Portent dalen de conversiepercentages van websites met gemiddeld 4,42% voor elke seconde die een pagina nodig heeft om te laden tussen 0 en 5 seconden, waarbij pagina's met laadtijden tussen 0 en 2 seconden de hoogste e-commerceconversiepercentages hebben.
Als de laadsnelheid van je website meer dan 2-3 seconden bedraagt, is dit artikel wat je nodig hebt. Hier vind je verschillende bewezen tips voor het meten en verbeteren van de prestaties van e-commercewebsites.
Waarom is snelheid belangrijk?
Websitesnelheid is een cruciaal element voor het succes van elke online onderneming, inclusief WooCommerce-winkels, om verschillende redenen:
Gebruikerservaring:
Internetgebruikers hebben doorgaans een korte aandachtsspanne. Trage laadtijden kunnen ertoe leiden dat bezoekers je website verlaten voordat deze volledig is geladen. Een snelle website daarentegen maakt navigeren gemakkelijker, waardoor gebruikers worden aangemoedigd om meer pagina's te verkennen en langer te blijven.
SEO en ranking:
Paginasnelheid is een van de meest cruciale rankingfactoren voor Google. Statistieken zoals Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS) maken deel uit van de rankingfactoren van Google. Snellere websites hebben meer kans om hoger te scoren in zoekmachines. Met de opkomst van mobiel zoeken, heeft de mobiele paginasnelheid ook een aanzienlijke invloed op SEO.
Kostenefficiëntie:
Geoptimaliseerde, snellere websites verbruiken over het algemeen minder bandbreedte en kunnen resulteren in lagere hostingkosten. Snellere sites vereisen ook minder tijd en moeite om te onderhouden.
Mobiele gebruikers:
Met een toenemend aantal gebruikers dat sites via mobiele apparaten bezoekt, waar de verbindingssnelheden mogelijk lager zijn, wordt een geoptimaliseerde websitesnelheid nog crucialer. Langzaam laden kan nog problematischer zijn op mobiele apparaten en leiden tot hogere bouncepercentages.
Wereldwijd bereik:
Gebruikers uit verschillende regio's met verschillende internetsnelheden kunnen een consistente ervaring hebben als je website is geoptimaliseerd voor snelheid. Snellere websites zijn gunstig als je mikt op een wereldwijd publiek en een Content Delivery Network (CDN) gebruikt om gelokaliseerde content te serveren.
Hoe de huidige winkelsnelheid evalueren?
Voordat je met het verbeteringsproces begint, moet je bepalen waar je nu staat en de huidige winkelsnelheid achterhalen en welke problemen je site mogelijk vertragen. Hier zijn enkele methoden en tools die je kunt gebruiken om de snelheid van je WooCommerce-site te evalueren:
Directe testtools
Deze tools testen de prestaties van je website rechtstreeks door deze vanaf verschillende locaties over de hele wereld te laden, waarbij verschillende apparaten en verbindingssnelheden worden gesimuleerd:
- Google PageSpeed Insights: Biedt inzichten in de snelheid voor zowel mobiel als desktop. Geeft ook WooCommerce-optimalisatiesuggesties.
- GTmetrix: Voert een gedetailleerde analyse uit, inclusief watervalgrafiek, aanbevelingen en verschillende scores.
- WebPageTest: Biedt gedetailleerde informatie zoals snelheidsindex, time to first byte en meer.
Browserontwikkelaarstools
Deze oplossingen, ingebouwd in moderne browsers, stellen ontwikkelaars in staat om websites te inspecteren, debuggen en profileren:
- Chrome DevTools: Gebruik de tabbladen Netwerk en Prestaties om de sitesnelheid te analyseren.
- Firefox Developer Tools: Met deze tools kunnen ontwikkelaars webpagina's inspecteren, debuggen en profileren, waardoor ze het gedrag en de structuur van websites beter begrijpen.
Server-side tools
Deze tools kunnen helpen bij het identificeren van server-side problemen die mogelijk niet duidelijk zijn met frontend-testtools:
- New Relic: Biedt een diepgaande analyse van serverprestaties, goed voor het opsporen van back-end knelpunten.
- Loganalyse: Analyseer serverlogs om problemen op te sporen.
Plugin-gebaseerde controles
Plugins kunnen een handige en krachtige manier bieden om verschillende aspecten van de prestaties van je WooCommerce-winkel rechtstreeks vanuit je WordPress-beheergedeelte te monitoren. Hier zijn enkele populaire plugin-gebaseerde benaderingen:
- Query Monitor: Een WordPress-plugin om te controleren welke query's je website vertragen.
- WP Debugging: Schakelt WordPress-debugfuncties in om op problemen te controleren.
Real User Monitoring
Real User Monitoring (RUM) is een aanpak voor prestatiebewaking die elke transactie van gebruikers van een website of applicatie vastlegt en analyseert. In tegenstelling tot synthetische monitoringmethoden, die gebruikersgedrag simuleren, verzamelt RUM gegevens van de daadwerkelijke interacties van gebruikers met je site.
Normaal gesproken voeg je een klein stukje JavaScript-code toe aan je website, die prestatiegegevens verzamelt en naar een server stuurt voor analyse. Zo werken de meeste RUM-tools, hoewel specifieke implementatiedetails kunnen variëren. Enkele nuttige tools voor RUM zijn New Relic Browser, Boomerang, Akamai mPulse en andere.
14 manieren om de snelheid van je WooCommerce-winkel te verhogen
Nu je de huidige laadsnelheid kent en weet welke problemen er zijn, kun je een optimalisatiestrategie opstellen. Houd er rekening mee dat je waarschijnlijk verschillende aspecten van de website moet aanpakken om een geweldige WooCommerce-winkelsnelheid te bereiken. Je zult ook af en toe de snelheid moeten controleren, omdat deze uiteindelijk kan vertragen. Hier zijn enkele adviezen over hoe je de prestaties van je site kunt verbeteren:
Vind een betrouwbare hosting
Hoewel de verkeerde optie kan leiden tot ontevreden klanten en verloren zaken, kan de ideale WooCommerce-webhostingservice een vlekkeloze prestatie, snelle laadtijden en consistente uptime garanderen.
Elk hostingtype kan worden aangeboden onder verschillende plannen met verschillende prijspunten. Overweeg daarom bij het zoeken naar een hostingprovider binnen je prijsklasse functies zoals server-side caching, voldoende bandbreedte en RAM voor de behoeften van je site, high-performance SSD-opslag en bijgewerkte software, zoals PHP en MySQL.
Als je een shared hostingplan hebt, betekent dit dat honderden websites dezelfde server en zijn bronnen gebruiken. Kies een host die het aantal toegestane websites op elke server beperkt, of overweeg een upgrade naar een VPS of een dedicated plan.
Optimaliseer prestatie-instellingen
Wijzig eerst de URL van je inlogpagina. De inlog-URL is meestal standaard en bij iedereen bekend, inclusief hackers, wat websites kwetsbaar maakt voor aanvallen.
Je kunt brute-force-aanvallen van kwaadwillende actoren vermijden door je inlog-URL te veranderen in iets unieks. Je kunt het ook gebruiken om rate-limiting HTTP-problemen te voorkomen.
Als je e-commercewebsite ook een blog heeft, beperk dan het aantal berichten dat in je blogfeed verschijnt. Als je een populaire blog beheert, lopen de prestatiebesparingen op. Deze aanpassingen kunnen worden gedaan in de Leesinstellingen van het WordPress Dashboard.
Screenshot genomen op de officiële WordPress-website
Schakel vervolgens pingbacks op je website uit. Meestal produceren ze spam. WordPress biedt je ook de mogelijkheid om grote gebruikerscommentaren in kleinere porties te verdelen als je veel commentaren van gebruikers op je artikelen of pagina's hebt. Om de laadtijd van je productpagina te verkorten, houd je deze waarde tussen 10 en 20.
Heroverweeg het gebruik van plugins en extensies
Er is een overvloed aan plugins voor WooCommerce, die onbeperkte veelzijdigheid bieden. Dit betekent echter niet dat je ze allemaal moet installeren.
Talloze plugins verhogen de hoeveelheid Javascript- of CSS-bestanden op je website, waardoor je server meer HTTP-verzoeken ontvangt, wat de activiteiten van je bedrijf vertraagt. Bovendien betekent het hebben van meer plugins dat je meer serverbronnen gebruikt, wat de laadtijden vertraagt.
Het maakt niet uit hoeveel plugins je gebruikt; wat telt is hun kwaliteit. Kies plugins die tal van taken kunnen uitvoeren, lees recensies om meer te weten te komen over de prestaties, controleer of ze regelmatig worden bijgewerkt en installeer opties van gerenommeerde bronnen.
Kies een snel e-commercethema
Bij het kiezen van een e-commercethema kiezen websiteontwerpers vaak voor esthetiek zonder rekening te houden met hoe snel pagina's laden. Als gevolg hiervan krijgt het uiterlijk van de frontend vaak voorrang op de laadsnelheid van de pagina.
Om de laadtijd te optimaliseren, kies je een WooCommerce-thema dat licht en prestatie-geoptimaliseerd is. Zorg ervoor dat het thema responsief is en een schone codebase heeft.
Houd er ook rekening mee dat veel thema's je ook de mogelijkheid bieden om elementen die je niet gebruikt uit te schakelen. Om te bepalen of een thema snel laadt, probeer je de snelheidstools te gebruiken om de demopagina's te testen of de recensies van gebruikers te doorbladeren.
Comprimeer afbeeldingen
Het is essentieel om je afbeeldingen te verkleinen voordat je ze op je website plaatst, aangezien het gebruik van grote afbeeldingen de laadsnelheid van pagina's drastisch zal vertragen. Om de afbeeldingen op de juiste grootte voor je website te schalen, gebruik je software zoals Photoshop, GIMP of Figma.
De bestandsgrootte van je foto's kan worden verkleind zonder kwaliteitsverlies door compressie. Selecteer het juiste formaat; tenzij je afbeelding een doorzichtige achtergrond heeft, zijn JPEG-afbeeldingen, die kleiner zijn, vaak het beste om te uploaden. Let op de grootte: het uploaden van een afbeelding van 2000 pixels past niet op een plek die slechts 500 pixels breed is. Comprimeer de afbeelding na verwerking: afbeeldingscompressoren verkleinen de bestandsgrootte door alle overbodige gegevens en metadata te verwijderen.
Implementeer lazy loading
Een functie die bekend staat als 'lazy loading' voorkomt dat afbeeldingen worden geladen totdat een sitebezoeker naar beneden scrolt naar de plek waar ze op de pagina verschijnen. Als gevolg hiervan hoeven je klanten niet te wachten terwijl je media laadt om je content te bekijken. Als je website veel afbeeldingen heeft, kan deze strategie de laadtijden voor de winkel aanzienlijk verkorten.
Je kunt lazy loading op je WooCommerce-winkel installeren met behulp van WordPress-plugins. De plugins verkorten de tijd die nodig is om je website in eerste instantie te openen.
Lever statische bronnen via CDN
Een content delivery network (CDN) is een netwerk van servers dat strategisch over de hele wereld is gepositioneerd. Points of Presence (PoP's) zijn de namen van deze serverlocaties. Het cachen en leveren van statische bronnen zoals afbeeldingen, JavaScript, CSS, enz., is de hoofdtaak van een CDN.
Zelfs als je website op een zeer snelle server wordt gehost, heeft de locatie nog steeds invloed. Netwerklatentie en time to first byte (TTFB) worden beide verminderd door een CDN, dat de afstand tussen elke gebruiker en de bronnen van de site verkort.
Het kiest automatisch de dichtstbijzijnde CDN PoP om de gecachte bronnen te leveren op basis van de oorsprong van het verzoek. Veel CDN's bieden naast caching extra prestatieverbeterende mogelijkheden, zoals betere on-the-fly beeldcompressie, HTTP/3-ondersteuning, hotlink-preventie en verhoogde beveiliging.
Verwijder ongebruikte scripts en stylesheets
De meeste WordPress-plugins en -thema's laden scripts en stylesheets op elke pagina van je website. Zelfs als ze niet nodig zijn op de pagina, laden ze deze items toch.
Door deze onnodige elementen van websites te verwijderen, kun je de paginagrootte verkleinen en het laden van WooCommerce-pagina's versnellen, wat je tijd kan besparen bij het opzetten van nieuwe sites en het toewijzen van personeel. WooCommerce is kwetsbaar voor dit probleem, net als zijn extensies.
Bekijk de watervalgrafiek in het resultaat van je websitesnelheidstest om te bepalen wat je moet verwijderen. Het zal je helpen om overbodige assets te identificeren.
Om van scripts en stijlen af te komen die je niet nodig hebt, gebruik je wp_dequeue_script en wp_dequeue_style. Asset CleanUp: Page Speed Booster is een van de plugins die het eenvoudig maken om hetzelfde doel te bereiken.
Screenshot genomen op de officiële WordPress-website
Schakel over op caching
Caching is de tijdelijke opslag van bronnen van één verzoek, zodat toekomstige verzoeken snel kunnen worden verwerkt. Zowel de server als het apparaat van de gebruiker kunnen de cache bevatten.
Wanneer een gebruiker een verzoek doet voor een website, haalt de DNS-server de webpagina op van de hostingserver, en de app op de webserver voert scripts uit, doorzoekt de database en produceert de webpagina, die vervolgens wordt weergegeven en aan de gebruiker wordt getoond door de browser. De server wordt zwaar belast wanneer duizenden bezoekers tegelijkertijd meerdere verzoeken doen, wat ervoor zorgt dat de pagina langzaam laadt.
Caching komt in deze situatie van pas. Het vermindert de inspanning die nodig is om een paginaweergave te produceren, waardoor de afhankelijkheid van WordPress van PHP en een database afneemt. WordPress werkt bijna net zo snel als statische webpagina's, zo niet precies zo.
Server-side caching en browsercaching zijn de twee hoofdcategorieën van online caching, elk met een verscheidenheid aan subcategorieën.
Beperk revisies
WooCommerce biedt een standaard revisiecontrole op productpagina's waarmee je terug kunt gaan en wijzigingen kunt zien die op de pagina's zijn aangebracht. Hoewel wijzigingen voordelig kunnen lijken, kunnen ze soms prestatieproblemen in WooCommerce veroorzaken.
Stel bijvoorbeeld dat je een pagina maakt en deze meerdere keren bewerkt, waarbij je telkens één element toevoegt of verwijdert. Je hebt evenveel duplicaten van je oorspronkelijke pagina als je wijzigingen hebt aangebracht, ook al is de wijziging bescheiden. De prestaties van WooCommerce kunnen hier uiteindelijk onder lijden en geleidelijk verslechteren.
Je moet bepaalde aanpassingen doen aan het wp-config.php-bestand in de root van de website om revisies te beperken/uit te schakelen.
Database opschonen
Elke keer dat een gebruiker je website bezoekt, vragen ze de inhoud van je website op, die grotendeels statisch is. Ze doen echter een dynamisch verzoek wanneer ze een bestelling plaatsen.
Als de database van je winkel niet is geoptimaliseerd, kan het te lang duren om deze query's af te handelen. Een trage serverresponstijd resulteert uiteindelijk in een trage website. Als gevolg hiervan moet je nutteloze rommel verwijderen om de database op te schonen en te optimaliseren.
Er zijn verschillende benaderingen voor database-optimalisatie:
- Verwijder oude revisies. De pagina's, artikelen en goederen van je WooCommerce-winkel zullen vol staan met verouderde wijzigingen als deze al een tijdje online is. Het is tijd om ze op te ruimen. De eenvoudigste methode is om plugins zoals WP-Sweep of WP Rocket te gebruiken.
- Verwijder verlopen transiënten. Een defecte tijdelijke cache produceert af en toe meer dan een miljoen nutteloze vermeldingen zonder duidelijk einde in zicht. Na verloop van tijd kunnen klantsessies zich opstapelen, waardoor duizenden extra vermeldingen aan je databasetabellen worden toegevoegd. Een opgeblazen database kan je website in dergelijke omstandigheden platleggen. Alle verlopen transiënten kunnen eenvoudig worden verwijderd met de gratis plugin Delete Expired Transients.
Screenshot genomen op de officiële WordPress -website
- Schoon je databasetabellen op. Alles wat nodig is om je e-commercebedrijf te runnen, wordt bewaard in je WooCommerce-database. Je database wordt inefficiënt en bewaart uiteindelijk veel onbelangrijke gegevens wanneer gegevens worden toegevoegd aan en verplaatst tussen de tabellen. Het opschonen van je databasetabellen is essentieel om deze extra informatie te verwijderen.
- Schakel functies uit die niet cruciaal zijn maar de database belasten. Thema's en plugins voor WooCommerce hebben veel slimme functies die in eerste instantie geweldig lijken, maar uiteindelijk de database vernietigen. Een van de voorbeelden zijn beeldcompressieplugins, die afbeeldingen comprimeren op dezelfde server die de website host. Plugins die tellers aan je website toevoegen, zoals weergaven, opmerkingen, enz., moeten ook worden vermeden.
Voer mobiele optimalisatie uit
Volgens Oberlo zegt 60% van de shoppers dat de mogelijkheid om via mobiel te winkelen een belangrijk criterium is bij de merkselectie. Mobiele optimalisatie is dus absoluut essentieel.
Het gebruik van een responsief thema is de eenvoudigste manier om je WordPress-website aan te passen voor mobiele apparaten. Houd je winkelpagina's zo eenvoudig mogelijk, want mobiele klanten houden niet van eindeloos scrollen. Overweldig ze niet met informatie.
Als je bedrijf veel artikelen toont, maak het dan eenvoudiger voor mobiele klanten om ernaar te zoeken door live productfilters aan te bieden. Overweeg de WooCommerce Product Search-plugin te installeren.
Gebruik de Lighthouse-tool van Chrome of de Mobielvriendelijke testtool van Google om te zien of je website voldoet aan de vereiste richtlijnen voor mobiele bruikbaarheid.
Minimaliseer omleidingen
De server registreert elke klik op een link naar een pagina in je winkel als een omleiding. In wezen moet de server gebruikers naar de juiste pagina leiden. Hoewel het maar een paar seconden duurt, kunnen klanten het als een lange tijd ervaren, wat direct van invloed is op het bouncepercentage van je winkel.
Als je website veel omleidingen heeft, gebruik je serverbronnen en verleng je de tijd die nodig is om de uiteindelijke pagina te bereiken. Het verminderen van omleidingen zal dus resulteren in een merkbare toename van de laadtijd van de pagina, aangezien dit een beproefde WooCommerce-optimalisatieaanpak is.
Update je PHP-versie en verhoog de geheugenlimiet
Elke PHP-update is sneller dan de vorige versies. Je host bepaalt de PHP-versie die je gebruikt, en je kunt deze vaak wijzigen in je hostingcontrolepaneel. De specifieke procedure kan echter variëren afhankelijk van je provider. Als alternatief kun je de klantenservice vragen om het voor je te doen. Maak een volledige back-up van de website voordat je je PHP-versie bijwerkt, en test vervolgens alles om er zeker van te zijn dat het correct functioneert.
Je hostingbedrijf heeft een bepaalde hoeveelheid geheugen toegewezen aan je website. Je kunt deze limiet echter overschrijden op basis van je specifieke site. Je kunt altijd contact opnemen met je hostingbedrijf als je hostingcontrolepaneel je niet toestaat de limiet te wijzigen. PHP krijgt standaard een geheugentoewijzing van 32 MB van WordPress. Het zal automatisch proberen deze limiet te verhogen naar 40 MB of 64 MB als het problemen ondervindt. Deze limiet is vaak niet voldoende voor een WooCommerce-site. Het wordt aangeraden om deze limiet te verhogen naar 256 MB.
Laatste woord
Met de hierboven beschreven methoden kun je de snelheid van je WooCommerce-winkel drastisch verbeteren, van basisaanpassingen in instellingen tot geavanceerde server-side oplossingen. Deze technieken zijn bedoeld om de snelheid van je website te verbeteren en moeten deel uitmaken van een doorlopende strategie om niet alleen de prestaties van de site te verbeteren, maar ook te onderhouden.
Uiteindelijk is snelheidsoptimalisatie geen eenmalige taak, maar een voortdurende verbintenis. Het regelmatig monitoren van de snelheid van je website met behulp van de verschillende besproken tools en methoden kan waardevolle inzichten opleveren in hoe goed je WooCommerce-optimalisatie-inspanningen werken.
