Shopify theme performance audit — de 15-punten checklist

53% van de mobiele bezoekers verlaat een pagina die meer dan 3 seconden laadt. Google hanteert Core Web Vitals als rankingfactor. Een Shopify theme dat 5,8 seconden laadt op mobiel is geen designprobleem — het is een omzetprobleem.

Dit is de exacte checklist die wij doorlopen bij elke Shopify performance audit. 15 punten, gerangschikt op impact. Geen vage adviezen — concrete dingen die je kunt uitvoeren.

Wat je leert in dit artikel

• Hoe je een betrouwbare baseline meet
• De 15 audits op volgorde van impact
• Hoe je theme.liquid optimaliseert
• Lazy loading correct implementeren
• Wat je niet moet aanraken (en waarom)

Stap 0: Baseline meten

Audit nooit zonder meetpunt. Je kunt anders niet aantonen wat een wijziging oplevert.

Meet met drie tools:

Google PageSpeed Insights — meet zowel Lab als Field data. Field data is het belangrijkste voor SEO. Lab data is deterministisch voor vergelijking voor en na.

WebPageTest — gebruik de instelling Motorola G4, slow 3G voor mobiel. Dit is de testconfiguratie die Google ook hanteert voor CrUX-data.

Shopify's eigen Theme Inspector — beschikbaar in de Shopify CLI. Toont render-tijden per Liquid section en snippet.

Sla de nulmeting op. Screenshot van PageSpeed, export van WebPageTest, screenshot van Theme Inspector. Zonder dit kun je geen resultaat aantonen.

Checklist punt 1: JavaScript-bundles

Het eerste wat wij controleren is de JavaScript-payload.

# Laad de homepage in Chrome DevTools
# Netwerk → filter op JS → sorteer op grootte

Wat acceptabel is: < 150KB compressed JavaScript voor de eerste paginalading.

Wat wij vaak zien: 400–800KB, inclusief jQuery, Slick Slider, Google Tag Manager, chat-widget en drie app-scripts die tegelijk laden.

Acties:

• Verwijder jQuery als het theme het niet meer nodig heeft (Dawn gebruikt het niet)
• Laad chat-widgets asynchroon: <script async defer src="...">
• Zet app-scripts op defer: {{ content_for_header }} laadt veel scripts — controleer welke echt bij page load nodig zijn

Checklist punt 2: Afbeeldingen zonder lazy loading

Elke afbeelding boven de fold moet in de eerste render zitten. Alles eronder moet lazy laden.

{%- comment -%}
  Fout: alle afbeeldingen laden direct
{%- endcomment -%}
<img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}">

{%- comment -%}
  Correct: lazy loading voor afbeeldingen onder de fold
{%- endcomment -%}
<img
  src="{{ product.featured_image | image_url: width: 800 }}"
  srcset="
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 800 }} 800w,
    {{ product.featured_image | image_url: width: 1200 }} 1200w
  "
  sizes="(min-width: 990px) 400px, (min-width: 750px) 50vw, 100vw"
  alt="{{ product.featured_image.alt | escape }}"
  width="{{ product.featured_image.width }}"
  height="{{ product.featured_image.height }}"
  loading="lazy"
>

Voeg altijd width en height toe. Zonder dit kan de browser geen aspect-ratio reserveren, wat leidt tot Cumulative Layout Shift (CLS) — een Core Web Vital die rechtstreeks de ranking beïnvloedt.

Checklist punt 3: LCP-element identificeren

LCP (Largest Contentful Paint) is de tijd tot het grootste element op de pagina zichtbaar is. Voor productpagina's is dit bijna altijd de product-afbeelding.

Het LCP-element mag nooit lazy-loaden. Het moet fetchpriority="high" hebben.

