Shopify performance — 10 ingrepen die direct effect hebben

Shopify performance — 10 ingrepen die direct effect hebben

Een Shopify store met een Lighthouse score van 34 op mobile. Na twee dagen werk: 81. Geen magie, geen dure tools.

De meeste Shopify stores zijn trager dan nodig omdat dezelfde tien fouten steeds terugkomen. Dit artikel gaat door die tien heen, met concrete acties die je vandaag kunt uitvoeren.

Wat je leert in dit artikel

• Welke tien factoren Shopify performance het meest beïnvloeden
• Concrete Liquid en JavaScript optimalisaties
• Hoe je apps auditt op performance-impact
• Core Web Vitals targets voor e-commerce in 2026

Waarom Shopify performance moeilijker is dan je denkt

Shopify is een beheerd platform. Je hebt geen toegang tot de server, geen controle over hosting, geen keuze in webserver-configuratie. Wat je wel hebt: controle over je theme code, je apps en je assets.

Dat is genoeg om het verschil te maken tussen een Lighthouse-score van 34 en 81.

Onderzoek van Google toont dat elke seconde vertraging in laadtijd de conversie met 7% verlaagt. Op een webshop met €2 miljoen omzet is dat €140.000 per seconde extra laadtijd. Dat maakt performance geen nice-to-have.

Core Web Vitals: de targets voor 2026

INP verving FID (First Input Delay) als Core Web Vital in 2024. Veel Shopify stores scoren hier slecht door zware JavaScript apps.

Ingreep 1: audit je apps op script-impact

Apps zijn de grootste performance-killer op Shopify. Elke app laadt gemiddeld 2-4 externe scripts. Bij tien apps zijn dat veertig extra HTTP-requests.

Ga naar je Shopify admin, open de Online Store Speed report. Shopify toont hier welke apps de meeste impact hebben op laadtijd.

De vraag bij elke app: levert de conversiewaarde meer op dan de performance-kosten? Een chat widget die 800ms toevoegt aan laadtijd maar zorgt voor 15% meer support conversie: misschien de moeite waard. Dezelfde 800ms voor een badge die "Betrouwbaar" toont: waarschijnlijk niet.

Verwijder apps die je niet actief gebruikt. Shopify-apps blijven scripts laden ook als je ze "uitschakelt" — je moet ze volledig verwijderen.

Ingreep 2: laad scripts uitgesteld

Apps die je wél wil behouden, laad je uitgesteld. Voeg defer of async toe aan script-tags die niet direct nodig zijn voor de initiële paginalading.

{%- comment -%}
  Fout: script blokkeert rendering
{%- endcomment -%}
<script src="{{ 'app.js' | asset_url }}"></script>

{%- comment -%}
  Goed: script laadt na HTML parsing
{%- endcomment -%}
<script src="{{ 'app.js' | asset_url }}" defer></script>

Voor third-party scripts die je zelf niet direct controleert, kun je ze inladen via een intersection observer — zodat ze pas laden als de gebruiker naar dat deel van de pagina scrolt.

Ingreep 3: optimaliseer je hero image

De hero image is in de meeste gevallen de Largest Contentful Paint. Hoe snel die laadt, bepaalt direct je LCP-score.

{%- comment -%}
  Gebruik Shopify's image URL parameters voor WebP + juiste grootte
{%- endcomment -%}
<img
  src="{{ section.settings.hero_image | image_url: width: 1200, format: 'webp' }}"
  srcset="
    {{ section.settings.hero_image | image_url: width: 600, format: 'webp' }} 600w,
    {{ section.settings.hero_image | image_url: width: 1200, format: 'webp' }} 1200w,
    {{ section.settings.hero_image | image_url: width: 1800, format: 'webp' }} 1800w
  "
  sizes="100vw"
  alt="{{ section.settings.hero_image.alt | escape }}"
  fetchpriority="high"
  loading="eager"
  width="1200"
  height="600"
>

Voeg fetchpriority="high" toe aan de hero image. Dit vertelt de browser: laad dit eerst.

Ingreep 4: gebruik loading="lazy" voor afbeeldingen onder de fold

Alle afbeeldingen die niet direct zichtbaar zijn bij het laden van de pagina, moeten lazy geladen worden.

<img
  src="{{ product.featured_image | image_url: width: 600 }}"
  loading="lazy"
  width="600"
  height="600"
  alt="{{ product.featured_image.alt | escape }}"
