Shopify sneller maken: thema, apps en afbeeldingen

Elke Shopify-winkel draait op dezelfde servers en hetzelfde CDN, dus een trage winkel is traag door wat hij laadt: het thema, scripts van apps, afbeeldingen en video. Snelheidsoptimalisatie in Shopify betekent die dingen weghalen en verkleinen, niet van hosting wisselen. In de meeste winkels zit de grootste winst in ongebruikte appcode weghalen, de hero-afbeelding comprimeren en widgets later laden.

Deze gids laat zien hoe je snelheid goed meet en loopt daarna de fixes door in de volgorde waarin ze meestal iets opleveren. Hij hoort bij de gids SEO voor Shopify.

Meet de juiste pagina's

Test een productpagina en een collectiepagina, niet alleen de homepage. Dat zijn de pagina's die ranken en waarop kopers binnenkomen.

Google PageSpeed Insights geeft labscores voor één keer laden en, als je winkel genoeg bezoekers heeft, echte Core Web Vitals van Chrome-gebruikers over de laatste 28 dagen. De cijfers van echte gebruikers zijn de cijfers die Google gebruikt.
Het Core Web Vitals-rapport in Search Console groepeert je URL's op status, zodat je ziet of alle productpagina's hetzelfde probleem hebben.
Het rapport over webprestaties van Shopify in Analytics toont dezelfde metingen van echte gebruikers door de tijd heen, handig om te checken of een wijziging hielp.

Richt je op de drie Core Web Vitals: Largest Contentful Paint (hoe snel de hoofdafbeelding of tekst verschijnt), Interaction to Next Paint (hoe snel de pagina reageert op een tik) en Cumulative Layout Shift (hoeveel dingen verspringen). Labscores schommelen van test tot test; jaag niet op een perfecte 100.

1. Haal appcode weg die je niet gebruikt

Apps zijn de meest voorkomende oorzaak van een trage Shopify-winkel. Elke app die de winkel zelf raakt, kan JavaScript en CSS aan elke pagina toevoegen.

Maak een lijst van je apps. Verwijder alle apps die je niet meer gebruikt.
Een app verwijderen haalt niet altijd de code weg die hij aan het thema heeft toegevoegd. Zoek in je themabestanden (Online Store > Themes > Edit code) op de naam van de app en verwijder achtergebleven snippets en scripttags.
Kies liever apps die theme app extensions gebruiken (app-blokken die je in de thema-editor toevoegt). Die worden netjes verwijderd als je de app verwijdert en laden alleen waar je ze plaatst.
Check bij apps die je houdt of ze op elke pagina laden. Een maattabel is alleen op productpagina's nodig.

2. Repareer de grootste afbeelding

Op de meeste product- en collectiepagina's is het grootste element een productfoto of herobanner. Maak die snel:

Upload verstandige bestanden. Verklein foto's voor het uploaden tot ongeveer 2.000 tot 2.500 pixels breed en comprimeer ze. Het CDN van Shopify levert automatisch verkleinde versies en moderne formaten zoals WebP, maar een enorm origineel kost nog steeds tijd.
Laad de eerste afbeelding niet lazy. Afbeeldingen bovenaan de pagina moeten direct laden. Lazy loading is voor afbeeldingen verder naar beneden.
Gebruik responsieve afbeeldingen. Actuele thema's gebruiken de filters image_url en image_tag van Shopify om per scherm het juiste formaat te leveren. Oudere thema's sturen soms één groot formaat naar elk apparaat.
Vermijd video die automatisch afspeelt in de hero. Heb je video nodig, toon dan eerst een posterafbeelding en laad de video daarna.

3. Laad widgets later

Reviews, chatbubbels, pop-ups, upsellcarrousels en socialfeeds hoeven zelden te laden voordat het product er staat.

Laad chat en pop-ups nadat de pagina interactief is of na een vertraging.
Zet reviewwidgets onder de vouw, zodat ze de hoofdinhoud niet blokkeren. Houd de reviewtekst voor SEO in de HTML van de pagina.
Haal trackingpixels van derden weg waar je niet meer naar kijkt. Elke pixel is weer een script.

4. Gebruik een actueel thema

Thema's die gebouwd zijn voor Online Store 2.0, waaronder de gratis thema's van Shopify op basis van Dawn, zijn ontworpen rond app-blokken, responsieve afbeeldingen en lichter JavaScript. Een thema van een paar jaar oud met zware sliders en jQuery kan traag zijn, wat je ook weghaalt.

Test voordat je wisselt de demoproductpagina van het nieuwe thema in PageSpeed Insights. Een thema dat in zijn eigen demo traag is, wordt met jouw producten ook traag.

5. Stop verspringende layout

Content die verspringt terwijl de pagina laadt, is slecht voor Cumulative Layout Shift en irriteert kopers.

Geef afbeeldingen een breedte en hoogte (de filter image_tag van Shopify voegt ze toe).
Reserveer ruimte voor banners en aankondigingsbalken die na het laden verschijnen.
Laad eigen lettertypen met font-display: swap en beperk het aantal gewichten.

Wat weinig helpt

Snelheidsapps. De meeste voegen hun eigen script aan de pagina toe. Code weghalen wint van code toevoegen.
Van hosting of CDN wisselen. In Shopify kan dat niet, en het is ook niet nodig.
Een paar kilobyte CSS minificeren. Dat verschuift de metingen van echte gebruikers zelden, vergeleken met een app weghalen of de hoofdafbeelding repareren.

Houd het snel

Snelheid gaat achteruit naarmate je apps en secties toevoegt. Check een productpagina opnieuw na elke nieuwe app, en bekijk het Core Web Vitals-rapport maandelijks. Een site-audit, zoals die van zaDojo, markeert trage pagina's en te grote afbeeldingen in de hele winkel, zodat je niet pagina voor pagina hoeft te testen.

Vragen die mensen stellen

Heeft de snelheid van Shopify invloed op SEO? Ja, een beetje. Core Web Vitals zijn een rankingsignaal, maar content en relevantie tellen zwaarder. Snelheid telt meer voor verkopen: kopers haken af op trage productpagina's.

Wat is een goede snelheidsscore voor Shopify? Mik op "Goed" voor de Core Web Vitals in data van echte gebruikers (Largest Contentful Paint onder 2,5 seconden, Interaction to Next Paint onder 200 milliseconden, Cumulative Layout Shift onder 0,1). De labscore op 100 is een richtlijn, geen doel.

Waarom is mijn Shopify-winkel traag op mobiel? Telefoons hebben tragere processors en verbindingen, dus zwaar JavaScript van apps doet daar veel meer pijn. Test eerst op mobiel.