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 onzichtbaar voor geautomatiseerde snelheidstools. Toch kan het op elke pagina laden, voor elke bezoeker, elke keer opnieuw.
Snelheidstools vertellen je dat je afbeeldingen moet comprimeren. Ze signaleren render-blokkerende resources en suggereren tekstcompressie. Wat ze je niet vertellen: je thema kan drie jaar aan code meedragen 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.
Je kunt dit zien als technische rommel. Het is een van de meest voorkomende hoofdoorzaken van een onderpresterende Shopify-webshop en een van de meest bevredigende fixes, want zodra je het vindt, is verwijderen 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 kan doen 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 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 en 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 en ontwikkelaars maken wijzigingen zonder volledig zicht op wat vorige ontwikkelaars hebben toegevoegd. Elke aanpassing laat potentieel residu achter en niemand auditeert automatisch het totaalplaatje.
Shopify trekt de toegang van een app in wanneer je die verwijdert. Shopify's documentatie over access tokens legt uit dat het verwijderen de toegang van het token beëindigt, waarna requests 401 teruggeven. De app kan dus niet vertrouwen op een latere Admin API-request om legacy themacode te verwijderen, zelfs als de ontwikkelaar een opruimroutine had gebouwd.
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 uitgeschakeld in de theme editor, terwijl globale JavaScript of CSS voor die functies breder laadt dan nodig.
Legacy app-snippets en assets (Gemiddelde–Hoge impact): een Liquid-render, JavaScript, CSS of asset-verwijzing van een app die in themabestanden is gekopieerd en achterblijft nadat de app is verwijderd. Dit is iets anders dan een Theme App Extension-blok, dat Shopify automatisch verwijdert bij het verwijderen van de app.
Oude A/B-testscripts (Hoge impact): testframework-JavaScript achtergelaten na afloop van de test, vaak van een third-party CRO-platform.
Legacy ScriptTag-gebaseerde pixels (Gemiddelde impact): oudere analytics- of conversiescripts die via ScriptTag zijn geregistreerd, of in het thema zijn gedupliceerd. Shopify documenteert ScriptTags als deprecated en verwijst analytics- en conversie-use-cases naar Web Pixels.
Scripts van beëindigde experimenten (Gemiddelde–Hoge impact): Google Optimize was na 30 september 2023 niet meer beschikbaar, dus een handmatig toegevoegd experiment-snippet dat nog aanwezig is, is een audit-kandidaat.
Verouderde functiecode (Gemiddelde impact): functies die zijn vervangen door native Shopify-functionaliteit, bijvoorbeeld een oude valutaconverter die is vervangen door Shopify Markets.
Overbodige trackingpixels (Gemiddelde impact): dubbele Google Analytics- of Meta-pixelimplementaties na een bureaunoverdracht 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 thema-iteratie die naast de huidige fontstack laden.
Dubbele CSS-bestanden (Gemiddelde impact): meerdere stylesheet-versies die laden na incrementele thema-updates die nooit zijn opgeschoond.
Waarom ghost code zo moeilijk te detecteren is
Geautomatiseerde snelheidstools, waaronder PageSpeed Insights, GTmetrix en Lighthouse, analyseren wat een pagina laadt en hoe lang dat duurt. Ze identificeren render-blokkerende scripts en doen optimalisatievoorstellen. 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 2024 hebt verwijderd. De tool signaleert het. Hij kan je niet vertellen dat het dode ballast is.
Thema-audittools hebben een andere focus. Shopify's Theme Inspector toont Liquid-renderprestaties, maar vertelt je niet of elke legacy JavaScript-verwijzing nog nodig is.
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.
Als auditobservatie, niet als onafhankelijke benchmark, vinden we in webshops die we vóór een custom build auditen regelmatig 8–12 verweesde scripts van apps die maanden of jaren eerder zijn verwijderd.
We hebben thema's geauditeerd met meer dan 40 JavaScript-bestanden die op de homepage laden. Minder dan de helft bediende actieve functies. De rest waren ghosts, ze laadden bij elk bezoek, deden niets en kostten echte laadtijd.
Stap 1: Inventariseer elk JavaScript-bestand dat op je pagina laadt
Open Chrome DevTools en daarna het Network-tabblad. Filter op JS en herlaad je homepage. Je ziet elk JavaScript-bestand dat laadt, inclusief het brondomein en de bestandsgrootte.
Vraag per bestand of je kunt identificeren bij welke functie of app het hoort en of die functie of app nog actief is op je webshop. Als het antwoord op een van beide vragen nee is, heb je een ghost-kandidaat gevonden.
Let vooral op bestanden die laden van third-party domeinen, want die zijn vaak app-gerelateerd. Vergelijk ze met je huidige actieve app-lijst in Shopify-admin en bevestig de uitkomst in de themacode voordat je iets verwijdert.
Stap 2: Auditeer de layout- en sectiebestanden van je thema
Open in je themacode-editor, of in een lokale kopie, layout/theme.liquid. Dit is het mastertemplate dat op elke pagina laadt. Elk script-tag, stylesheet-link en snippet-render hier kan op elke pagina van je webshop draaien.
Traceer elke include- of render-tag naar het bijbehorende bestand en vraag of de functie zichtbaar en actief is 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.
Leg vast wat je vindt voordat je bewerkt. Een eenvoudige inventaris van bestand, eigenaar, doel, laadbereik en verwijderbesluit voorkomt dat je code verwijdert die een minder zichtbare functie nog nodig heeft.
Stap 3: Controleer op legacy app-residu
Ga er niet van uit dat het verwijderen van een app elke aangepaste toevoeging heeft gewist. Shopify zegt dat blokken van Theme App Extensions automatisch en volledig uit online store-thema's worden verwijderd wanneer de app wordt verwijderd. Legacy snippet-renders, handmatig toegevoegde script-tags en gekopieerde assets zijn aparte audit-kandidaten.
Zoek in je themacode naar opmerkingen met app-namen, Liquid-renders, script-tags en asset-verwijzingen naar domeinen of bestanden van apps die je niet meer gebruikt. Controleer zowel het huidige thema als gedupliceerde gepubliceerde of ongepubliceerde thema's waar een migratie kan zijn begonnen.
Bevestig bij elke kandidaat dat de bijbehorende functie niet meer actief is, verwijder de kleinst mogelijke veilige eenheid en test de storefront voordat je verdergaat.
Stap 4: Bekijk je CSS-payload
Open DevTools, kies het Coverage-tabblad, klik op de opnameknop en herlaad je pagina. Het Coverage-tabblad toont 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 daarvan is intentioneel omdat een globale stylesheet alle paginatypen dekt. 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 wijzigingen in tag management resulteren vaak in dubbele tracking-implementaties. Je kunt een Google Analytics-tag via GTM hebben geïnstalleerd én hardcoded in theme.liquid, of een Meta-pixel die twee keer vuurt, eenmaal native en eenmaal via een app.
Dubbele pixels verspillen niet alleen laadtijd. Ze kunnen ook je analysedata vervormen. Controleer je themacode en GTM-container op dezelfde pixel-ID's en breng daarna elke implementatie in kaart met de huidige eigenaar en consent-instelling.
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 bevat doorgaans synchroon JavaScript, dat in het kritieke renderpad laadt en ander werk kan blokkeren 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 voordat we iets aan het thema of de app-stack hadden aangepast.
De secundaire voordelen stapelen zich verder op: 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 duidelijker 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, maar beide vereisen een andere aanpak. Een volledige thema-performanceaudit 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 moderne apps ghost code voorkomen
Theme App Extensions zijn Shopify's moderne app-architectuur om themafunctionaliteit toe te voegen. Hun blokken worden via de theme editor beschikbaar gemaakt en Shopify's developerdocumentatie zegt dat blokken van een verwijderde app automatisch en volledig uit online store-thema's worden verwijderd.
Dat verschilt wezenlijk van een legacy Liquid-injectie in theme.liquid. Een legacy injectie of handmatig gekopieerd asset maakt deel uit van je themacode en moet via een audit worden gevonden en verwijderd. Een Theme App Extension heeft een schonere lifecycle omdat Shopify de verbinding met het app-blok beheert.
Gebruik dit als selectiecriterium voor apps. Vraag of een app Theme App Extensions gebruikt of je vraagt code in theme.liquid te plakken, wat er bij verwijderen met bestaande assets gebeurt en welke scripts op welke templates laden. De antwoorden laten zien of de app is ontworpen om toekomstig residu te beperken.
Hoe vaak moet ghost code worden aangepakt?
Ghost code is geen eenmalig probleem. Het stapelt zich op zolang een thema actief wordt ontwikkeld en apps worden toegevoegd, vervangen en verwijderd.
Een praktische aanpak is om ghost code-verwijdering als onderdeel van je thema-onderhoudscyclus te behandelen. Eén keer per jaar is een redelijk minimum voor webshops met actieve ontwikkeling. Na een grote app-wijziging, zoals 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.
Veelgestelde Vragen
Wat is Shopify ghost code?
Shopify ghost code is achtergebleven JavaScript, CSS of Liquid in je thema die geen actieve functie meer bedient. Het kan afkomstig zijn van legacy app-snippets, oude experimenten, dubbele pixels of vervangen themafunctionaliteit. Omdat het niet zichtbaar kapot is, moet je eerst achterhalen wat elk asset doet voordat je het verwijdert.
Hoe vind ik ghost code in mijn Shopify webshop?
Begin met het inventariseren van JavaScript-requests in DevTools en traceer elke kandidaat daarna door theme.liquid, sectiebestanden, snippets en assets. Vergelijk wat je vindt met je actieve apps en huidige functies en test elke verwijdering op een duplicaat van je thema voordat je publiceert. Een handmatige thema-audit is betrouwbaarder dan alleen een snelheidsscore.
Waarom wordt mijn Shopify-webshop langzamer in de loop der tijd?
Je Shopify-webshop kan na verloop van tijd langzamer worden doordat app-residu, overbodige JavaScript, verouderde pixels en CSS-bloat zich opstapelen terwijl het thema verandert. Elke toevoeging kan klein zijn, maar de gecombineerde payload en uitvoeringsbelasting verhogen de laadtijd. Regelmatige audits van thema en app-stack helpen die achteruitgang vroeg te vinden.
Wat zijn Shopify Theme App Extensions?
Shopify Theme App Extensions laten een app themafunctionaliteit toevoegen via app-blokken die Shopify in de theme editor beheert. Shopify zegt dat blokken van een verwijderde app automatisch en volledig uit online store-thema's worden verwijderd. Daardoor is een app op basis van extensions een veiligere lifecycle-keuze dan legacy code die in theme.liquid is geplakt.
Verwijdert het verwijderen van een app de code uit mijn thema?
Niet altijd. Shopify verwijdert blokken van Theme App Extensions automatisch, maar legacy snippets, assets en handmatig toegevoegde scripts kunnen in themabestanden blijven staan en moeten worden geauditeerd. Het verwijderen van de app beëindigt ook het access token, zodat de app geen latere Admin API-opruimrequest met dat token kan uitvoeren.
Hoeveel snelheid win ik daadwerkelijk door ghost code te verwijderen?
Ghost code verwijderen kan merkbare tijd terugwinnen, maar er is geen universeel getal omdat het resultaat afhangt van wat wanneer laadt. We hebben gezien dat één onnodig synchroon script de LCP met 200–500ms verlaagt, terwijl een geaudite Shopify Plus-webshop van 2,3MB naar 890KB homepage-JavaScript ging en de LCP met 1,8 seconden verbeterde. Meet voor en na onder dezelfde omstandigheden van pagina en apparaat.
Conclusie
Ghost code is het performanceprobleem dat geen enkele tool voor je zal vinden. Je hebt een ontwikkelaar nodig 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.