Core Web Vitals voor Shopify: Complete gids (2026)

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

Bij het optimaliseren van Core Web Vitals verschilt Shopify fundamenteel van WordPress of maatwerksites. Bij WordPress heb je alles in eigen hand: de server, de database, de cachinglaag en elke regel code. Bij Shopify werk je op een managed platform waar sommige zaken volledig buiten je controle liggen.

Volgens het Core Web Vitals Technology Report scoort Shopify op mobiele CWV-slagingspercentages beter dan WordPress (ongeveer 65% tegenover 44% eind 2025). Dat komt doordat de infrastructuur van Shopify standaard uitstekend is: snelle servers, een wereldwijd CDN via Cloudflare, automatische conversie van afbeeldingsformaten en vooraf geoptimaliseerde basisthema's. Het platform regelt de serverkant goed.

De problemen ontstaan door wat webwinkeliers er zelf aan toevoegen: apps, third-party scripts, eigen aanpassingen in het thema, te grote afbeeldingen en het inladen van te veel fonts. Daarop zakken Shopify-webshops voor Core Web Vitals. En omdat je beperkte toegang hebt tot de server en de core-code, moet je optimalisatiestrategie anders zijn.

Shopify Core Web Vitals in cijfers

In het CrUX Technology Report staat Shopify op plek 2 qua Core Web Vitals-slagingspercentages, alleen achter Duda (een minder gebruikt platform). De cijfers uit CrUX en onafhankelijke benchmarkdata:

Bronnen: CrUX Technology Report (juni 2025), SearchEngineJournal CMS-analyse, Shero Commerce-benchmark van 1.000 webshops (nov 2025). *Mediaanwaarden uit de Shero-benchmark, niet CrUX p75.

Uit de Shero Commerce-benchmark van 1.000 echte Shopify-webshops blijkt dat slechts 48% slaagt voor alle drie de Core Web Vitals op mobiel. Dat is lager dan wat het CrUX Technology Report toont voor Shopify als geheel. Dit wijst erop dat de webshops in CrUX (waarvoor voldoende Chrome-verkeer nodig is) een vertekend beeld geven: het zijn vaker grotere, beter geoptimaliseerde webshops. De mediane mobiele LCP van 2,26 seconden zit gevaarlijk dicht bij de grens van 2,5 seconden voor 'goed'. Zelfs een kleine toevoeging (één extra app, één niet-geoptimaliseerde hero image) duwt een webshop al van voldoende naar onvoldoende.

CLS en INP zijn het probleem niet. De mediane CLS bij Shopify van 0,01 is uitstekend en de mediane INP van 153 ms valt ruim binnen de norm. LCP is waar Shopify-webshops zakken voor Core Web Vitals.

Data van echte gebruikers via CoreDash bevestigt dit patroon bij Shopify-webshops. Webshops die zakken voor CWV, zakken vrijwel altijd op LCP. Webshops die meer dan 8 third-party app-scripts inladen, laten een mediane mobiele LCP zien boven de 3,0 seconden. Webshops met 3 of minder app-scripts behouden een mediane LCP onder de 2,0 seconden. Het verband tussen het aantal geïnstalleerde apps en LCP is in de data de sterkste voorspeller voor het zakken voor CWV op Shopify.

Waar je bij Shopify geen controle over hebt

Begrijp de beperkingen voordat je begint met optimaliseren. Bij Shopify kun je niet:

