Webshop sneller maken: eerst meten, dan schrappen
Na deze gids kun je de snelheid van je webshop meten zoals Google dat doet, weet je welke drie cijfers tellen en welke grenzen erbij horen, en weet je wat je op jouw platform zelf kunt verbeteren.
Een trage webshop merk je zelf vaak niet. Je zit op snelle wifi, je browser heeft de helft van de site al in het geheugen, en je kent de pagina's uit je hoofd. Je klant zit op een telefoon in de trein en ziet je productpagina voor het eerst.
Daarom begint dit met meten. Niet met een lijst tips.
Meten met PageSpeed Insights
Ga naar PageSpeed Insights, plak een adres en start de test. Je homepage is maar één pagina. Test ook een productpagina en een categoriepagina, want daar komen de meeste bezoekers via Google binnen.
Je krijgt twee soorten resultaten, en het verschil is belangrijk:
- Bovenaan: gegevens van echte bezoekers. Die komen uit het Chrome User Experience Report: hoe snel je site was voor echte Chrome-gebruikers, over de afgelopen 28 dagen. Dit zijn de cijfers die Google gebruikt.
- Daaronder: een labtest. Een gesimuleerde, trage telefoon die je pagina één keer laadt. Daar komt het bekende getal van 0 tot 100 uit, plus een lijst met suggesties.
Kleine winkels zien bovenaan vaak dat er onvoldoende gegevens zijn. Je hebt dan te weinig Chrome-bezoekers voor een eigen meting. Kijk in dat geval naar de labtest, en neem het getal niet te letterlijk: draai de test drie keer en je krijgt drie verschillende scores.
Kijk vooral naar de tab Mobiel, Desktop ziet er bijna altijd beter uit. Bij de meeste winkels komt het merendeel van de bezoekers via een telefoon.
Heb je Search Console gekoppeld, dan vind je onder Functionaliteit het rapport Site-vitaliteit, met daarin de Core Web Vitals, met de pagina's gegroepeerd per probleem. Op Shopify staat een samenvatting op de pagina Onlinewinkel in het beheercentrum, met de drie cijfers van echte bezoekers (Shopify Help).
De drie cijfers die tellen
Google noemt ze Core Web Vitals. De drempels hieronder komen van web.dev en gelden voor het 75e percentiel: driekwart van de paginabezoeken moet binnen de grens vallen.
| Cijfer | Wat het meet | Goed | Slecht |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Hoe snel het grootste element zichtbaar is, meestal je hoofdfoto | 2,5 seconden of minder | meer dan 4 seconden |
| INP (Interaction to Next Paint) | Hoe snel de pagina reageert als iemand klikt of tikt | 200 milliseconden of minder | meer dan 500 milliseconden |
| CLS (Cumulative Layout Shift) | Hoeveel de pagina verspringt tijdens het laden | 0,1 of minder | meer dan 0,25 |
Tussen goed en slecht zit "verbetering nodig". INP verving in 2024 de oudere meting FID; kom je die afkorting nog tegen in een oud artikel, dan is dat artikel verouderd.
Wat het in de praktijk betekent voor een webshop:
- Slechte LCP: de productfoto bovenaan is te zwaar, wordt te laat geladen, of zit achter een slider die eerst moet opstarten.
- Slechte INP: te veel scripts. Elke chatwidget, reviewbalk, pop-up en trackingpixel vraagt rekentijd op de telefoon van je klant.
- Slechte CLS: een cookiebalk, aankondigingsbalk of reviewblok dat de pagina naar beneden duwt nadat die al zichtbaar was. Of afbeeldingen zonder vaste afmetingen.
Afbeeldingen: daar zit meestal de grootste winst
Op een gemiddelde productpagina zijn de foto's het zwaarste wat er geladen wordt. Drie dingen helpen.
Het juiste formaat uploaden
Een foto rechtstreeks van je camera of telefoon is vaak 4000 pixels breed en enkele megabytes groot. Niemand ziet dat verschil op een scherm. Rond de 2000 pixels aan de lange kant is ruim genoeg, ook voor inzoomen. Verklein vóór je uploadt, en hou alle productfoto's in dezelfde verhouding: dat ziet er beter uit en voorkomt verspringen. Meer daarover in productfoto's voor je webshop.
WebP of AVIF
Moderne formaten zijn bij dezelfde kwaliteit een stuk lichter dan JPEG. Of je daar zelf iets voor moet doen, hangt af van je platform:
- Shopify levert afbeeldingen via zijn eigen CDN automatisch als WebP of AVIF als de browser dat ondersteunt (Shopify blog). Je hoeft niets om te zetten.
- WordPress en WooCommerce accepteren WebP- en AVIF-uploads. Bestaande JPEG's omzetten doe je met een plugin voor beeldoptimalisatie of via je host.
- JouwWeb, Wix, Lightspeed: het platform verwerkt afbeeldingen zelf. Jij bepaalt vooral hoe groot het bestand is dat je uploadt.
Lazy loading, maar niet bovenaan
Lazy loading betekent dat een afbeelding pas laadt als de bezoeker ernaartoe scrolt. Voor foto's lager op de pagina is dat goed. Voor de hoofdfoto bovenaan is het slecht: die wil je juist zo vroeg mogelijk. Een thema of plugin die alles lazy laadt, inclusief de eerste foto, maakt je LCP trager. In de labtest van PageSpeed Insights zie je bij de diagnose welk element je LCP is.
Apps en plugins opruimen
Elke app die iets op je winkelpagina toont, laadt meestal een eigen script. Vaak op elke pagina, ook waar het niets doet. Vijf apps voor "conversie" die elk een script laden, dat is de traagste manier om meer te verkopen.
Zo pak je het aan:
- Maak een lijst van alle apps of plugins die je hebt.
- Schrijf bij elke app op wat hij de afgelopen maand heeft opgeleverd. Weet je dat niet, dan is dat ook een antwoord.
- Verwijder wat niets doet. Uitzetten is niet genoeg.
- Meet opnieuw.
Let op bij Shopify: oudere apps konden code in je thema achterlaten die na het verwijderen blijft staan. Apps die met app-blokken werken ruimen zichzelf beter op. Zie je na verwijderen nog verzoeken naar het domein van een oude app, kijk dan in je themacode of vraag het de maker van de app.
Bij WooCommerce werkt het hetzelfde. Deactiveer een plugin, test of er niets breekt, en verwijder hem dan. Een plugin die "ooit handig kan zijn" laadt intussen elke dag.
Twijfel je tussen twee apps die hetzelfde doen? Hou degene die het minste laadt. Een reviewblok dat alleen op productpagina's laadt is beter dan een die zich op elke pagina meldt.
Thema
Een thema met tien sliders, animaties bij elke scroll en drie lettertypes is mooi in de demo. Je betaalt het in laadtijd.
- Sliders bovenaan: één sterke foto doet meestal meer dan vijf wisselende. Wie scrollt, ziet de andere toch nooit.
- Lettertypes: twee families is genoeg. Elk extra gewicht (dun, normaal, vet, cursief) is een extra bestand.
- Paginabouwers op WordPress voegen veel code toe. Een lichter thema met de standaard blokeditor is vaak sneller.
- Verouderde thema's: op Shopify zijn recente thema's sneller dan thema's van vijf jaar geleden. Een themawissel is wel een project; test eerst een kopie.
Video
Video werkt goed om te laten zien hoe een product werkt. Het is ook het zwaarste wat je op een pagina kunt zetten.
- Video bovenaan die vanzelf speelt: comprimeer hem stevig, hou hem kort, zet hem zonder geluid, en geef hem een stilstaand beeld (poster) dat meteen zichtbaar is.
- YouTube of Vimeo insluiten: zo'n speler laadt veel scripts, ook als niemand op afspelen drukt. Een miniatuur met een afspeelknop, die pas bij een klik de echte speler laadt, scheelt flink. Daar bestaan apps en plugins voor, of je thema doet het al.
- Lager op de pagina: laat video pas laden als de bezoeker in de buurt komt.
Per platform: wat je wel en niet kunt
| Wat je zelf regelt | Wat het platform regelt | |
|---|---|---|
| Shopify | Thema, apps, foto's, video, scripts in het thema | Hosting, CDN, beeldformaten |
| WooCommerce | Alles: hosting, caching, thema, plugins, foto's | Niets vanzelf, behalve wat je host of plugins doen |
| JouwWeb, Wix, Lightspeed | Foto's, aantal elementen, ingesloten widgets, eigen code | Hosting, thema-code, beeldverwerking |
Op WooCommerce heb je de meeste knoppen, en dus ook de meeste manieren om het fout te doen. Goedkope gedeelde hosting en geen caching zijn daar de klassiekers. Zet een cacheplugin of de caching van je host aan, en controleer dat winkelwagen en afrekenen worden uitgesloten. Meer over WordPress-winkels in WooCommerce SEO.
Op een gesloten platform zoals JouwWeb kun je minder. Dat is niet erg: je kunt er ook minder kapotmaken. De winst zit daar in zware foto's, te veel ingesloten widgets (Instagram-feeds, chatknoppen, externe reviewblokken) en eigen scripts in de head. Zie ook JouwWeb webshop tips.
Hoe ver moet je gaan?
Een score van 100 in de labtest is geen doel. Groen bij de echte gegevens, of bij weinig verkeer een redelijke labscore op mobiel, is genoeg. Daarna levert een snellere site minder op dan een betere productpagina of een duidelijkere gratis-verzenddrempel.
Snelheid is een voorwaarde, geen verkoopargument. Een snelle pagina met slechte foto's verkoopt niet. Een trage pagina met goede foto's verkoopt minder dan hij zou kunnen. Wil je weten waar jouw winkel staat? Onze gratis scan neemt snelheid mee, naast de andere lekken. Voor de rest van het verhaal: conversie van je webshop verhogen.
Veelgestelde vragen
Waarom geeft PageSpeed Insights elke keer een andere score?
De labtest laadt je pagina één keer op een gesimuleerde telefoon, en kleine verschillen in netwerk en server geven een ander getal. Draai hem een paar keer en kijk naar de trend. De gegevens van echte bezoekers bovenaan schommelen veel minder.
Telt snelheid mee voor mijn positie in Google?
Ja, de Core Web Vitals zijn een van de signalen. Het is geen zwaar signaal: een relevante pagina die wat trager is, kan nog steeds bovenaan staan. Het grootste effect zie je bij je bezoekers, die eerder afhaken op een trage telefoonpagina.
Mijn winkel heeft "onvoldoende gegevens" bij echte gebruikers. Wat nu?
Dan heb je te weinig Chrome-bezoekers voor een meting op basis van echte gegevens. Gebruik de labtest als richting, en op Shopify de snelheidsrapporten in het beheercentrum, die op je eigen bezoekers gebaseerd zijn.
Moet ik al mijn foto's opnieuw uploaden?
Niet allemaal tegelijk. Begin met de hoofdfoto's van je best verkopende producten en de grote beelden op je homepage. Daar winnen de meeste bezoekers tijd.
Helpt een snelheidsapp of optimalisatieplugin?
Soms, vooral op WordPress voor caching en beeldcompressie. Op Shopify beloven sommige apps snelheid terwijl ze zelf een script toevoegen. Meet voor en na, en hou de app alleen als het verschil er echt is.