>

Stel altijd width en height in op afbeeldingen. Zonder deze attributen weet de browser de afmetingen niet voordat de afbeelding geladen is — dat veroorzaakt layout shifts (hoge CLS-score).

Ingreep 5: minimaliseer render-blocking CSS

Shopify laadt standaard alle CSS van je theme in één request. Als dit bestand groot is, blokkeert het de rendering van je pagina.

Voor Shopify themes is dit te implementeren via een critical.css.liquid snippet:

{%- comment -%}
  Inline kritische CSS — alleen wat nodig is voor first render
{%- endcomment -%}
<style>
  /* Basis typografie */
  body { font-family: var(--font-body); margin: 0; }
  /* Header */
  .header { display: flex; align-items: center; padding: 1rem; }
  /* Hero */
  .hero { width: 100%; aspect-ratio: 16/9; }
</style>

{%- comment -%}
  Rest van CSS asynchroon laden
{%- endcomment -%}
<link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style" onload="this.onload=null;this.rel='stylesheet'">

Ingreep 6: preconnect naar externe domeinen

Je theme laadt waarschijnlijk fonts, scripts en analytics van externe domeinen. Elke verbinding naar een nieuw domein kost DNS-lookup tijd, TCP-handshake en TLS-handshake — samen 100-300ms per domein.

Voeg preconnect toe voor domeinen die je zeker gaat gebruiken:

<link rel="preconnect" href="https://fonts.shopifycdn.com">
<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="preconnect" href="https://www.googletagmanager.com">

Ingreep 7: gebruik Shopify's native font loading

Veel themes laden Google Fonts of andere externe fonts. Dat kost twee DNS-lookups en meerdere HTTP-requests.

Shopify heeft een eigen font-bibliotheek met dezelfde populaire fonts, geserveerd via hun CDN. Die laadt sneller.

{%- assign font_body = settings.type_body_font | font_modify: 'weight', '400' -%}
{{ font_body | font_face: font_display: 'swap' }}

Ingreep 8: audit je Liquid voor onnodige loops

Liquid-loops die productdata ophalen kunnen bij grote catalogi langzaam worden. Beperk het aantal producten dat je per sectie laadt.

{%- comment -%}
  Fout: alle producten uit een collectie ophalen
{%- endcomment -%}
{%- for product in collections.all.products -%}
  {{ product.title }}
{%- endfor -%}

{%- comment -%}
  Goed: paginering toepassen
{%- endcomment -%}
{%- paginate collections.all.products by 24 -%}
  {%- for product in collections.all.products -%}
    {{ product.title }}
  {%- endfor -%}
{%- endpaginate -%}

Ingreep 9: verwijder ongebruikte JavaScript

Shopify themes bevatten vaak JavaScript voor functies die je niet gebruikt. Elke kilobyte JavaScript die de browser moet parsen vertraagt de INP.

Gebruik Chrome DevTools Coverage tab om te zien welk percentage van je JavaScript daadwerkelijk gebruikt wordt. Een score van 20-30% ongebruikt JavaScript is normaal — maar 70-80% ongebruikt is een probleem.

Verwijder of laad conditioneel de secties die je niet gebruikt.

Ingreep 10: implementeer structured data

Dit is geen directe performance-optimalisatie, maar het heeft invloed op hoe Google je pagina's behandelt. Structured data (schema.org markup) helpt Google begrijpen wat op de pagina staat — en verbetert click-through rates vanuit zoekresultaten.

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": {{ product.title | json }},
  "image": {{ product.featured_image | image_url: width: 1200 | json }},
  "description": {{ product.description | strip_html | json }},
  "sku": {{ product.selected_or_first_available_variant.sku | json }},
  "offers": {
    "@type": "Offer",
    "price": {{ product.price | money_without_currency | json }},
    "priceCurrency": {{ cart.currency.iso_code | json }},
    "availability": "{% if product.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}"
  }
}
</script>

Samenvatting: de prioriteitsvolgorde

Begin met de hoge-impact/lage-effort ingrepen. Meet na elke stap. Gebruik Lighthouse in Chrome DevTools of PageSpeed Insights voor meetbare resultaten.

Meer over Shopify performance vindt je op onze Shopify pagina. Of lees ons artikel over Core Web Vitals in 2026 voor de bredere context. Gebruik Google PageSpeed Insights en de Shopify Theme Development docs als technische referenties.