• De server of hosting wijzigen. Shopify draait op een eigen infrastructuur. Je kunt niet overstappen naar een snellere host, geen caching op serverniveau instellen en geen PHP-instellingen aanpassen. Het pluspunt: de TTFB van Shopify is over het algemeen uitstekend (onder de 300 ms voor de meeste regio's).
• content_for_header verwijderen. Shopify injecteert verplichte JavaScript in elke pagina via deze Liquid-tag. Hierin zitten Shopify's eigen analytics, checkout-scripts en de infrastructuur om apps te laden. Je kunt dit niet verwijderen. Stel je het uit, dan loop je het risico dat de checkout en app-functionaliteit breken.
• Het CDN beheren. Shopify gebruikt Cloudflare als CDN. Je kunt geen cachingregels, edge workers of custom headers instellen zoals je dat in een eigen Cloudflare-omgeving zou doen.
• Bij de database of backend-code komen. Shopify's template-taal Liquid draait server-side, maar je kunt database-queries of server-side rendering niet verder optimaliseren dan wat Liquid toestaat.

Dit betekent dat je complete optimalisatiestrategie draait om wat je wel in de hand hebt: je themacode, je geïnstalleerde apps, je afbeeldingen, je fonts en je third-party scripts.

Het grootste CWV-probleem bij Shopify: app-bloat

Geïnstalleerde Shopify-apps zijn met afstand de grootste veroorzaker van onvoldoendes voor Core Web Vitals bij Shopify-webshops. Elke app kan JavaScript en CSS injecteren op elke pagina van je webshop, zelfs op pagina's waar die app helemaal niet wordt gebruikt. Een review-app die inlaadt op je homepage. Een widget voor productaanbevelingen op je contactpagina. Een countdown-timer die op elke productpagina laadt, zelfs als er geen sale is.

Hoe apps code injecteren

Shopify-apps injecteren code op verschillende manieren. Voor het opschonen maakt dat veel uit:

• App Embeds (theme-editor): deze schakel je eenvoudig uit in de theme-editor onder "App Embeds". Dit is de schoonste methode en het makkelijkst te beheren.
• Theme snippets: sommige apps plaatsen tijdens de installatie direct code in je themabestanden. Verwijder je de app, dan blijft die code vaak gewoon staan. Controleer snippets/ en sections/ handmatig op achtergebleven bestanden.
• ScriptTag API: apps kunnen programmatisch scripts injecteren zonder themabestanden aan te raken. Deze laden via content_for_header van Shopify. Verwijder je de app, dan verdwijnen ze, al kan het script nog gecached zijn.
• Third-party loaders: sommige apps laden externe JavaScript in vanaf hun eigen CDN. Dit leidt tot extra DNS lookups en network requests.

Het auditproces voor apps

Dit is hoe ik Shopify-apps controleer op performance-impact:

1. Haal je homepage, een productpagina, een collectiepagina en de winkelwagenpagina door PageSpeed Insights. Noteer de scores voor LCP, INP en CLS.
2. Open Chrome DevTools en ga naar het tabblad Coverage. Herlaad de pagina en bekijk het percentage ongebruikte JavaScript. Bij overbeladen Shopify-webshops wordt 60% tot 80% van de ingeladen JavaScript op een willekeurige pagina helemaal niet gebruikt.
3. Bekijk het tabblad Network, gefilterd op JavaScript. Sorteer op bestandsgrootte. Breng in kaart welke scripts afkomstig zijn van apps en welke van je thema. De kolom "Initiator" laat zien wat elk script heeft ingeladen.
4. Schakel apps één voor één uit (of zet hun App Embeds uit) en test opnieuw. Meet de impact van elke app afzonderlijk op INP en LCP.
5. Bepaal voor elke app: weegt de commerciële waarde op tegen het verlies aan performance? Is er een lichter alternatief? Kan de app beperkt worden tot specifieke paginatypes?

Data uit CoreDash-optimalisatietrajecten voor Shopify laat de typische impact zien van het opschonen van apps: het verwijderen van één overbodig script voor een reviewwidget verbeterde bij een webshop de mediane INP met 45 ms. Het verwijderen van drie ongebruikte apps (een eerder uitgeschakelde popup-tool, een loyaliteitsprogramma en een niet meer gebruikte chatwidget) verlaagde de totale JavaScript op de pagina met 380 KB en verbeterde de mobiele LCP met 1,1 seconde. Elke app die je niet actief meer gebruikt, maakt je shop voor niets trager. Verwijder hem.

LCP aanpakken op Shopify

Bij Shopify-webshops is het LCP-element bijna altijd de hero image op de homepage, de hoofdafbeelding op productpagina's of de collectiebanner op collectiepagina's. Het CDN van Shopify levert afbeeldingen automatisch in WebP-formaat, wat helpt. Maar een aantal optimalisaties moet je zelf uitvoeren.

Preload de hero image

Het Liquid-filter image_tag van Shopify heeft een ingebouwde preload-parameter. Zet je die op true, dan stuurt Shopify vanaf de server een Link-HTTP-header mee met rel=preload. De browser ontvangt dit nog voordat hij begint met het parsen van de HTML. Dit is het vroegst mogelijke preload-signaal. Het filter voegt ook automatisch imagesrcset en imagesizes toe vanuit de tag, waardoor responsive preloading perfect werkt zonder enig risico op een URL-mismatch.

Combineer dit met fetchpriority: 'high' op de <img> en loading: 'eager' om de standaard lazy loading van Shopify voor onderdelen below-the-fold te overrulen. Voor de hero image 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 levert je het volgende op: HTTP-header-preload (zo vroeg mogelijk), fetchpriority="high" op de <img>, eager loading in plaats van lazy loading, automatische width- en height-attributen (wat CLS voorkomt) en automatische generatie van de srcset. Zet altijd fetchpriority="high" op de hero image, zelfs als je geen preload gebruikt.

Gebruikt je thema een CSS-background-image voor de hero

Sommige Shopify-thema's renderen de hero-banner als een CSS-background-image in plaats van een <img>-tag. Voor LCP is dit een anti-pattern. Je verliest fetchpriority, je verliest automatische srcset, je verliest Shopify's HTTP-header-preload en de browser kan pas beginnen met het ophalen van de afbeelding nadat het CSS-bestand is gedownload en geparset.

De juiste fix is om de CSS-achtergrond om te zetten naar een <img>-tag, zodat je image_tag goed kunt benutten. Dit vereist een aanpassing in de themacode, maar het is wel de juiste oplossing.

Kun je de template echt niet aanpassen, dan 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 -%}

