Shopify Minimieren Sie JavaScript: Beheben Sie die PageSpeed-Warnung

Was die Minify JavaScript Shopify-Warnung bedeutet

In der Lighthouse-Dokumentation von Chrome wird die JavaScript-Minimierung als Entfernen von Leerzeichen und Code beschrieben, der nicht erforderlich ist, um eine kleinere, aber immer noch gültige Skriptdatei zu erstellen. PageSpeed ​​meldet die betroffenen Dateien und die geschätzten Übertragungseinsparungen. Bei Shopify weist diese Diagnose häufig auf Theme-JavaScript, alte Anbieterbibliotheken, benutzerdefinierte Snippets oder Skripte hin, die nach App-Experimenten zurückgeblieben sind.

Die Warnung ist wichtig, da JavaScript um Netzwerkbandbreite und Haupt-Thread-Zeit konkurriert. Kleinere Dateien werden schneller heruntergeladen, schneller analysiert und belasten mobile Geräte weniger. Aber verwechseln Sie die Minimierung nicht mit tiefergehender JavaScript-Leistungsarbeit. Eine kleine minimierte Datei kann immer noch die Interaktion blockieren, wenn eine lange Aufgabe ausgeführt wird, und eine große Datei kann harmlos sein, wenn sie später geladen und nur bei Bedarf ausgeführt wird.

Wenn PageSpeed auch meldet reduziert die Ausführungszeit von JavaScript, lange Haupt-Thread-Aufgaben, oder Arbeitsaufschlüsselung im Hauptthread, priorisieren Sie diese neben der Minimierung.

Häufig zu überprüfende Shopify-JavaScript-Dateien

Themenpakete

Dateien wie theme.js, global.js, produkt-form.js, predictive-search.js, und cart-drawer.js können lokale Themenressourcen sein. Dies sind die sichersten Kandidaten, wenn Sie ein doppeltes Theme haben und jeden Kaufpfad testen können.

Alte Bibliotheken

Ältere jQuery-Plugins, Karussellbibliotheken, Animationstools und kopierte Anbieterskripte sind in älteren Shops üblich. Wenn die Datei lokal und lesbar ist, minimieren Sie sie. Wenn die Funktion nicht mehr verwendet wird, entfernen Sie sie stattdessen. Die Anleitung zur Bereinigung nicht verwendeter CSS- und JavaScript-Dateien behandelt die gleiche Idee für verlassene Snippets.

App-Skripte von Drittanbietern

Sie können Dateien, die von einem CDN einer App bereitgestellt werden, normalerweise nicht sicher minifizieren. Fragen Sie den Anbieter, deaktivieren Sie unnötige App-Einbettungen oder ersetzen Sie die App. Laden Sie kein Anbieterskript herunter und stellen Sie keine eigene Kopie bereit, es sei denn, der Anbieter unterstützt diesen Pfad explizit, da Sie sonst Updates, die Einwilligungsverarbeitung oder die Checkout-bezogene Logik unterbrechen können.

Manuelle Schritt-für-Schritt-Anleitung: JavaScript auf Shopify minimieren

1. Duplizieren Sie das Live-Theme

Arbeiten Sie in einem doppelten Thema. JavaScript steuert Produktvarianten, Add-to-Cart, Aktualisierungen der Warenkorbschublade, Filter, Suche, Mengenauswahl, Abonnements und Nachverfolgung. Ein visueller Rauchtest reicht nicht aus; Sie müssen das Einkaufsverhalten testen.

2. Identifizieren Sie lokale Dateien von PageSpeed

Erweitern Sie die PageSpeed-Diagnose zur JavaScript-Minifizierung. Lokale Shopify-Dateien enthalten oft einen Shopify CDN-Pfad und einen Asset-Dateinamen. App-Dateien stammen normalerweise von separaten Domains oder app-spezifischen Pfaden. Beheben Sie zuerst lokale Theme-Assets und halten Sie Anbieterdateien von Ihrem manuellen Minifizierungsdurchlauf fern.

3. Minimieren Sie nur die bereitgestellte Datei

Behalten Sie die lesbare Quelle in Ihrem Entwicklungsworkflow und stellen Sie einen minimierten Build bereit. Ein einfaches Beispiel:

// Before
function openCartDrawer() {
  const drawer = document.querySelector('[data-cart-drawer]');

  if (!drawer) {
    return;
  }

  drawer.classList.add('is-open');
}

// After
function openCartDrawer(){const drawer=document.querySelector("[data-cart-drawer]");drawer&&drawer.classList.add("is-open")}

4. Referenzieren Sie einen minimierten Vermögenswert in Liquid

Laden Sie die minimierte Datei als separates Asset hoch und aktualisieren Sie die Theme-Referenz. Tun Sie dies zuerst in einem duplizierten Theme:

<!-- theme.liquid or a section file -->
<script src="{{ 'theme.min.js' | asset_url }}" defer></script>

Verwendung aufschieben für Skripte, die das HTML-Parsing nicht blockieren müssen. Verschieben Sie Skripte, die vor sichtbaren Inhalten oder vor der Einrichtung wichtiger Produktformulare ausgeführt werden müssen, nicht blind.

5. Vorlagenspezifischen Code schützen

Durch die Minimierung werden Bytes reduziert, aber das Überspringen unnötiger Initialisierungen reduziert die tatsächliche CPU-Arbeit. Der Produktgaleriecode sollte nicht für Artikel ausgeführt werden. Sammlungsfilter sollten nicht auf der Homepage ausgeführt werden.

if (document.body.dataset.template === 'product') {
  import('./product-gallery.js').then(({ initProductGallery }) => {
    initProductGallery();
  });
}

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

6. Testen Sie den Kaufpfad vor der Veröffentlichung

Testvariantenänderungen, Add-to-Cart, Warenkorbschublade, Checkout-Button, Rabatte, Abonnements, prädiktive Suche, Filter, Bildergalerien, Bewertungs-Widgets und Einwilligung/Verfolgung. Vergleichen Sie dann PageSpeed, Total Blocking Time, INP und die Shopify-Geschwindigkeitsbericht.

Manueller Fix vs. Thunder Fix

Was tun, wenn die Warnung weiterhin besteht?

Wenn die Warnung „JavaScript Shopify minimieren“ nach der lokalen Bereinigung weiterhin angezeigt wird, prüfen Sie, ob PageSpeed Skripte von Drittanbietern markiert. Wenn dies der Fall ist, können Sie die Datei möglicherweise nicht direkt reparieren. Konzentrieren Sie sich darauf, ob das Skript bei jeder Vorlage geladen wird, ob es verzögert werden kann und ob die App noch benötigt wird. Die JavaScript-Leitfaden eines Drittanbieters und Leitfaden für Fassaden von Drittanbietern zeigt sicherere Wege.

Für einen vollständigen Plan verwenden Sie die vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung, Benchmark mit dem kostenloser Geschwindigkeitstestund vergleichen Sie dann den Zeitaufwand für die manuelle JavaScript-Bereinigung mit Thunder-Preise. Minifizierung ist nützlich, aber der schnellere Shop entsteht durch die Kontrolle, wie viel JavaScript geladen wird und wann es ausgeführt wird.

FAQ