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

You usually cannot safely minify files served from an app's CDN. Ask the vendor, disable unnecessary app embeds, or replace the app. Do not download a vendor script and serve your own copy unless the vendor explicitly supports that path, because you can break updates, consent handling, or checkout-related logic.

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. Identify local files from PageSpeed

Expand the PageSpeed minify JavaScript diagnostic. Local Shopify files often include a Shopify CDN path and an asset filename. App files usually come from separate domains or app-specific paths. Fix local theme assets first and keep vendor files out of your manual minification pass.

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. Minification is useful, but the faster store comes from controlling how much JavaScript loads and when it runs.

FAQ