Shopify reduziert die JavaScript-Ausführungszeit: Behebt die PageSpeed-Warnung

Warum Shopify Stores diese JavaScript-Warnung erhalten

Lighthouse meldet die JavaScript-Ausführungszeit, wenn der Browser einen großen Teil der Haupt-Thread-Zeit mit der Auswertung von Skripten verbringt. Shopify-Shops sind besonders exponiert, da Theme, Apps, Analysepixel, Einwilligungstools, Bewertungs-Widgets, Suchtools, Sammlungsfilter, Seitenersteller und Warenkorbschubladen häufig auf derselben Seite ausgeführt werden.

Die Core Web Vitals-Anleitung von Google trennt Laden, Reaktionsfähigkeit und visuelle Stabilität. Schweres JavaScript beeinträchtigt die Reaktionsfähigkeit am unmittelbarsten, da Klicks und Tippen hinter langen Aufgaben warten. Es kann auch LCP verzögern, wenn Skripte mit dem Hero-Bild, CSS und der Schriftartenwiedergabe konkurrieren. Wenn Sie auch einen schlechten INP oder eine schlechte Gesamtblockierungszeit feststellen, lesen Sie die Shopify INP-Leitfaden und Leitfaden zur Gesamtblockierungszeit von Shopify.

Die Warnung fordert Sie nicht auf, jedes Skript zu löschen. Es fordert Sie auf, zu entscheiden, welche Skripte für die erste Ansicht wichtig sind und welche warten können. Eine Produktseite erfordert Variantenauswahl, Preisstatus, Produktmedien, Add-to-Cart und manchmal Abonnements. Es sind wahrscheinlich nicht Chat, Bewertungen, Empfehlungen, Heatmaps und jedes Marketing-Tag vor der ersten Interaktion erforderlich.

So finden Sie das Shopify-JavaScript, das wichtig ist

Test the homepage, a best-selling product page, a collection page, and a landing page. Product pages often have the worst script mix because reviews, media galleries, subscriptions, recommendations, and product options all load there. Collection pages often suffer from filters, search, sorting, personalization, and large DOM updates.

Öffnen Sie in Chrome DevTools das Leistungsfenster, zeichnen Sie eine durch Mobilgeräte gedrosselte Last auf und suchen Sie nach langen gelben Skriptblöcken. Aktivieren Sie in PageSpeed ​​Insights „JavaScript-Ausführungszeit reduzieren“, „Haupt-Thread-Arbeit minimieren“ und „Nicht verwendetes JavaScript reduzieren“. Das Web Performance Dashboard von Shopify liefert Feldtrends, während PageSpeed ​​seitenspezifische Diagnosen liefert.

Verwenden Sie jedes Mal dieselben URLs. Die PageSpeed-Werte variieren, da Teststandort, Cache, Drosselung, App-Antworten und Seitenstatus variieren. Der Artikel über warum die Ergebnisse des Shopify-Geschwindigkeitstests variieren erklärt, wie man Tests vergleicht, ohne zufällige Bewegungen zu verfolgen.

Handbuch Schritt für Schritt: Reduzieren Sie die JavaScript-Ausführungszeit auf Shopify

1. Entfernen Sie Apps und Snippets, die Sie nicht mehr verwenden

Beginnen Sie mit der App-Liste, den Einbettungen von Theme-Apps und alten Snippets. Deinstallierte Apps können Code hinterlassen theme.liquid, Abschnitte, Snippets oder Kundenereignispixel. Entfernen Sie den Code erst, nachdem Sie das Design dupliziert und bestätigt haben, dass die App nicht aktiv ist.

<!-- theme.liquid: remove old scripts only after confirming the app is gone -->
<!-- Example of stale code to investigate, not blindly delete -->
<script src="https://cdn.old-widget.example/app.js"></script>
{% render 'old-reviews-widget' %}

Wenn dies ein wiederkehrendes Problem ist, lesen Sie der Shopify-App-Reste-Guide bevor Sie Produktionsthemendateien bearbeiten.

2. Skripte zurückstellen, die für die erste Interaktion nicht benötigt werden

Einheimisch aufschieben ist sicher für viele themeneigene Skripte, die das Parsen nicht blockieren müssen. Es behält die Ausführungsreihenfolge für verzögerte Skripte bei und wird nach der HTML-Analyse ausgeführt. Fügen Sie es nicht blind zur Kassenlogik, zum Einwilligungscode oder zu Skripten hinzu, die initialisiert werden müssen, bevor die Seite verwendet werden kann.

<!-- Better for non-critical theme JS -->
<script src="&lbrace;&lbrace; 'theme.js' | asset_url &rbrace;&rbrace;" defer></script>