Pas op: de URL in de preload moet exact overeenkomen met de URL in je CSS, inclusief Shopify's ?v=-versiestempel en &width=-parameter. Verschillen ze ook maar één parameter, dan downloadt de browser de afbeelding twee keer en verslechtert de performance juist.

Bekijk voor de complete preload-strategie voor LCP-afbeeldingen hoe je de LCP-afbeelding preloadt.

Gebruik geen lazy loading above-the-fold

Veel Shopify-thema's passen loading="lazy" toe op alle afbeeldingen, inclusief de hero. Daarmee geef je de browser de instructie om de belangrijkste afbeelding op de pagina minder prioriteit te geven. Zorg dat je thema afbeeldingen above-the-fold uitsluit van lazy loading. Gebruik bij moderne thema's met het image_tag-filter van Shopify loading: 'eager' voor hero images.

Optimaliseer afbeeldingsformaten

Het CDN van Shopify kan afbeeldingen on-the-fly schalen via URL-parameters, maar je Liquid-templates moeten wel om het juiste formaat vragen. Laad geen afbeelding van 2000px breed in als deze maar op 800px wordt getoond. Gebruik Shopify's responsive afbeeldingsmarkup met de juiste srcset- en sizes-attributen. Bekijk onze handleiding over het optimaliseren van afbeeldingen.

INP aanpakken op Shopify

Onvoldoendes voor INP op Shopify worden vrijwel altijd veroorzaakt door JavaScript die de main thread blokkeert. De injectie van content_for_header door Shopify voegt standaard al JavaScript toe die je niet kunt verwijderen. Alles wat je daar bovenop zet, maakt het probleem groter.

Stel niet-kritieke third-party scripts uit

Chatwidgets (Tidio, Zendesk, Intercom), review-apps (Judge.me, Yotpo, Loox), personalisatietools (Klaviyo popups, Privy) en analytics (Google Analytics, Facebook Pixel, Hotjar) horen niet te laden tijdens de initiële render van de pagina. De juiste aanpak is requestIdleCallback: de browser laadt deze scripts pas in zodra de main thread idle is, meestal een paar seconden nadat de pagina is gerenderd.

Gebruik geen interaction-based deferral (scripts inladen bij de eerste scroll, klik of tik). Tikt een gebruiker op een knop en reageert je site door tijdens datzelfde event 500 KB aan third-party JavaScript in te laden, dan raakt de main thread geblokkeerd en krijgt die interactie een dramatische INP-score. Het hele doel van uitstellen is juist om de main thread vrij te houden voor gebruikersinteracties, niet om ermee te concurreren.

Vervang het src-attribuut door data-src op niet-kritieke scripts en wissel ze weer om zodra de browser idle 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 vangt Safari op, dat geen requestIdleCallback ondersteunt. Anders dan requestIdleCallback wacht dit niet op een echt idle-venster. Toch breekt het de main thread op en dynamisch geïnjecteerde scripts omzeilen de preload scanner sowieso. In de praktijk is het daarom een prima fallback.

Bekijk voor meer methodes om JavaScript uit te stellen 14 methodes om JavaScript uit te stellen.

Verminder JavaScript in het thema

De Online Store 2.0-thema's van Shopify (zoals Dawn) zijn gebouwd om licht te zijn, maar veel third-party thema's voegen zware JavaScript toe voor megamenu's, product-sliders, quick-view popups en animaties. Breng de JavaScript van je thema in kaart via het tabblad Coverage in Chrome DevTools. Laadt je thema meer dan 200 KB aan JavaScript in, kijk dan welke features je kunt uitschakelen of vervangen door CSS-alternatieven.