{%- comment -%}
  Hero-afbeelding: geen lazy load, wel fetchpriority
{%- endcomment -%}
{%- if forloop.first -%}
  <img
    src="{{ media | image_url: width: 1200 }}"
    srcset="
      {{ media | image_url: width: 600 }} 600w,
      {{ media | image_url: width: 1200 }} 1200w
    "
    sizes="(min-width: 990px) 50vw, 100vw"
    alt="{{ media.alt | escape }}"
    width="{{ media.width }}"
    height="{{ media.height }}"
    fetchpriority="high"
    loading="eager"
  >
{%- else -%}
  <img
    src="{{ media | image_url: width: 1200 }}"
    alt="{{ media.alt | escape }}"
    width="{{ media.width }}"
    height="{{ media.height }}"
    loading="lazy"
  >
{%- endif -%}

Checklist punt 4: Render-blocking CSS

Shopify laadt stylesheets in {{ content_for_header }}. Eigen CSS voeg je toe met {{ 'theme.css' | asset_url | stylesheet_tag }}.

Controleer of je kritieke CSS inline staat of direct laadt. Non-kritieke CSS (print styles, modals die pas bij interactie zichtbaar zijn) kan asynchroon laden:

{%- comment -%}
  Laad non-kritieke CSS asynchroon
{%- endcomment -%}
<link
  rel="preload"
  href="{{ 'modal-styles.css' | asset_url }}"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
>
<noscript>
  <link rel="stylesheet" href="{{ 'modal-styles.css' | asset_url }}">
</noscript>

Checklist punt 5: Font loading

Google Fonts zijn de meest voorkomende render-blocker in Shopify themes. Elke @import url(https://fonts.googleapis.com/...) in CSS is blocking.

Oplossing: host fonts zelf als het theme dat toestaat, of gebruik font-display: swap en preconnect:

{%- comment -%}
  Zet in theme.liquid, voor het sluiten van </head>
{%- endcomment -%}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Controleer ook of je theme system fonts kan gebruiken voor UI-elementen (knoppen, labels, breadcrumbs). Alleen headlines en bodytekst hebben doorgaans een custom font nodig.

Checklist punt 6: Ongebruikte app-scripts verwijderen

Apps die je hebt verwijderd laten soms scripts achter in theme.liquid of in de app-blokken. Controleer:

# Grep op bekende app-script domeinen
# In theme.liquid zoeken naar script-tags met externe domeinen

Zoek in je thema op <script en controleer elke externe bron. Is de bijbehorende app actief? Zo nee, verwijder het script.

Checklist punt 7: Liquid-renderingstijd via Theme Inspector

De Shopify CLI heeft een ingebouwde profiler:

shopify theme dev --store jouw-store.myshopify.com

Ga naar http://127.0.0.1:9292/?_theme_inspector en laad een pagina. Je ziet de renderingstijd per section en snippet.

Alles boven de 50ms is verdacht. Alles boven de 100ms is een probleem. Veelvoorkomende oorzaken:

• Loops over grote collecties (> 50 producten)
• paginate met te hoge limiet
• Geneste for-loops met Liquid-filters in de binnenste loop

Checklist punt 8: Sectie-caching controleren

Shopify cachet section-renders. Maar sommige sections zijn geconfigureerd met {% schema %} blocks die caching uitschakelen door dynamische content.

Controleer je section-schema's. Gebruik cache properties waar mogelijk. Statische sections (header, footer, bestseller-blok) moeten gecached zijn.

Checklist punt 9: Predictive search

Predictive search maakt een API-verzoek bij elke toetsaanslag. Zonder debouncing zijn dat 10–15 requests per zoekopdracht.

// Fout: verzoek bij elke keyup
searchInput.addEventListener('keyup', () => {
  fetchSuggestions(searchInput.value);
});

// Correct: debounce van 300ms
let debounceTimer;
searchInput.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    fetchSuggestions(searchInput.value);
  }, 300);
});

Checklist punt 10: Product-afbeeldingen optimaliseren

Shopify converteert afbeeldingen automatisch naar WebP als de browser het ondersteunt. Maar de bron-afbeelding bepaalt de maximale kwaliteit.

Upload altijd afbeeldingen op de maximale resolutie die je nodig hebt (bijv. 2000×2000px voor productafbeeldingen). Shopify genereert kleinere varianten. Gebruik de image_url filter met de juiste breedte:

