Waarom je webshop traag is, en wat je er zelf aan kunt doenWhy your store is slow, and what you can fix yourself
Bijna altijd zijn het dezelfde vier oorzaken, en drie daarvan kun je zonder ontwikkelaar oplossen. Hieronder wat je in een middag zelf kunt doen, en welk getal in PageSpeed er echt toe doet.
Nearly always the same four causes, and three of them you can fix without a developer. Here is what you can do yourself in an afternoon, and which PageSpeed number actually matters.
Snelheid is een van de weinige dingen waarvan je de opbrengst direct kunt meten. Elke seconde die je erbij krijgt kost conversie, en op mobiel het hardst omdat de verbinding daar wisselvalliger is.
Het goede nieuws: bij Shopify-winkels ligt het bijna nooit aan het platform. Het ligt aan wat er bovenop is gezet.
Eerst meten, en dan het juiste getal
Draai je winkel door PageSpeed Insights. Je krijgt dan een cijfer tussen nul en honderd, en daar staren de meeste mensen zich op blind.
Dat totaalcijfer is een samenvatting en zegt op zichzelf weinig. Kijk in plaats daarvan naar drie waarden eronder:
- LCP — hoe lang het duurt voor het grootste ding op je scherm zichtbaar is, meestal je hoofdafbeelding. Streef naar onder de 2,5 seconde.
- CLS — of de pagina verspringt tijdens het laden. Alles boven 0,1 voelt onrustig.
- INP — hoe snel de pagina reageert als je ergens op tikt. Onder de 200 milliseconde is goed.
Test altijd het tabblad Mobiel en kijk naar de sectie met echte gebruikersgegevens als die er staat. Dat zijn metingen van je werkelijke bezoekers en die tellen voor Google zwaarder dan de test die je zelf draait.
Oorzaak een: je afbeeldingen
Dit is in mijn ervaring bij ruim de helft van de winkels de grootste oorzaak, en het is het makkelijkst op te lossen.
Wat er misgaat: iemand exporteert productfoto’s op vierduizend pixels breed en zet ze zo online. Shopify verkleint ze wel voor de weergave, maar als je thema de verkeerde maat opvraagt laadt de bezoeker alsnog een bestand van vier megabyte.
Wat je zelf kunt doen:
- Exporteer productfoto’s op maximaal 2048 pixels aan de lange zijde. Groter ziet niemand.
- Sla op als JPG met kwaliteit rond de 75. Het verschil met 95 zie je niet, het verschil in bestandsgrootte is een factor drie.
- Gebruik geen PNG voor foto’s. PNG is voor logo’s en tekeningen met scherpe randen.
- Zet je hoofdafbeelding niet als achtergrond in een sectie maar als echte afbeelding, anders begint de browser er later aan.
Alleen dit levert bij de meeste winkels al een tot twee seconden op.
Oorzaak twee: apps die je niet meer gebruikt
Elke app die je installeert zet code in je winkel. Verwijder je de app, dan blijft die code vaak achter. Ik ben winkels tegengekomen met resten van zeven apps die er allang niet meer stonden.
Wat je zelf kunt doen: ga in Shopify naar Winkelinstellingen, Apps en verkoopkanalen en verwijder alles wat je niet gebruikt. Kijk daarna in je thema onder App embeds of er nog blokjes aanstaan van apps die weg zijn.
Wat je daarna nog moet doen, en waar het lastiger wordt: achtergebleven code in de themabestanden opsporen. Dat is het ene punt van de vier waarvoor je meestal iemand nodig hebt.
Oorzaak drie: lettertypen
Drie lettertypen met elk vier gewichten zijn twaalf bestanden die allemaal moeten laden voordat je tekst zichtbaar wordt. Dat is een van de meest voorkomende redenen dat een pagina eerst leeg is en dan ineens vol springt.
Wat je zelf kunt doen:
- Beperk je tot twee lettertypen en per lettertype hooguit twee gewichten.
- Gebruik waar het kan de lettertypen die Shopify zelf meelevert. Die worden vanaf hetzelfde netwerk geladen als de rest.
- Laad je toch van Google Fonts, zorg dan dat er
display=swapin de verwijzing staat. Dan toont de browser eerst een systeemletter in plaats van niets.
Oorzaak vier: het thema zelf
Sommige betaalde thema’s zitten vol met functies die je nooit gebruikt maar die wel meeladen. Schuifpanelen, animaties, filters, een zoekfunctie die alles vooraf inlaadt.
Dit is de reden dat ik bijna altijd op een licht standaardthema bouw in plaats van op een gekocht thema. Zo’n thema wordt door Shopify zelf bijgehouden, en je bouwt erop wat je nodig hebt in plaats van weg te halen wat je niet wilt.
Zit je vast aan een gekocht thema, kijk dan eerst in de instellingen of je functies kunt uitzetten. Veel thema’s laden alleen wat aanstaat.
In welke volgorde je dit aanpakt
Doe niet alles tegelijk, want dan weet je niet wat werkte. Mijn volgorde:
| Stap | Tijd | Verwachte winst |
|---|---|---|
| Afbeeldingen opnieuw exporteren | 2 – 4 uur | Groot |
| Ongebruikte apps verwijderen | 30 minuten | Middel |
| Lettertypen terugbrengen | 1 uur | Middel |
| Themafuncties uitzetten | 1 uur | Wisselend |
| Achtergebleven code opruimen | Ontwikkelaar | Wisselend |
Meet na elke stap opnieuw en schrijf het op. Dan weet je waar de winst zat, en dat is nuttig als je over een half jaar weer iets toevoegt.
Wat je realistisch kunt verwachten
Een gemiddelde Shopify-winkel met een licht thema en fatsoenlijke afbeeldingen haalt op mobiel een score tussen de vijfenveertig en zeventig. Dat klinkt laag, maar de test is streng en rekent zwaar mee dat je een winkel bent met foto’s en betalingen.
Een score van negentig halen is voor een echte webshop bijna niet te doen zonder dingen weg te laten die je nodig hebt. Ga niet jagen op het cijfer; ga jagen op de LCP onder de 2,5 seconde. Dat is wat je bezoeker merkt.
Speed is one of the few things where you can measure the return directly. Every second you add costs you conversion, and hardest on mobile, because the connection there is less reliable.
The good news: with Shopify stores it is almost never the platform. It is what has been piled on top of it.
Measure first, and look at the right number
Run your store through PageSpeed Insights. You get a score between zero and a hundred, and that is what most people fixate on.
That headline score is a summary and says little on its own. Look instead at three values underneath it:
- LCP — how long it takes for the largest thing on screen to appear, usually your hero image. Aim for under 2.5 seconds.
- CLS — whether the page jumps around while loading. Anything above 0.1 feels unsettled.
- INP — how quickly the page responds when you tap something. Under 200 milliseconds is good.
Always test the Mobile tab and look at the real user data section if it is there. Those are measurements from your actual visitors and they count for more with Google than the test you run yourself.
Cause one: your images
In my experience this is the biggest cause in well over half of stores, and it is the easiest to fix.
What goes wrong: someone exports product photos at four thousand pixels wide and uploads them as they are. Shopify does resize them for display, but if your theme requests the wrong size the visitor still downloads a four megabyte file.
What you can do yourself:
- Export product photos at a maximum of 2048 pixels on the long edge. Nobody sees more than that.
- Save as JPG at around quality 75. You cannot see the difference from 95, and the file size difference is a factor of three.
- Do not use PNG for photos. PNG is for logos and drawings with hard edges.
- Set your hero image as a real image rather than a section background, or the browser starts on it later.
This alone gets most stores one to two seconds.
Cause two: apps you no longer use
Every app you install puts code in your store. Remove the app and that code often stays behind. I have come across stores with remnants of seven apps that had long since gone.
What you can do yourself: in Shopify go to Settings, Apps and sales channels and remove everything you do not use. Then check your theme under App embeds for blocks still switched on from apps that are gone.
What comes after that, and where it gets harder: tracking down leftover code in the theme files. That is the one of the four you usually need someone for.
Cause three: fonts
Three fonts with four weights each is twelve files that all have to load before your text appears. It is one of the most common reasons a page is blank and then suddenly fills up.
What you can do yourself:
- Limit yourself to two fonts and at most two weights each.
- Where you can, use the fonts Shopify ships itself. Those load from the same network as everything else.
- If you do load from Google Fonts, make sure
display=swapis in the reference. Then the browser shows a system font first instead of nothing.
Cause four: the theme itself
Some paid themes are packed with features you never use but that load anyway. Sliders, animations, filters, a search that preloads everything.
This is why I nearly always build on a lightweight default theme rather than a purchased one. That kind of theme is maintained by Shopify itself, and you build on what you need instead of stripping out what you do not want.
If you are stuck with a purchased theme, first check the settings for features you can switch off. Many themes only load what is enabled.
The order to tackle this in
Do not do everything at once, or you will not know what worked. My order:
| Step | Time | Expected gain |
|---|---|---|
| Re-export images | 2 – 4 hours | Large |
| Remove unused apps | 30 minutes | Medium |
| Cut back fonts | 1 hour | Medium |
| Switch off theme features | 1 hour | Varies |
| Clean up leftover code | Developer | Varies |
Measure again after each step and write it down. Then you know where the gain was, which is useful when you add something again six months from now.
What to realistically expect
An average Shopify store with a lightweight theme and decent images scores somewhere between forty-five and seventy on mobile. That sounds low, but the test is strict and weighs heavily against being a store with photos and payments.
Hitting ninety is nearly impossible for a real store without leaving out things you need. Do not chase the score; chase an LCP under 2.5 seconds. That is what your visitor actually notices.