Shopify Reduziert nicht verwendetes JavaScript: Behebt Code-Aufblähung

Was PageSpeed wirklich nachlässt

Lighthouse meldet nicht verwendetes JavaScript, wenn ein Skript eine bedeutende Menge Code enthält, der beim ersten Laden der Seite nicht verwendet wird. Die Anleitung von Chrome verweist Entwickler auf DevTools Coverage für eine zeilenweise Untersuchung. Bei Shopify stellt dies häufig ein großes Themenpaket zur Verfügung, das jede Vorlage sowie App-Skripte für Bewertungen, Popups, Abonnements, Personalisierung, Chat, Analysen und Produktempfehlungen unterstützt.

Die Warnung kann leicht missverstanden werden. Ein Produktgalerie-Skript kann auf einer Sammlungsseite nicht verwendet werden, ist aber auf einer Produktseite erforderlich. Ein Popup-Skript kann in den ersten paar Sekunden ungenutzt bleiben, wird aber nach einer Verzögerung benötigt. Ein Tracking-Skript hat möglicherweise keinen Einfluss auf das Layout, verbraucht aber dennoch Netzwerk- und Haupt-Thread-Zeit. Die Lösung ist kein blindes Löschen. Der Fix führt dazu, dass früher weniger Code geladen wird.

Nicht verwendetes JavaScript stellt eine direkte Verbindung her Shopify INP-Optimierung, JavaScript-Ausführungszeit, lange Haupt-Thread-Aufgaben, und Gesamtblockierungszeit. Selbst wenn die Bytes zwischengespeichert werden, kann es sein, dass der Browser Code analysiert, kompiliert und ausführt, bevor der Käufer auf eine Schaltfläche tippen kann.

Häufige Shopify-Quellen für nicht verwendetes JavaScript

Ein Themenpaket für jede Vorlage

Viele Themes liefern ein einziges theme.js -Datei, die Karussells, Akkordeons, Produktmedien, prädiktive Suche, Lokalisierung, Einkaufswagen-Schubladen, Sticky-Header und Animationen enthält. Das ist praktisch für die Entwicklung, aber teuer beim ersten Laden, wenn nur eine kleine Teilmenge benötigt wird.

Nach der Deinstallation verbleibende App-Snippets

Apps können nach der Deinstallation Snippets, Skript-Tags, Theme-App-Erweiterungsblöcke, Metafelder und globalen Code hinterlassen. Wenn das JavaScript einer entfernten App immer noch in DevTools angezeigt wird, behandeln Sie dies nach dem Test als Bereinigung mit geringem Risiko. Dies überschneidet sich mit Bereinigung nicht verwendeter CSS- und JavaScript-Dateien.

Pixel und Tags wurden zu früh geladen

GTM, Meta Pixel, TikTok Pixel, Pinterest Tag und Attributionstools können beim ersten Laden ungenutztes JavaScript hinzufügen. Behalten Sie die geschäftskritische Nachverfolgung bei, aber laden Sie nicht jedes Experiment, jedes Legacy-Tag und jedes doppelte Pixel auf jeder Seite.

Handbuch Schritt für Schritt: Reduzieren Sie nicht verwendetes JavaScript auf Shopify

1. Messen Sie anhand der Vorlage, nicht nur der Homepage

Testen Sie Startseite, Produktseite, Kollektionsseite, Warenkorb und stark frequentierte Zielseiten separat. Ein Skript, das auf der Homepage nicht verwendet wird, kann auf Produktseiten unerlässlich sein. Verwenden Sie Chrome DevTools Coverage und das kostenloser Shopify-Geschwindigkeitstest zum Vergleichen von Vorlagen.

2. Inventory-Themenskripte

Suchen Sie in einem duplizierten Design nach Layout- und Abschnittsdateien für JavaScript. Suchen Sie nach globalen Dateien, die nur bei Bedarf bedingt geladen werden können.

<!-- Before: loads product media code everywhere -->
{{ 'product-media.js' | asset_url | script_tag }}

<!-- Better: load only on product templates -->
{% if template.name == 'product' %}
  {{ 'product-media.js' | asset_url | script_tag }}
{% endif %}

3. Code zurückstellen, der für das erste Rendern nicht benötigt wird

JavaScript, das Bewertungen, Empfehlungen, Chat, Videosteuerung, Newsletter-Popups oder „Below-the-Fold“-Abschnitte unterstützt, muss den ersten Bildschirm oft nicht blockieren. Benutzen aufschieben für lokale Skripte, die nicht ausgeführt werden müssen, bevor die HTML-Analyse abgeschlossen ist.

<script src="{{ 'theme.js' | asset_url }}" defer></script>

4. Lazy-Initialisierung von Below-the-Fold-Funktionen

Mancher Code muss irgendwann geladen werden, aber nicht sofort. Initialisieren Sie Schieberegler, Videos, Empfehlungs-Widgets oder Vergleichstabellen, wenn sich ihr Abschnitt dem Ansichtsfenster nähert.

const sections = document.querySelectorAll('[data-lazy-module]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(async (entry) => {
    if (!entry.isIntersecting) return;

    const section = entry.target;
    const moduleName = section.dataset.lazyModule;
    const module = await import('/assets/' + moduleName + '.js');
    module.init(section);
    observer.unobserve(section);
  });
}, { rootMargin: '300px' });

sections.forEach((section) => observer.observe(section));

5. App-Reste sorgfältig entfernen

Überprüfen Sie die Theme-Layoutdateien auf alte Includes und überprüfen Sie dann die Shopify-App-Einbettungen. Deaktivieren Sie jeweils einen Verdächtigen für ein dupliziertes Theme und testen Sie Add-to-Cart, Variantenauswahl, Warenkorbschublade, Tracking und Checkout-Übergabe. Informationen zu App-lastigen Stores finden Sie im Leitfaden zur Shopify-App-Geschwindigkeitsoptimierung vor dem Schneiden des Codes.

6. Testen Sie Benutzeraktionen erneut, nicht nur Punkte

Testen Sie nach jeder Bereinigung den Kernkaufpfad auf Mobilgeräten. Tippen Sie auf Variantenauswahl, Größentabellen, Akkordeons, Schnelleingabe, Warenkorbschublade, Rabattboxen, Abholoptionen und Checkout-Schaltflächen. Ein sauberer PageSpeed-Bericht ist kein Gewinn, wenn er das Umsatzverhalten beeinträchtigt.

Manueller Fix vs. Thunder Fix

Was nach nicht verwendetem JavaScript behoben werden muss

Wenn die JavaScript-Bereinigung hilft, die Seite jedoch weiterhin PageSpeed nicht erreicht, fahren Sie mit fort Haupt-Thread-Arbeit, Fremdfassaden, JavaScript-Korrekturen von Drittanbieternund die Vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung. JavaScript ist normalerweise eine Ebene in einem größeren Stapel, der Bilder, CSS, Schriftarten, Layoutstabilität und App-Governance umfasst.

Für Geschäfte, die sich eine Woche manueller Themenchirurgie nicht leisten können, bietet Thunder einen schnelleren Weg zu einer saubereren Grundlinie. Rezension Thunder-Preise, installieren Sie es im Store und behalten Sie die manuelle Entfernung des Codes für die alten Snippets und die vorlagenspezifische Logik bei, die eine App nicht erraten sollte.

FAQ