Shopify App Performance: Bremser finden & Code weg
⏱ 13 Min. Lesezeit
Shopify Apps bremsen deinen Shop: So findest du den Übeltäter und entfernst zurückgelassenen Code
Dein Shop hat über die Jahre Apps gesammelt: ein Review-Widget hier, ein Chat-Popup da, zwei Upsell-Tools, drei Tracking-Pixel. Jede bringt eigenes JavaScript mit, und in Summe wird daraus ein spürbares Problem. Deine Shopify App Performance sinkt, die Seite lädt träger, und Google wie Kunden merken es. Der Haken, den kaum jemand kennt: Eine App zu deinstallieren entfernt ihren Code nicht. Dieser Leitfaden zeigt dir, wie du den echten Übeltäter findest und den zurückgelassenen Code sauber entfernst, ohne deinen ganzen App-Stack über Bord zu werfen.
Wie Apps zum Ladezeit-Problem werden
Ein Shopify-Shop wird selten wegen einer einzigen Datei langsam. Er wird langsam, weil jede App, jedes Skript und jedes Feature sich leise in den Seitenaufbau einreiht. Jede knabbert an deiner Shopify App Performance. Vier Mechanismen stecken dahinter:
- JavaScript auf jeder Seite. Viele Apps laden ihren Code global, auch auf Seiten, wo ihr Feature gar nicht gebraucht wird.
- Render-blockierende Ressourcen. App-CSS und -Skripte im
<head>verzögern den ersten Paint, obwohl sie für den sichtbaren Bereich irrelevant sind. - Zusätzliche Requests und Fremd-Domains. Jede App bringt eigene Verbindungen mit, jede kostet DNS-Lookup, Handshake und Ladezeit.
- Main-Thread und INP. Event-Listener von Chat-, Popup- und Tracking-Apps konkurrieren um die Hauptthread-Zeit und verschlechtern die Reaktion auf Klicks.
Das trifft direkt deine Core Web Vitals. Warum der Lab-Score dabei trügt und was Google wirklich misst, klären wir in unserem Beitrag zu Shopify Core Web Vitals. Und wie du speziell das Hero-Bild und LCP löst, steht im Shopify LCP Fix. Dieser Artikel kümmert sich um die Apps selbst.
Warum eine Deinstallation den App-Code nicht entfernt
Das ist der wichtigste und am meisten unterschätzte Punkt. Wenn du eine App löschst, entziehst du ihr nur den Zugriff auf deine Admin-Daten. Du entfernst nicht die Liquid-Snippets, JavaScript- und CSS-Dateien, die sie in deine Theme injiziert hat. In der Praxis heißt das: Wer über ein Jahr zehn verschiedene Upsell-Apps getestet hat, lädt womöglich zehn tote Skripte bei jedem Seitenaufruf, die still deine Shopify App Performance belasten. Man nennt das „Ghost Code“ oder Theme-Bloat.
Zwei Arten von App-Code musst du unterscheiden:
- App Embeds. Moderne Apps nutzen das App-Embed-System (Onlineshop > Themes > Anpassen > App-Embeds). Diese lassen sich per Schalter aktivieren und werden bei der Deinstallation automatisch entfernt.
- Manuell eingefügter Code. Ältere Apps bitten dich, Code in
theme.liquideinzufügen, oder legen Snippet- und Asset-Dateien ab. Genau dieser Code bleibt zurück und muss von Hand raus.
Bevorzuge bei neuen Apps solche, die App Embeds nutzen statt dich Code in theme.liquid einfügen zu lassen. Das steht in der Installationsanleitung der App. So räumt die Deinstallation später von selbst auf.
Schritt 1: Nimm einen Baseline-Wert, bevor du etwas anfasst
Ohne Ausgangswert kannst du später nicht beweisen, dass deine Aufräumaktion etwas gebracht hat. Miss zuerst, dann handle.
- Jage Startseite, eine typische Produktseite und die Warenkorbseite durch PageSpeed Insights.
- Notiere deine Core Web Vitals, die gesamte JavaScript-Last und die Zahl der render-blockierenden Ressourcen.
- Speichere diese Zahlen als „Vorher“, getrennt pro Vorlage.
Miss vorher und arbeite an einer Theme-Kopie. Ein Baseline-Wert beweist den Effekt, und eine Kopie schützt dich davor, den Shop live zu zerlegen.
So diagnostizierst du dein Shopify App Performance Problem
Jetzt findest du den Übeltäter hinter deiner Shopify App Performance, mit Daten statt Bauchgefühl. Vier Werkzeuge, vom einfachsten zum genauesten.
PageSpeed Insights: die Drittanbieter-Diagnosen
Öffne deine Produktseite in PageSpeed Insights und lies gezielt diese Punkte: „Auswirkungen von Drittanbietercode reduzieren“ gruppiert Skripte nach Anbieter samt Blockierzeit, „Nicht verwendetes JavaScript reduzieren“ zeigt, welcher Code geladen, aber nicht genutzt wird. Gleiche die genannten Domains mit deinen installierten Apps ab. Die größten Byte- und Blockierwerte sind deine Prioritäten.
Chrome DevTools: Network und Coverage
Öffne DevTools (F12), Reiter „Network“, filtere auf JS und lade die Seite neu. Sortiere nach Größe oder Zeit, und du siehst jedes Skript, das Theme und Apps ziehen. Skripte von fremden Domains sind die Drittanbieter. Der Reiter „Coverage“ (über Ctrl+Shift+P, dann „Show Coverage“) zeigt dir zusätzlich, wie viel Prozent jeder Datei ungenutzt bleibt.
WebPageTest: eine Domain blockieren und vergleichen
Der sauberste Beweis. In WebPageTest öffnest du unter „Advanced Configuration“ den Reiter „Block“ und blockierst die Domain der verdächtigen App. Dann vergleichst du den Lauf mit und ohne. Shopify beschreibt diese Methode in der eigenen Performance-Dokumentation. So misst du den echten Beitrag einer einzelnen App zur Ladezeit.
Shopify Theme Inspector: langsames Liquid finden
Die Chrome-Erweiterung Shopify Theme Inspector zeigt als Flammendiagramm, welche Section und welcher App-Block wie viel Server-Renderzeit kostet. Damit findest du App-Code, der schon beim Rendern der Seite bremst, nicht erst im Browser.
Die App-Kategorien, die am meisten kosten
Bestimmte App-Typen tauchen in fast jedem Shopify App Performance Audit als Bremser auf, wegen der Art, wie sie laden und was sie tun.
| App-Kategorie | Typisches Symptom | Was tun |
|---|---|---|
| Chat- & Support-Widgets | Großes JS, lädt global, hoher INP | Nur wo nötig laden oder ersetzen |
| Review-Apps | Schwere Widgets, render-blockierend | Lazy laden, Markup nativ einbauen |
| Social-Proof- & Popup-Apps | Viele Requests, Layout-Shift | Auf wenige Seiten begrenzen |
| Page-Builder (alt) | Große Section- und Snippet-Dateien | Nach Deinstallation Dateien entfernen |
Chat- und Support-Widgets sind die klassischen Verdächtigen: Sie laden schweres JavaScript auf jeder Seite, obwohl der Chat vielleicht nur auf einer Handvoll Seiten gebraucht wird.
Schritt 2: Prüfe deinen App-Stack
Bevor du Code löschst, entscheide, welche Apps überhaupt bleiben. Geh die Liste ehrlich durch und stelle drei Fragen pro App:
- Nutzt du sie noch? Test-Apps von vor einem Jahr sind der häufigste Ballast.
- Überschneidet sie sich? Zwei Apps für dasselbe Feature bedeuten doppeltes JavaScript.
- Gibt es eine native Alternative? Manche App-Features lassen sich direkt und leichter in der Theme abbilden.
Alles, was diese drei Fragen nicht übersteht, kommt auf die Deinstallations-Liste. Jede Entfernung ist ein direkter Gewinn für deine Shopify App Performance. Wenn du ein Feature behalten willst, baue die native Variante ein, bevor du die App entfernst.
Du siehst rote Werte, weißt aber nicht, welche App sie verursacht?
Shopify PageSpeed Audit
Wir messen den Speed-Beitrag jeder App und benennen den echten Bremser.
Speed-Audit starten →Shopify Theme-Entwicklung
Wir entfernen Ghost Code sauber und bauen nötige Features nativ nach.
Code bereinigen →Technisches SEO für Shopify
Wir verbinden schnellere Ladezeit mit besseren Rankings.
SEO-Basis prüfen →Schritt 3: Sauber deinstallieren und Ghost Code entfernen
Jetzt kommt der Teil, den die Deinstallation dir nicht abnimmt.
Zuerst: die Theme duplizieren
Onlineshop > Themes > Aktionen > Duplizieren. Arbeite an der Kopie, prüfe sie in der Vorschau und veröffentliche erst, wenn alles funktioniert. Der häufigste Fehler beim Aufräumen ist, ein Snippet zu löschen, das eine Section noch rendert, oder ein Skript, von dem ein anderes abhängt.
Wo App-Code sich versteckt
Öffne den Code-Editor (Aktionen > Code bearbeiten) und suche an diesen Stellen nach dem Namen oder der Domain der deinstallierten App:
theme.liquid,header.liquidundfooter.liquidauf zurückgebliebene<script>-Tags und{% render %}-Zeilen,- der Ordner
snippetsauf Dateien mit App-Namen wieyotpo-head.liquidoderloox-reviews.liquid, - der Ordner
assetsauf verwaiste JS- und CSS-Dateien, - die App-Embeds-Ansicht auf Schalter von Apps, die es nicht mehr gibt.
So sieht typischer Ghost Code aus, der nach einer Deinstallation zurückbleibt:
<!-- App deinstalliert, diese Zeilen laden ins Leere -->
{% render 'yotpo-widget' %}
<script src="https://cdn.example-app.com/loader.js" defer></script>So bestätigst du, dass Code zu einer toten App gehört
Drei sichere Wege: Suche im Theme-Code nach dem Marken- oder Domainnamen (Apps hinterlassen ihn meist in der src-URL, im Dateinamen oder in Kommentaren). Öffne die Browser-Konsole und achte auf 404-Fehler von Skripten, die ins Leere laden, ein klares Ghost-Code-Signal. Oder installiere die App frisch auf einer Test-Theme und vergleiche den Unterschied, das ist ihr Fußabdruck.
Lösche niemals Code direkt in der Live-Theme und nie ohne Duplikat. Entferne auch keinen Code einer App, die du noch nutzt. Im Zweifel den App-Entwickler nach einer Entfernungsanleitung fragen oder eine Sicherung ziehen, bevor du speicherst.
Häufige Fehler beim Aufräumen von App-Code
Selbst eine gute Aufräumaktion scheitert, wenn du in eine dieser Fallen tappst.
- Ohne Theme-Duplikat arbeiten. Ein falscher Klick, und die Live-Seite ist kaputt.
- Code einer noch aktiven App löschen. Immer erst prüfen, ob die App wirklich weg ist.
- Ein Snippet entfernen, das eine Section noch rendert. Vorschau testen, bevor du veröffentlichst.
- Jedes Skript jagen. Manche App-Skripte gehören zu Features, die du behalten willst, die brauchst du nicht zu töten, sondern nur zu bändigen.
- Nicht erneut messen. Ohne Vorher-Nachher-Vergleich weißt du nicht, ob es deiner Shopify App Performance geholfen hat.
So bestätigst du deine bessere Shopify App Performance
Miss in zwei Schritten, sonst ziehst du falsche Schlüsse:
- Sofort im Labor. Lade dieselben Vorlagen erneut durch PageSpeed Insights und vergleiche JavaScript-Last, render-blockierende Ressourcen und Requests mit deinem Vorher-Wert. Das ist dein Gewinn an Shopify App Performance, in Zahlen.
- Nach zwei bis vier Wochen im Feld. Die offizielle Bewertung der Core Web Vitals basiert auf einem rollierenden 28-Tage-Fenster echter Nutzer. Erwarte in der Search Console keine sofortige Bewegung.
Zur Einordnung, warum sich die Arbeit lohnt: Laut Web Almanac 2025 liefert eine typische mobile Seite inzwischen rund 700 KB JavaScript aus, ein Großteil davon von Drittanbietern. Jedes tote Skript, das du entfernst, senkt genau diese Last.
Wann eine App bleiben darf und wann sie gehen muss
Nicht jede App ist ein Problem. Manche verdienen ihr Gewicht: Eine Review-App, die Umsatz bringt, ist ihre paar Kilobyte wert, wenn sie sauber lädt. Die ehrliche Regel lautet: Behalte, was einen messbaren Beitrag leistet und sich ordentlich verhält. Ersetze, was sich mit einer anderen App überschneidet. Baue nativ nach, was die Theme genauso gut kann. Und entferne restlos, was tot ist. Eine gute Shopify App Performance kommt nicht daher, dass du alle Apps löschst, sondern daher, dass jede verbleibende App ihren Platz verdient.
Du hast aufgeräumt und willst wissen, was als Letztes noch bremst?
Shopify PageSpeed Audit
Wir liefern einen App-für-App-Speed-Report und die konkrete Reihenfolge.
Ladezeit prüfen →Shopify Theme-Entwicklung
Wir entfernen den Ballast und bauen Features nativ, statt noch eine App zu laden.
Theme bereinigen →Technisches SEO für Shopify
Wir sichern, dass aus schnellerem Shop auch bessere Rankings werden.
SEO-Audit holen →Shopify App Performance: Häufige Fragen
Oft ja. Eine Deinstallation entzieht der App nur den Admin-Zugriff; die Liquid-Snippets, Skripte und Asset-Dateien, die sie in die Theme eingefügt hat, bleiben meist. Sie laden als Ghost Code auf jeder Seite weiter. App-Embed-Code wird automatisch entfernt, manuell eingefügter Code muss von Hand gesucht und gelöscht werden.
Jage eine Produktseite durch PageSpeed Insights und lies „Auswirkungen von Drittanbietercode reduzieren“ und „Nicht verwendetes JavaScript reduzieren“, dann gleiche die Domains mit deinen Apps ab. Als Beweis blockierst du eine verdächtige Domain in WebPageTest und vergleichst, oder du prüfst den Network-Reiter in Chrome DevTools.
Es gibt keine feste Zahl. Entscheidend ist, wie eine App lädt, nicht die Menge. Eine App, die ihr JavaScript global auf jeder Seite lädt, schadet mehr als drei, die nur dort laden, wo sie gebraucht werden. Prüfe die echte Wirkung jeder App in den Felddaten, statt Installationen zu zählen.
Meist ja. Tote Skripte deinstallierter Apps werden bei jedem Seitenaufruf weiter geladen, geparst und ausgeführt, für ein Feature, das es nicht mehr gibt. Sie zu entfernen senkt Requests, JavaScript-Last und Hauptthread-Arbeit, was LCP und INP hilft, besonders mobil. Miss immer vorher und nachher.
Sicher ist es, wenn du an einer Theme-Kopie arbeitest, nicht an der Live-Version. Dupliziere sie, entferne den Code auf der Kopie, prüfe in der Vorschau und veröffentliche dann. Das häufigste Risiko ist, ein Snippet zu löschen, das eine Section noch rendert. Bei Unsicherheit mit Liquid übernimmt das besser ein Entwickler.
App Embeds sind App-Funktionen, die du im Theme-Editor unter Onlineshop > Themes > Anpassen > App-Embeds ein- und ausschaltest. Sie sind besser, weil die Deinstallation der App den Embed automatisch entfernt, ohne Ghost Code. Bevorzuge bei der App-Wahl solche mit Embeds statt mit eingefügtem Code.
Eine Cleanup-App kann alten Code scannen und markieren, das ist praktisch. Zuverlässig ist aber die manuelle Methode: Theme-Dateien nach dem App-Namen oder der Domain durchsuchen, prüfen, dass die App weg ist, und auf einer Kopie löschen. Noch eine App zu installieren, um Apps zu entfernen, ist etwas ironisch, nutze sie als Scanner, nicht als Krücke.
Prüfe deinen App-Stack jedes Quartal und immer nach dem Entfernen oder Ersetzen einer App. Apps sammeln sich leise an, und jede Installation oder Theme-Änderung kann die Ladezeit verschlechtern. Ein kurzer Quartals-Check plus ein PageSpeed-Test deiner wichtigsten Vorlagen hält Ghost Code und Bloat fern.
Vladyslav Kharkivskyi