{%- comment -%}
  Genereer passende grootten via image_url
{%- endcomment -%}
{{ product.featured_image | image_url: width: 800 }}
{%- comment -%}
  Geeft: https://cdn.shopify.com/.../image_800x.webp
{%- endcomment -%}

Vermijd het uploaden van PNG's voor productafbeeldingen zonder transparantie. JPEG of WebP-bronbestanden zijn efficiënter.

Checklist punt 11: Checkout-scripts

Scripts in het checkout zijn beperkt tot Shopify Plus via checkout.liquid of Checkout Extensibility. Toch zien wij regelmatig:

• Analytics-scripts die onnodig in de checkout laden
• Custom JavaScript dat conflicteert met Shopify's eigen checkout-scripts

Controleer je checkout-configuratie. Laad alleen wat noodzakelijk is. Elk extra script in de checkout verhoogt de kans op checkout-errors en vertraagt de betalingsstap.

Checklist punt 12: Metafield-renders controleren

Metafields die niet bestaan resulteren in lege renders. Maar Liquid evalueert de conditionals wel. In grote product-templates met veel metafield-checks stapelen kleine vertragingen op.

Gebruik unless blank checks en groepeer gerelateerde metafields logisch:

{%- comment -%}
  Groepeer technische specs in één blok
{%- endcomment -%}
{%- assign heeft_specs = false -%}
{%- if product.metafields.specs.gewicht.value != blank
    or product.metafields.specs.materiaal.value != blank
    or product.metafields.specs.afmetingen.value != blank -%}
  {%- assign heeft_specs = true -%}
{%- endif -%}

{%- if heeft_specs -%}
  <section class="product-specs">
    {%- comment -%} Render specs hier {%- endcomment -%}
  </section>
{%- endif -%}

Checklist punt 13: Google Tag Manager audit

GTM laadt vaak 8–15 tags bij de eerste pageview. Elke tag kan een extern script laden. Dit stapelt snel op tot 500ms extra laadtijd.

Audit je GTM-container. Concrete vragen:

• Welke tags vuren op alle pagina's?
• Welke kunnen wachten tot na de eerste interactie?
• Welke heb je actief getest de afgelopen 3 maanden?

Zet conversietags op trigger Window Loaded in plaats van Page View. Verwijder tags van tools die je niet meer gebruikt.

Checklist punt 14: App-performance meten

Shopify-apps injecteren JavaScript en CSS. Open je theme zonder ingelogd te zijn (incognito, zonder Shopify-cookie) en meet de performance. Vergelijk met de performance als admin.

Apps die alleen voor admins laden (reviews moderatie, inventory tools) hebben soms de neiging ook storefront-scripts te laden. Rapporteer dit aan de app-developer.

Checklist punt 15: Mobiele vs desktop

Performance-problemen zijn op mobiel 2–3x groter. Test altijd op:

• PageSpeed Insights → Mobile tab
• WebPageTest → Motorola G4, 3G Slow
• Chrome DevTools → Netwerk throttling op Slow 3G, CPU throttling op 6x slowdown

Desktop-scores boven de 90 zijn geen garantie voor goede mobiele performance. Behandel ze als twee aparte audits.

Prioriteitsvolgorde

Begin altijd met JavaScript. Dat levert het meest op. De rest is verfijning.

Conclusie

Een Shopify theme performance audit is geen eenmalige actie. Elke app die je installeert, elke video die marketing wil toevoegen en elke pixel-code die je activeert, verandert de performance.

Plan een audit elk kwartaal in. Meet altijd met de drie tools. Gebruik de Theme Inspector voor Liquid-bottlenecks.

Google's Core Web Vitals zijn sinds 2021 een officiële rankingfactor. Meet je baseline altijd via PageSpeed Insights.

Gerelateerde artikelen:

• 10 concrete performance-ingrepen voor Shopify — directe actie na je audit
• Liquid vs Hydrogen — performance-verschil tussen de twee stacks
• Shopify API rate limits — betrouwbaar integreren zonder vertraging

Wil je een professionele audit van jouw Shopify store? Bekijk onze Shopify-diensten of neem direct contact op.