<!-- Avoid async for scripts that depend on execution order -->
<script src="&lbrace;&lbrace; 'product-form.js' | asset_url &rbrace;&rbrace;" defer></script>

3. Laden Sie optionale Widgets nach Benutzerabsicht

Chat, Umfragen, Heatmaps und einige Personalisierungs-Widgets können oft bis nach der ersten Ansicht, dem Scrollen, der Leerlaufzeit oder einem bestimmten Klick warten. Dadurch wird die Warteschlange für den Haupt-Thread beim ersten Laden reduziert, während das Tool für Käufer verfügbar bleibt, die es benötigen.

function loadChatWidget() {
  if (window.__chatLoaded) return;
  window.__chatLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://example-chat-cdn.com/widget.js';
  script.async = true;
  document.head.appendChild(script);
}

window.addEventListener('scroll', loadChatWidget, { once: true, passive: true });
window.addEventListener('pointerdown', loadChatWidget, { once: true });

Dieses Muster ist für Support-Widgets nützlich, aber nicht für Code, der die Zustimmung oder Umsatzzuordnung aufzeichnen muss, bevor Ereignisse ausgelöst werden. Vergleichen Sie dies für App-lastige Stores mit Behebung von App-Skripten, die Shopify verlangsamen.

4. Stoppen Sie die Initialisierung aller Komponenten auf jeder Seite

Viele Shopify-Themes enthalten eine große JavaScript-Datei, die Schieberegler, Produktmedien, Warenkorbschubladen, Sammlungsfilter, Akkordeons, Modalitäten und die prädiktive Suche überall initialisiert. Schützen Sie diese Initialisierer, damit die Seiten nur das ausführen, was sie benötigen.

if (document.querySelector('[data-product-form]')) {
  import('./product-form.js').then(({ initProductForm }) => initProductForm());
}

if (document.querySelector('[data-collection-filters]')) {
  import('./collection-filters.js').then(({ initFilters }) => initFilters());
}

Dynamische Importe erfordern eine Build-Pipeline, daher sind sie in benutzerdefinierten Themes einfacher als die einfache Bearbeitung von Shopify-Themes. Wenn Ihr Theme die Bündelung nicht unterstützt, teilen Sie die Skripte nach Vorlage auf und fügen Sie nur das ein, was jede Vorlage benötigt.

5. Verwenden Sie passive Zuhörer für Scroll- und Touch-Arbeiten

Scroll- und Touch-Handler können den Browser blockieren, wenn der Browser warten muss, um zu erfahren, ob das Ereignis aufgerufen wird präventDefault(). Verwenden Sie passive Listener, wenn der Handler nur die Interaktion beobachtet.

window.addEventListener('scroll', updateStickyHeader, { passive: true });
window.addEventListener('touchstart', trackTouchIntent, { passive: true });

Siehe die Leitfaden für passive Event-Listener , wenn PageSpeed auch Probleme mit dem Ereignis-Listener meldet.

Manueller Fix vs. Thunder Fix

Was man nicht kaputt machen sollte

Die riskanteste Geschwindigkeitsarbeit ist die Skriptverzögerung, die versehentlich das Kaufverhalten stört. Testvariantenänderungen, Hinzufügen zum Warenkorb, Aktualisierungen der Warenkorbschublade, Rabattcode-Eingabe, Abonnementauswahl, dynamische Checkout-Schaltflächen, Produktempfehlungen, Rezensionen, Einwilligung, Analysen und Werbepixel. Eine schnellere Seite, die das Conversion-Tracking oder das Add-to-Cart-Verhalten verliert, ist eine fehlgeschlagene Optimierung.

Vermeiden Sie außerdem das Stapeln mehrerer Speed-Apps. Wenn mehrere Apps versuchen, dasselbe Skript zu verzögern, kann dies zu schwer zu behebenden Zeitfehlern führen. Wenn Sie einen umfassenden Plan benötigen, verwenden Sie den vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung und vergleichen Sie die Optionen im Bester Leitfaden für Shopify-Speed-Apps.

So bestätigen Sie, dass der Fix funktioniert hat

Führen Sie PageSpeed Insights aus oder a Shopify-Geschwindigkeitstest auf denselben URLs, mobil zuerst. Achten Sie auf eine kürzere JavaScript-Ausführungszeit, weniger lange Aufgaben, eine geringere Gesamtblockierungszeit und bessere INP-Trends, sobald die Felddaten aktualisiert werden. Googles Core Web Vitals-Anleitung recommends evaluating page experience at the 75th percentile, so do not judge long-term success from one lab run.

Wenn JavaScript nur ein Teil der Verlangsamung ist, machen Sie weiter renderblockierende Ressourcen, große Netzwerknutzlasten, und LCP-Optimierung. Most real Shopify speed wins come from fixing the stack, not one isolated warning.

FAQ