Core Web Vitals voor Shopify: Complete Gids (2026)

Shopify en Core Web Vitals: Je hebt geen controle over de server

Shopify is fundamenteel anders dan WordPress of op maat gemaakte sites als het gaat om Core Web Vitals optimalisatie. Op WordPress controleer je alles: de server, de database, de caching laag, elke regel code. Op Shopify werk je binnen een beheerd platform waar sommige dingen volledig buiten je bereik liggen.

Volgens het Core Web Vitals Technology Report leidt Shopify voor op WordPress wat betreft mobiele CWV slagingspercentages (ongeveer 65% vs 44% eind 2025). Dit komt omdat de infrastructuur van Shopify standaard uitstekend is: snelle servers, een wereldwijde CDN via Cloudflare, automatische conversie van afbeeldingsformaten en vooraf geoptimaliseerde basisthema's. Het platform gaat goed om met de serverkant.

De problemen komen voort uit wat winkeliers er bovenop toevoegen: apps, third party scripts, aangepaste thema-wijzigingen, te grote afbeeldingen en overmatig laden van lettertypen. Dat is waar Shopify winkels falen op Core Web Vitals. En omdat je beperkte toegang hebt tot de server en core code, moet je optimalisatiestrategie anders zijn.

Shopify Core Web Vitals in Cijfers

Shopify staat in totaal op de 2e plaats in het CrUX Technology Report voor Core Web Vitals slagingspercentages, achter alleen Duda (een minder veelgebruikt platform). De cijfers uit CrUX en onafhankelijke benchmarkgegevens:

Bronnen: CrUX Technology Report (juni 2025), SearchEngineJournal CMS analyse, Shero Commerce 1.000 winkels benchmark (nov 2025). *Mediane waarden uit Shero benchmark, niet CrUX p75.

De Shero Commerce benchmark van 1.000 echte Shopify winkels ontdekte dat slechts 48% slaagt voor alle drie de Core Web Vitals op mobiel. Dat is lager dan wat het CrUX Technology Report over het algemeen voor Shopify laat zien, wat suggereert dat de winkels die in CrUX verschijnen (waarvoor voldoende Chrome-verkeer nodig is) een voorkeur hebben voor grotere, beter geoptimaliseerde winkels. De mediane mobiele LCP van 2,26 seconden zweeft gevaarlijk dicht bij de "goede" drempel van 2,5 seconden, wat betekent dat zelfs kleine toevoegingen (nog één app, één ongeoptimaliseerde hero-afbeelding) een winkel van slagen naar falen kunnen duwen.

CLS en INP zijn niet het probleem. De mediane CLS van Shopify van 0,01 is uitstekend, en de mediane INP van 153ms bevindt zich comfortabel binnen het goede bereik. LCP is waar Shopify winkels falen op Core Web Vitals.

CoreDash real user data van Shopify winkels bevestigen dit patroon. De winkels die falen op CWV, falen bijna altijd op LCP. Winkels die meer dan 8 third party app scripts laden, laten een mediane mobiele LCP boven de 3,0 seconden zien. Winkels met 3 of minder app scripts behouden een mediane LCP onder de 2,0 seconden. De correlatie tussen het aantal geïnstalleerde apps en LCP is de sterkste voorspeller van Shopify CWV falen die we in de data zien.

Wat je niet kunt controleren op Shopify

Voordat je gaat optimaliseren, moet je de beperkingen begrijpen. Op Shopify kun je niet:

