Korrigieren Sie die Shopify JS-Leistung in 60 Sekunden
Führen Sie einen Geschwindigkeitstest in Ihrem Shop durch – Wenn Sie in der Diagnose „JavaScript-Ausführungszeit reduzieren“ oder „Haupt-Thread-Arbeit minimieren“ sehen, macht die JavaScript-Optimierung den größten Unterschied. Thunder Page Speed Optimizer packt beides automatisch an:
- Verschiebt unkritisches JavaScript bis nach dem Rendern der Seite
- Reduziert die Gesamtblockierzeit (TBT) und verbessert die Interaktion mit der nächsten Farbe (INP)
- Verwaltet die Ladereihenfolge von App-Skripten für optimale Leistung
- Funktioniert mit allen Shopify 2.0-Themes – keine Änderungen am Theme-Code
Für Entwickler, die die JavaScript-Optimierung tiefgreifend verstehen und manuelle Korrekturen anwenden möchten, lesen Sie weiter.
Wie JavaScript die Shopify Store-Leistung zerstört
JavaScript wirkt sich anders auf die Geschwindigkeit aus als CSS oder Bilder. Während CSS das Rendern blockiert und Bilder die visuelle Ladezeit beeinflussen, blockiert JS dies Hauptthread – der einzelne Thread, der für Layout, Malerei und Reaktion auf Benutzerinteraktionen verantwortlich ist. Wenn JavaScript ausgeführt wird, kann nichts anderes passieren. Tippen auf eine Schaltfläche, Scrollen, Tippen – alles eingefroren, bis die JS-Ausführung abgeschlossen ist.
Drei Core Web Vitals-Metriken messen direkt die Wirkung von JavaScript:
| Metrisch | Was es misst | JS Impact |
|---|---|---|
| Gesamtblockierungszeit (TBT) | Zeit, in der der Hauptthread während des Ladens der Seite blockiert wird | Lange JS-Aufgaben (>50 ms) erhöhen direkt die TBT |
| Interaktion mit nächster Farbe (INP) | Reaktionsfähigkeit auf Benutzereingaben | Starke JS-Ausführung verzögert die Reaktion auf Klicks/Tips |
| Time to Interactive (TTI) | Wenn die Seite zuverlässig interaktiv wird | Die Seite ist nicht interaktiv, bis JS die Ausführung abgeschlossen hat |
Auf einem Mobilgerät der Mittelklasse (wie die meisten Käufer es verwenden) dauert das Parsen und Ausführen von JavaScript 500 KB 2-4 Sekunden. Während dieser Zeit scheint der Store überladen zu sein, reagiert aber nicht auf Interaktionen – das schlechteste Benutzererlebnis überhaupt. Aus diesem Grund hat die JS-Optimierung oft einen größeren Einfluss auf die Conversions als die Bildoptimierung. Erfahren Sie mehr in unserem Core Web Vitals-Leitfaden.
Wo kommt das gesamte JavaScript her?
Der erste Schritt zur Reduzierung besteht darin, zu verstehen, woher das JavaScript Ihres Shops stammt. Hier ist eine typische Aufschlüsselung:
| JS-Quelle | Typische Größe | Geladen am |
|---|---|---|
| Shopify-Kern (Analyse, Checkout) | 80-120KB | Jede Seite |
| Theme-JavaScript (Dawn, Prestige usw.) | 60-200KB | Jede Seite |
| Installierte Apps (Bewertungen, Upsells, Chat) | 150-500KB | Jede Seite (normalerweise) |
| Analytics (GA4, Meta Pixel, TikTok) | 50-150KB | Jede Seite |
| Widgets von Drittanbietern (Chat, Popups) | 50-200KB | Jede Seite |
Beachten Sie das Muster: Apps und Skripte von Drittanbietern machen 50–70 % des gesamten JavaScript aus in den meisten Shopify-Shops. Ein Store mit 12 Apps verfügt möglicherweise über mehr als 400 KB App-JavaScript, das auf jeder Seite geladen wird, auch auf Seiten, auf denen diese Apps nicht benötigt werden.
Unser Leitfaden für Skripte von Drittanbietern deckt die volle Auswirkung externer Skripte und deren Verwaltung ab.
So prüfen Sie JavaScript in Ihrem Shopify-Shop
Vor der Optimierung müssen Sie genau wissen, welche Skripte geladen werden und wie viel Haupt-Thread-Zeit sie verbrauchen.
Methode 1: Chrome DevTools-Abdeckung
- Öffnen Sie Ihren Shop in Chrome → DevTools (
F12) - Drücken
Strg+Umschalt+P(Mac:Befehl+Umschalt+P) → „Abdeckung“ eingeben → „Abdeckung anzeigen“ auswählen - Klicken Sie im Abdeckungsbereich auf die Schaltfläche „Neu laden“.
- Filtern nach „JS“ – Sortierung nach Gesamtbytes und ungenutzten Bytes
- Typisches Ergebnis: 60–80 % des geladenen JavaScript sind ungenutzt auf einer einzelnen Seite
Methode 2: Flammendiagramm auf der Registerkarte „Leistung“.
- DevTools → Registerkarte „Leistung“ → „Screenshots“ und „Web Vitals“ ankreuzen
- Klicken Sie auf „Aufzeichnen“ → Seite neu laden → Aufnahme beenden
- Sehen Sie sich den Hauptabschnitt an – gelbe Blöcke stehen für die Ausführung von JavaScript
- Lange gelbe Blöcke (>50 ms) sind „lange Aufgaben“, die den Hauptthread blockieren
- Klicken Sie auf einen beliebigen Block, um zu sehen, welches Skript und welche Funktion verantwortlich ist
Methode 3: Registerkarte „Netzwerk“.
- DevTools → Registerkarte „Netzwerk“ → Filter nach „JS“
- Laden Sie die Seite neu und sortieren Sie sie nach Größe (größte zuerst)
- Beachten Sie die insgesamt übertragenen JS und die Anzahl der Anfragen
- Überprüfen Sie die Spalte „Initiator“, um zu sehen, welche Skripte andere Skripte geladen haben
Für ein umfassenderes Leistungsbild: Führen Sie Ihren Shop durch unseren Geschwindigkeitstest – es hebt JavaScript-spezifische Probleme neben anderen Leistungsengpässen hervor.
Skriptverzögerung: asynchron, verzögert und dynamisches Laden
Standardmäßig ist <script> -Tags blockieren die HTML-Analyse. Der Browser stoppt den Aufbau der Seite, lädt das Skript herunter, führt es aus und fährt dann fort. Skriptverzögerungsattribute ändern dieses Verhalten:
<!-- Render-blocking (default) — worst for performance -->
{'