Ghost code is de #1 oorzaak van trage Shopify-webshops — en de moeilijkste om te diagnosticeren. Het is onzichtbaar voor je klanten, onzichtbaar in je theme editor, en volledig onzichtbaar voor elk geautomatiseerd snelheidstool. Maar het laadt op elke pagina, voor elke bezoeker, elke keer opnieuw.
Snelheidstools vertellen je om afbeeldingen te comprimeren. Ze signaleren render-blokkerende resources. Ze suggereren het inschakelen van tekstcompressie. Wat ze je nooit vertellen: je thema sjouwt drie jaar aan code mee van functies die je hebt uitgeschakeld, apps die je hebt verwijderd, tests die je hebt uitgevoerd en vergeten, en integraties die al lang vervangen zijn.
Wij noemen dit ghost code. Het is de meest voorkomende hoofdoorzaak van onderpresterende Shopify-webshops — en de meest bevredigende fix, want zodra je het vindt, is verwijdering vaak een kwestie van uren in plaats van weken.
Dit artikel legt uit wat ghost code is, waar het zich typisch verstopt in een Shopify-thema, hoe je het vindt, en wat verwijdering doet voor de performance van je webshop.
Wat ghost code precies is
Ghost code is alle JavaScript, CSS of Liquid-code in je Shopify-thema die: op elke pagina laadt — of in ieder geval op meer pagina's dan nodig; geen actieve functie meer vervult voor een huidige bezoeker of feature; en nooit bedoeld was als permanent — maar nooit is opgeschoond.
Het sleutelwoord is onzichtbaar. Ghost code verschijnt niet als een zichtbaar element op je storefront. Er is geen kapotte widget, geen foutmelding, geen teken voor een bezoeker dat er iets mis is. De code laadt stilletjes op de achtergrond, verbruikt browserresources en voegt milliseconden — soms honderden — toe aan elke paginalading.
De reden dat ghost code zich opstapelt is structureel. Shopify-thema's worden jarenlang incrementeel aangepast: apps worden geïnstalleerd en verwijderd, functies worden in- en uitgeschakeld, ontwikkelaars maken wijzigingen zonder volledig zicht op wat vorige ontwikkelaars hebben toegevoegd. Elke aanpassing laat een potentieel residu achter. Niemand auditeert het totaalplaatje.
De meest voorkomende soorten ghost code in Shopify-thema's
Ghost code verschijnt in verschillende vormen, elk met een andere herkomst en performance-impact.
Uitgeschakelde themasecties (Gemiddelde impact): secties uit in de theme editor — maar de JavaScript en CSS laden nog steeds globaal op elke pagina.
Ongebruikte app-blokken (Gemiddelde–Hoge impact): app verwijderd uit de store, maar blokcode staat nog in de themabestanden. Shopify ruimt dit niet automatisch op.
Oude A/B-testscripts (Hoge impact): testframework-JavaScript achtergelaten na afloop van de test — vaak van tools als Google Optimize of een third-party CRO-platform.
Verouderde functiecode (Gemiddelde impact): functies vervangen door native Shopify-functionaliteit — bijvoorbeeld een oude valutaconverter die vervangen is door Shopify Markets.
Overbodige trackingpixels (Gemiddelde impact): dubbele Google Analytics of Meta pixel-implementaties na overdracht van bureau of platformmigratie.
Inactieve slideshow- of videocode (Gemiddelde impact): themafuncties die nooit zijn geactiveerd maar volledig laden op elke pagina.
Verouderd fontladen (Gemiddelde–Hoge impact): oude Google Fonts-aanroepen van een eerdere themaiteratie die naast de huidige fontstack worden geladen.
Dubbele CSS-bestanden (Gemiddelde impact): meerdere stylesheet-versies geladen na incrementele thema-updates die nooit zijn opgeschoond.
Waarom ghost code zo moeilijk te detecteren is
Geautomatiseerde snelheidstools — PageSpeed Insights, GTmetrix, Lighthouse — analyseren wat een pagina laadt en hoe lang dat duurt. Ze identificeren render-blokkerende scripts en doen optimalisatievoorstellen. Maar ze rapporteren over de code zoals die bestaat, niet over of die code iets nuttigs doet.
Een render-blokkerend script is een render-blokkerend script, ongeacht of het een actieve productfunctie aandrijft of een app bedient die je in 2022 hebt verwijderd. De tool signaleert het. Hij kan je niet vertellen dat het dode ballast is.
Thema-audittools doen het niet beter. Shopify's Theme Inspector toont Liquid-renderprestaties. Hij signaleert geen JavaScript van een app-blok dat nooit is opgeschoond na het verwijderen van de app.
De enige betrouwbare manier om ghost code te vinden is een handmatige audit: de themacode lezen, begrijpen wat elke sectie, snippet en script geacht wordt te doen, en identificeren wat geen geldige reden meer heeft om aanwezig te zijn.
We hebben thema's geauditeerd met meer dan 40 JavaScript-bestanden die op de homepage laden. Minder dan de helft bedient actieve functies. De rest zijn ghosts — laden bij elk bezoek, doen niets, kosten echte laadtijd.
Stap 1: Inventariseer elk JavaScript-bestand dat op je pagina laadt
Open Chrome DevTools → Netwerk-tab. Filter op JS. Herlaad je homepage. Je ziet elk JavaScript-bestand dat laadt, inclusief het brondomein en de bestandsgrootte.
Per bestand: kun je identificeren bij welke functie of app het hoort? Is die functie of app nog actief op je webshop? Als het antwoord op een van beide vragen nee is, heb je een ghost gevonden.
Let vooral op bestanden die laden van third-party domeinen — dit zijn bijna altijd app-gerelateerde bestanden. Vergelijk ze met je huidige actieve app-lijst in Shopify-admin.
Stap 2: Auditeer de layout- en sectiebestanden van je thema
In je themacode-editor (of een lokale kopie) open je layout/theme.liquid. Dit is het mastertemplate dat op elke pagina laadt. Elk script-tag, stylesheet-link en snippet-render hier draait op elke pagina van je webshop.
Trace per include- of render-tag naar het bijbehorende bestand en vraag: is deze functie zichtbaar en actief op de live webshop? Veel thema's stapelen snippet-renders op voor secties die zijn gebouwd, getest, en daarna nooit gebruikt — of kort gebruikt en uitgeschakeld.
Stap 3: Controleer op app-blok-residuen
Wanneer een app wordt verwijderd uit Shopify, verdwijnt de app-vermelding uit je admin. De code in je thema wordt niet automatisch verwijderd. App-blokken — de code-snippets die apps aan je themabestanden toevoegen tijdens installatie — blijven staan totdat ze handmatig worden verwijderd.
Zoek in je themacode naar commentaar dat app-namen vermeldt, of naar script-tags die wijzen naar domeinen van apps die je niet meer gebruikt. Dit is de meest voorkomende bron van ghost JavaScript in volwassen Shopify-thema's.
Stap 4: Bekijk je CSS-payload
Open DevTools → Coverage-tab. Laad je pagina, klik op de opnameknop en herlaad. De Coverage-tab toont je exact welk percentage van elk CSS-bestand daadwerkelijk wordt gebruikt op de huidige pagina.
Het is gebruikelijk om CSS-bestanden te zien met 85–95% ongebruikte regels. Een deel hiervan is intentioneel — een globale stylesheet dekt alle paginatypen. Maar als je hele CSS-bestanden vindt met bijna nul gebruik, zijn dat sterke ghost code-kandidaten.
Stap 5: Controleer op dubbele trackingpixels
Bureau-overdrachten, platformmigraties en incrementele tag management-wijzigingen resulteren vaak in dubbele tracking-implementaties. Een Google Analytics-tag via GTM geïnstalleerd én hardcoded in theme.liquid. Een Meta-pixel die twee keer vuurt — eenmaal native en eenmaal via een app.
Dubbele pixels verspillen niet alleen laadtijd — ze corrumperen ook je analysedata. Controleer op duplicaten door je themacode en GTM-container te doorzoeken op dezelfde pixel-ID's.
Wat het verwijderen van ghost code daadwerkelijk doet
De performance-impact van ghost code-verwijdering is vaak onevenredig groot ten opzichte van de inspanning. Ghost code bestaat doorgaans uit synchroon JavaScript — code die laadt in het kritieke renderpad en alles blokkeert totdat het klaar is. Het verwijderen van zelfs één synchroon script dat onnodig laadde, kan de LCP met 200–500ms verlagen.
Wanneer meerdere ghost-scripts tegelijk worden verwijderd — wat meestal het geval is bij thema's die al jaren niet zijn geauditeerd — versterkt het cumulatieve effect zich. We hebben LCP-verbeteringen van meer dan 1,5 seconden gezien door uitsluitend ghost code te verwijderen, nog voor we ook maar iets aan het thema of de app-stack hadden aangepast.
De secundaire voordelen zijn ook aanzienlijk: een schonere codebase is eenvoudiger te onderhouden, makkelijker voor toekomstige ontwikkelaars om in te werken, en minder geneigd om nieuwe ghost code te accumuleren omdat de architectuur strakker is.
Een Shopify Plus-webshop die we auditeerden laadde 2,3MB aan JavaScript op de homepage. Na ghost code-verwijdering was dat 890KB. LCP daalde met 1,8 seconden. Geen ontwerpwijzigingen. Geen nieuwe apps. Geen nieuw thema. Alleen verwijdering.
Ghost code vs. app-bloat: wat is het verschil?
Ghost code en app-bloat zijn gerelateerde maar onderscheiden problemen.
Ghost code is dode code — JavaScript en CSS die laadt maar geen actieve functie meer vervult. Het is het residu van dingen die niet meer in gebruik zijn.
App-bloat is levende code — JavaScript van actieve apps die breder, synchroner of agressiever laadt dan nodig. De app doet nog steeds iets; hij doet het alleen inefficiënt.
Beide beïnvloeden performance. Beide vereisen een andere aanpak om te fixen. Een volledige thema-performanceaudit adresseert beide — identificeert welke scripts ghosts zijn die volledig verwijderd moeten worden, en welke actieve maar slecht geïmplementeerde scripts uitgesteld, beperkt of vervangen moeten worden.
Als je ons artikel over het auditeren van je Shopify app-stack nog niet hebt gelezen, is dat het natuurlijke compagnon bij dit artikel.
Hoe vaak moet ghost code worden aangepakt?
Ghost code is geen eenmalig probleem. Het stapelt zich continu op zolang een thema actief wordt ontwikkeld en apps worden toegevoegd en verwijderd.
Een praktische aanpak: behandel ghost code-verwijdering als onderdeel van je thema-onderhoudscyclus. Eén keer per jaar is een redelijk minimum voor webshops met actieve ontwikkeling. Na elke grote app-wijziging — drie of meer apps toevoegen of verwijderen — is een goede aanleiding voor een gerichte audit.
Webshops op een maandelijks engineering-retainer profiteren van incrementeel ghost code-beheer: elke ontwikkelingssprint omvat een controle of er geen nieuwe dode code is geïntroduceerd.
Conclusie
Ghost code is het performanceprobleem dat geen enkel tool voor je zal vinden. Het vereist een ontwikkelaar die themacode leest, begrijpt wat elk onderdeel geacht wordt te doen, en de discipline heeft om te verwijderen wat er niet meer thuishoort.
Wil je weten hoeveel ghost code er in jouw Shopify-thema zit? Start met een gratis Performance Scan, of boek de 1-Dag Shopify Performance Fix — ghost code-verwijdering is onderdeel van elke sprint.