• De server of hosting wijzigen. Shopify draait op zijn eigen infrastructuur. Je kunt niet overstappen naar een snellere host, caching op serverniveau configureren of PHP-instellingen aanpassen. Het goede nieuws: de TTFB van Shopify is over het algemeen uitstekend (minder dan 300ms voor de meeste regio's).
• content_for_header verwijderen. Shopify injecteert verplichte JavaScript in elke pagina via deze Liquid tag. Het omvat de eigen analytics van Shopify, checkout scripts en app loading infrastructuur. Je kunt het niet verwijderen, en het uitstellen (defer) brengt het risico met zich mee dat de checkout en app functionaliteit kapot gaan.
• De CDN controleren. Shopify gebruikt Cloudflare als zijn CDN. Je kunt geen caching regels, edge workers of aangepaste headers configureren zoals je zou doen op je eigen Cloudflare setup.
• Toegang krijgen tot de database of backend code. De Liquid templating taal van Shopify draait server-side, maar je kunt database query's of server-side rendering niet verder optimaliseren dan wat Liquid biedt.

Dit betekent dat je hele optimalisatiestrategie zich richt op wat je wel kunt controleren: je thema-code, je geïnstalleerde apps, je afbeeldingen, je lettertypen en je third party scripts.

Het #1 Shopify CWV probleem: App Bloat

Geïnstalleerde Shopify apps zijn de grootste oorzaak van het falen van Core Web Vitals op Shopify winkels. Elke app kan JavaScript en CSS injecteren op elke pagina van je winkel, zelfs op pagina's waar die app niet wordt gebruikt. Een review app die laadt op je homepage. Een product aanbeveling widget die laadt op je contactpagina. Een countdown timer die op elke productpagina laadt, zelfs als er geen uitverkoop actief is.

Hoe apps code injecteren

Shopify apps injecteren code op verschillende manieren, en dit is belangrijk voor het opschonen:

• App Embeds (thema-editor): deze kunnen worden uitgeschakeld in de thema-editor onder "App Embeds". Dit is de schoonste methode en het makkelijkst te beheren.
• Theme snippets: sommige apps voegen code direct toe aan je thema-bestanden tijdens de installatie. Het verwijderen van de app verwijdert deze code mogelijk niet. Je moet handmatig snippets/ en sections/ controleren op achtergebleven bestanden.
• ScriptTag API: apps kunnen programmatisch scripts injecteren zonder thema-bestanden aan te raken. Deze laden via Shopify's content_for_header. Het verwijderen van de app verwijdert ze, maar het script kan gecached zijn.
• Third party loaders: sommige apps laden externe JavaScript van hun eigen CDN, wat extra DNS lookups en netwerkverzoeken creëert.

Het app-audit proces

Dit is hoe ik Shopify apps controleer op performance impact:

1. Voer je homepage, een productpagina, een collectiepagina en de winkelwagenpagina in via PageSpeed Insights. Registreer de LCP, INP en CLS scores.
2. Open Chrome DevTools en ga naar het Coverage tabblad. Herlaad de pagina en kijk naar het percentage ongebruikte JavaScript. Op bloated Shopify winkels wordt 60% tot 80% van de geladen JavaScript niet gebruikt op een willekeurige pagina.
3. Controleer het Network tabblad gefilterd op JavaScript. Sorteer op grootte. Identificeer welke scripts afkomstig zijn van apps in vergelijking met je thema. De kolom "Initiator" vertelt je wat elk script heeft geladen.
4. Schakel apps één voor één uit (of zet hun App Embeds uit) en test opnieuw. Meet de impact op INP en LCP van elke app afzonderlijk.
5. Beslis voor elke app: is de zakelijke waarde de performance kosten waard? Kan het worden vervangen door een lichter alternatief? Kan het alleen worden geladen op specifieke paginatypes?

CoreDash data uit Shopify optimalisatieprojecten toont de typische impact van app-opschoning: het verwijderen van een enkel onnodig review widget script verbeterde de mediane INP met 45ms op één winkel. Het verwijderen van drie ongebruikte apps (een eerder uitgeschakelde pop-up tool, een loyaliteitsprogramma en een ongebruikte chat widget) verminderde het totale pagina JavaScript met 380KB en verbeterde de mobiele LCP met 1,1 seconden. Elke app die je niet meer actief gebruikt, vertraagt je winkel voor niets. Verwijder deze.

LCP oplossen op Shopify

Op Shopify winkels is het LCP element bijna altijd de hero banner afbeelding op de homepage, de uitgelichte productafbeelding op productpagina's of de collectie banner op collectiepagina's. Shopify's CDN serveert afbeeldingen automatisch in WebP formaat, wat helpt. Maar er zijn verschillende optimalisaties die je zelf moet afhandelen.

De hero-afbeelding preloaden

Shopify's image_tag Liquid filter heeft een ingebouwde preload parameter. Als deze is ingesteld op true, stuurt Shopify een Link HTTP header met rel=preload vanaf de server. De browser ontvangt dit voordat deze zelfs begint met het parsen van HTML, wat het vroegst mogelijke preload-signaal is. Het bevat ook automatisch imagesrcset en imagesizes uit de tag, zodat responsief preloaden correct werkt met nul risico op URL-mismatch.

Combineer dit met fetchpriority: 'high' op de <img> en loading: 'eager' om Shopify's standaard lazy loading voor below the fold secties te overschrijven. Voor de hero-afbeelding ziet dat er zo uit:

{{ section.settings.hero_image | image_url: width: 1200 | image_tag:
    preload: true,
    fetchpriority: 'high',
    loading: 'eager',
    sizes: '100vw'
}}

Die ene regel geeft je: HTTP header preload (zo vroeg mogelijk), fetchpriority="high" op de <img>, eager loading in plaats van lazy, automatische width en height attributen (wat CLS voorkomt), en automatische srcset generatie. Stel altijd fetchpriority="high" in op de hero-afbeelding, zelfs als je geen preload gebruikt.

Als je thema een CSS background image gebruikt voor de hero

Sommige Shopify thema's renderen de hero banner als een CSS background-image in plaats van een <img> tag. Dit is een antipatroon voor LCP. Je verliest fetchpriority, je verliest automatische srcset, je verliest Shopify's HTTP header preload, en de browser kan niet eens beginnen met het ophalen van de afbeelding totdat het CSS bestand is gedownload en geparsed.

De juiste oplossing is om de CSS achtergrond om te zetten naar een <img> tag zodat je image_tag correct kunt gebruiken. Dit is een wijziging in de thema-code, maar het is wel de juiste.

Als je het template absoluut niet kunt wijzigen, kun je een handmatige preload hint toevoegen in theme.liquid:

{%- if template == 'index' -%}
  <link rel="preload" as="image" href="{{ section.settings.hero_image | image_url: width: 1200 }}">
{%- endif -%}

Wees gewaarschuwd: de URL in de preload moet exact overeenkomen met de URL in je CSS, inclusief Shopify's ?v= versiestempel en &width= parameter. Als ze ook maar één parameter verschillen, downloadt de browser de afbeelding twee keer, wat de performance verslechtert in plaats van verbetert.

Voor de volledige strategie voor het preloaden van LCP afbeeldingen, zie hoe je de LCP afbeelding preloadt.

Gebruik geen lazy load above the fold

Veel Shopify thema's passen loading="lazy" toe op alle afbeeldingen, inclusief de hero. Dit vertelt de browser om de belangrijkste afbeelding op de pagina een lagere prioriteit te geven. Zorg ervoor dat je thema above the fold afbeeldingen uitsluit van lazy loading. Voor moderne thema's die Shopify's image_tag filter gebruiken, gebruik je loading: 'eager' voor hero-afbeeldingen.

Optimaliseer afbeeldingsgroottes

De CDN van Shopify kan de grootte van afbeeldingen on the fly aanpassen met behulp van URL parameters, maar je Liquid templates moeten de juiste grootte aanvragen. Laad geen afbeelding van 2000px breed als deze slechts op 800px wordt weergegeven. Gebruik de responsieve afbeeldingsopmaak van Shopify met de juiste srcset en sizes attributen. Bekijk onze gids over afbeeldingen optimaliseren.

INP oplossen op Shopify

INP falen op Shopify wordt bijna volledig veroorzaakt doordat JavaScript de main thread blokkeert. Shopify's eigen content_for_header injectie voegt al een basis aan JavaScript toe die je niet kunt verwijderen. Alles wat je daar bovenop toevoegt, verergert het probleem.

Stel niet-kritieke third party scripts uit

Chat widgets (Tidio, Zendesk, Intercom), review apps (Judge.me, Yotpo, Loox), personalisatie tools (Klaviyo pop-ups, Privy) en analytics (Google Analytics, Facebook Pixel, Hotjar) zouden niet moeten laden tijdens de initiële pagina weergave. De juiste aanpak is requestIdleCallback: de browser laadt deze scripts alleen wanneer de main thread inactief is, meestal een paar seconden nadat de pagina is gerenderd.

Gebruik geen op interactie gebaseerde uitstel (het laden scripts bij de eerste scroll, klik of tik). Wanneer een gebruiker op een knop tikt en je site reageert door 500KB aan third party JavaScript te laden op datzelfde evenement, wordt de main thread geblokkeerd en krijgt die interactie een vreselijke INP score. Het hele doel van uitstellen is om de main thread vrij te houden voor gebruikersinteracties, niet om ermee te concurreren.

Vervang het src attribuut door data-src bij niet-kritieke scripts en wissel ze dan terug wanneer de browser inactief is:

<script>
(window.requestIdleCallback || function(cb) { setTimeout(cb, 1); })(function() {
  document.querySelectorAll('script[data-src]').forEach(function(s) {
    s.src = s.dataset.src;
  });
});
</script>

De setTimeout fallback dekt Safari, die requestIdleCallback niet ondersteunt. In tegenstelling tot requestIdleCallback wacht het niet op een echt inactief venster. Maar het onderbreekt alsnog de main thread en dynamisch geïnjecteerde scripts omzeilen toch de preload scanner, waardoor het in de praktijk een voldoende goede fallback is.

Voor meer JavaScript uitstelstrategieën, zie 14 methoden om JavaScript uit te stellen.

Verminder thema JavaScript

De Online Store 2.0 thema's van Shopify (zoals Dawn) zijn gebouwd om slank te zijn, maar veel third party thema's voegen zware JavaScript toe voor mega menu's, product sliders, snelle weergave modale vensters en animaties. Controleer de JavaScript van je thema met het Coverage tabblad van Chrome DevTools. Als je thema meer dan 200KB aan JavaScript laadt, zoek dan naar functies die je kunt uitschakelen of kunt vervangen door CSS-alternatieven.

CLS oplossen op Shopify

Cumulative Layout Shift op Shopify winkels wordt typisch veroorzaakt door drie dingen: afbeeldingen zonder dimensies, lettertype wisseling (font swapping) en dynamisch geïnjecteerde inhoud van apps.

Stel afbeeldingsdimensies in Liquid templates in

Controleer je Liquid templates op <img> tags die de width en height attributen missen. Het image_tag filter van Shopify kan deze automatisch uitvoeren:

{{ product.featured_image | 
   image_tag: widths: '200,400,800', sizes: '(max-width: 768px) 100vw, 50vw' }}

Dit genereert responsieve afbeeldingen met de juiste afmetingen, wat layout shift voorkomt terwijl afbeeldingen laden.

Reserveer ruimte voor dynamische inhoud

App Embeds die beoordelingssterren, vertrouwensbadges, afteltimers of aankondigingsbalken injecteren na het laden van de pagina veroorzaken CLS. Reserveer voor elk dynamisch element ruimte met CSS min-height zodat omliggende inhoud niet verschuift wanneer het element verschijnt. Dit is vooral belangrijk voor elementen die boven bestaande inhoud worden geïnjecteerd.

Optimaliseer het laden van lettertypen

Als je Shopify thema aangepaste webfonts laadt, zorg er dan voor dat ze font-display: swap gebruiken met een goed passend fallback lettertype. Preload je primaire lettertype bestanden om de tijd te verkorten voordat de tekst in het juiste lettertype wordt gerenderd. Laad alleen de font weights en stijlen die je daadwerkelijk gebruikt. Bekijk onze gids over lettertype optimalisatie.

Shopify thema selectie en performance

Je themakeuze stelt de performance basislijn in voor je winkel. Het ThemeVitals project houdt real-world CrUX data bij voor Shopify thema's. Belangrijkste bevindingen:

• Dawn (Shopify's standaard gratis thema) presteert constant goed op Core Web Vitals omdat het is gebouwd met performance als prioriteit.
• Thema's met veel secties, animaties en ingebouwde functies (mega menu's, product snelle weergave, AJAX winkelwagenlades) hebben de neiging meer JavaScript en slechtere INP te hebben.
• Online Store 2.0 thema's zijn over het algemeen sneller dan oudere thema's omdat ze de moderne sectiearchitectuur en asset loading van Shopify gebruiken.

Als je een nieuw thema kiest, controleer dan de CrUX data op ThemeVitals voordat je tot aankoop overgaat. De goedkoopste performance optimalisatie is beginnen met een snel thema.

Wat Shopify standaard goed doet

Shopify doet out of the box een heleboel dingen goed:

• Snelle infrastructuur: Shopify's servers en Cloudflare CDN leveren wereldwijd consistent een lage TTFB.
• Automatische WebP: Shopify's CDN converteert afbeeldingen automatisch naar WebP formaat wanneer de browser dit ondersteunt.
• HTTP/2 en Brotli: standaard ingeschakeld op alle Shopify winkels.
• Image CDN met on the fly aanpassing van de grootte: je kunt elke afbeelding op elke breedte opvragen via URL parameters.
• Preconnect hints: Shopify voegt automatisch preconnect hints toe voor de CDN-domeinen.

Deze standaarden zijn de reden waarom de basisperformance van Shopify goed is. Jouw taak is om deze voordelen niet teniet te doen met buitensporige apps en scripts.

Je Shopify winkel monitoren

Het beheerdersdashboard van Shopify bevat een "Speed Score", maar dit is een vereenvoudigd, op Lighthouse gebaseerd getal dat je werkelijke Core Web Vitals niet vertegenwoordigt. Voor actuele performance monitoring:

• Google Search Console: controleer het Core Web Vitals rapport voor veldgegevens over je hele winkel
• CoreDash: installeer de lichtgewicht RUM snippet (één regel code in theme.liquid) om real-time Core Web Vitals data te krijgen, opgesplitst naar paginatype, apparaat en land
• PageSpeed Insights: test individuele product-, collectie- en homepage URL's voor diagnostische gegevens

Monitor na elke app-installatie, thema-update en lancering van een seizoenscampagne. Performance regressies op Shopify worden bijna altijd veroorzaakt door iets dat recent is toegevoegd.

CoreDash monitoring data toont aan dat de meest voorkomende oorzaak van Shopify CWV regressie een nieuwe app-installatie is die wereldwijd JavaScript injecteert. Gemiddeld voegt een nieuwe Shopify app 50KB tot 150KB JavaScript toe aan elke paginalading. Voor een winkel die precies op de LCP grens zit (2,3 tot 2,5 seconden), kan een enkele app-installatie deze eroverheen duwen. De op één na meest voorkomende oorzaak zijn seizoensgebonden wijzigingen: Black Friday campagne banners, vakantie pop-ups en promotionele afteltimers die worden toegevoegd voor een verkoopevenement en vervolgens worden vergeten.