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 in een webwinkel te kopen beïnvloedt. Het probleem hier is dat de snelheid van tal van factoren afhangt, en de verbetering ervan kan veel tijd en moeite kosten.
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-commerce conversiepercentages 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 je e-commerce website.
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, wat gebruikers aanmoedigt om meer pagina's te verkennen en langer te blijven.
SEO en ranking:
Paginasnelheid is een van de meest cruciale rankingfactoren voor Google. Metrieken 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 die sites bezoeken via mobiele apparaten, waar de verbindingssnelheden mogelijk lager zijn, wordt een geoptimaliseerde websitesnelheid nog belangrijker. 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 voordelig als je je op een wereldwijd publiek richt en een Content Delivery Network (CDN) gebruikt om gelokaliseerde inhoud te leveren.
Hoe de huidige winkelsnelheid te 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 te laden vanaf verschillende locaties over de hele wereld, 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, tijd tot eerste 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 zichtbaar 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-beheergebied 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-foutopsporingsfuncties in om op problemen te controleren.
Real User Monitoring
Real User Monitoring (RUM) is een prestatiebewakingsaanpak 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.
Meestal voeg je een klein stukje JavaScript-code toe aan je website, die prestatiegegevens verzamelt en naar een server stuurt voor analyse. Dit is hoe de meeste RUM-tools werken, 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 en de problemen kent, 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 de snelheid ook af en toe moeten controleren, omdat deze uiteindelijk kan vertragen. Hier zijn enkele adviezen over hoe je de prestaties van je site kunt verbeteren:
Zoek een betrouwbare hosting
Terwijl de verkeerde optie kan leiden tot ontevreden klanten en verloren zaken, kan de ideale WooCommerce webhosting service een vlekkeloze prestatie, snelle laadtijden en consistente uptime garanderen.
Elk hostingtype kan worden aangeboden onder verschillende abonnementen 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 diens 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 kwaadwillenden voorkomen door je inlog-URL te wijzigen in iets unieks. Je kunt het ook gebruiken om rate-limiting HTTP-problemen te voorkomen.
Als je e-commerce website 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 gebruikersreacties in kleinere porties te verdelen als je veel reacties 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 meerdere 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 geven 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 bekijken.
Comprimeer afbeeldingen
Het is essentieel om je afbeeldingen te verkleinen voordat je ze op je website plaatst, omdat het gebruik van grote afbeeldingen de laadsnelheid van pagina's drastisch zal vertragen. Gebruik software zoals Photoshop, GIMP of Figma om de afbeeldingen op de juiste grootte voor je website te schalen.
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 de verwerking: afbeeldingscompressoren verkleinen de bestandsgrootte door alle overbodige gegevens en metagegevens te verwijderen.
Implementeer Lazy Loading
Een functie die bekend staat als 'lazy loading' voorkomt dat afbeeldingen worden geladen totdat een sitebezoeker naar de plek scrolt waar ze op de pagina verschijnen. Als gevolg hiervan hoeven je klanten niet te wachten terwijl je media laadt om je inhoud 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 die strategisch over de hele wereld zijn gepositioneerd. Points of Presence (PoPs) zijn de namen van deze serverlocaties. Het cachen en leveren van statische bronnen zoals afbeeldingen, JavaScript, CSS, enz., is de belangrijkste taak van een CDN.
Zelfs als je website op een zeer snelle server wordt gehost, heeft de locatie nog steeds invloed. Netwerklatentie en de tijd tot de eerste byte (TTFB) worden beide verminderd door een CDN, die 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 wanneer 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.
Kijk naar de watervalgrafiek in je websitesnelheidstestresultaat om te bepalen wat je moet verwijderen. Het zal je helpen om overbodige assets te identificeren.
Om scripts en stijlen die je niet nodig hebt te verwijderen, gebruik je de 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
Gebruik caching
Caching is de tijdelijke opslag van bronnen van een verzoek, zodat toekomstige verzoeken snel kunnen worden verwerkt. Zowel de server als het apparaat van de gebruiker kunnen de cache vasthouden.
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 door de browser wordt weergegeven en aan de gebruiker getoond. De server wordt enorm belast wanneer duizenden bezoekers tegelijkertijd meerdere verzoeken doen, waardoor 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.
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 aan de pagina's kunt bekijken. 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 net zoveel duplicaten van je originele 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 maken in 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 afhandelen van deze query's te lang duren. Een trage serverresponstijd resulteert uiteindelijk in een trage website. Als gevolg hiervan moet je onnodige 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 zitten 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 'transients'. 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 'transients' kunnen eenvoudig worden verwijderd met de gratis plugin 'Delete Expired Transients'.
Screenshot genomen op de officiële WordPress -website
- Maak je databasetabellen schoon. 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 in 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 plugins voor beeldcompressie, 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. Daarom is mobiele optimalisatie absoluut essentieel.
Het gebruik van een responsief thema is de eenvoudigste aanpak 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 Test-tool 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, verbruik je serverbronnen en verleng je de tijd die nodig is om de uiteindelijke pagina te bereiken. Als gevolg hiervan zal het verminderen van omleidingen 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 hosting controlepaneel. 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 aan je website toegewezen. Afhankelijk van je specifieke site kun je die limiet echter overschrijden. Je kunt altijd contact opnemen met je hostingbedrijf als je hosting controlepaneel 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.
Tot slot
Met de hierboven beschreven methoden kun je de snelheid van je WooCommerce-winkel drastisch verbeteren, van basisaanpassingen in de 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 inzet. 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.