CLS aanpakken op Shopify

Cumulative Layout Shift bij Shopify-webshops kent meestal drie oorzaken: afbeeldingen zonder afmetingen, font swapping en dynamisch geïnjecteerde content vanuit apps.

Stel afbeeldingsafmetingen in via Liquid-templates

Controleer je Liquid-templates op <img>-tags waar width- en height-attributen ontbreken. Het image_tag-filter van Shopify kan deze automatisch genereren:

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

Dit genereert responsive afbeeldingen met de juiste afmetingen, wat layout shifts tijdens het laden voorkomt.

Reserveer ruimte voor dynamische content

App Embeds die na het laden van de pagina reviewsterren, trustbadges, countdown-timers of aankondigingsbalken injecteren, veroorzaken CLS. Reserveer voor elk dynamisch element vooraf ruimte met CSS min-height, zodat omliggende content niet verschuift zodra het element verschijnt. Dit is vooral cruciaal voor elementen die boven bestaande content worden geplaatst.

Optimaliseer het inladen van fonts

Laadt je Shopify-thema custom webfonts in, zorg dan dat ze font-display: swap gebruiken met een goed passend fallback-font. Preload je belangrijkste fontbestanden om de tijd te verkorten voordat tekst in het juiste font rendert. Laad alleen de font weights en styles in die je echt gebruikt. Bekijk onze handleiding over font-optimalisatie.

Themakeuze en performance bij Shopify

Je themakeuze bepaalt de performance-basislijn voor je webshop. Het ThemeVitals-project houdt echte CrUX-data bij van Shopify-thema's. De belangrijkste inzichten:

• Dawn (het standaard gratis thema van Shopify) presteert structureel goed op Core Web Vitals, omdat het gebouwd is met performance als prioriteit.
• Thema's met veel secties, animaties en ingebouwde features (megamenu's, product quick-view, AJAX-winkelwagenlades) bevatten meestal meer JavaScript en scoren slechter op INP.
• Online Store 2.0-thema's zijn over het algemeen sneller dan oudere thema's, omdat ze gebruikmaken van Shopify's moderne sectie-architectuur en asset-loading.

Kies je een nieuw thema, controleer dan vóór aankoop de CrUX-data op ThemeVitals. De goedkoopste performance-optimalisatie is beginnen met een snel thema.

Wat Shopify standaard goed doet

Shopify doet out-of-the-box al veel dingen goed:

• Snelle infrastructuur: de servers van Shopify en het Cloudflare-CDN zorgen wereldwijd voor een constant lage TTFB.
• Automatisch WebP: het CDN van Shopify zet afbeeldingen automatisch om naar WebP-formaat zodra de browser dit ondersteunt.
• HTTP/2 en Brotli: standaard ingeschakeld op alle Shopify-webshops.
• Afbeeldings-CDN met on-the-fly resizing: je kunt elke afbeelding op elke breedte opvragen via URL-parameters.
• Preconnect hints: Shopify voegt automatisch preconnect-hints toe voor zijn CDN-domeinen.

Dankzij deze standaardinstellingen is de basisperformance van Shopify goed. Aan jou de taak om die voorsprong niet te verpesten met een overdaad aan apps en scripts.

Je Shopify-webshop monitoren

Het admin-dashboard van Shopify bevat een "Speed Score", maar dit is een vereenvoudigd cijfer op basis van Lighthouse dat niets zegt over je echte Core Web Vitals. Voor serieuze performancemonitoring gebruik je:

• Google Search Console: bekijk het Core Web Vitals-rapport voor field data van je complete webshop
• CoreDash: installeer het lichte RUM-snippet (één regel code in theme.liquid) voor realtime Core Web Vitals-data, uitgesplitst naar paginatype, apparaat en land
• PageSpeed Insights: test afzonderlijke URL's van producten, collecties en de homepage voor diagnostische data

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

Monitoringdata uit CoreDash laat zien dat de meest voorkomende oorzaak van een CWV-regressie op Shopify de installatie van een nieuwe app is die overal JavaScript injecteert. Gemiddeld voegt een nieuwe Shopify-app 50 KB tot 150 KB aan JavaScript toe aan elke page load. Zit een webshop al op de rand van de LCP-grens (2,3 tot 2,5 seconden), dan kan één enkele app-installatie net de druppel zijn waardoor hij zakt. De op één na grootste oorzaak zijn seizoensgebonden wijzigingen: Black Friday-banners, popups voor de feestdagen en promotionele countdown-timers die worden toegevoegd voor een actie en daarna worden vergeten.