Shopify Lange Haupt-Thread-Aufgaben: So unterbrechen Sie die Blockierungsarbeit

Warum lange Aufgaben für die Shopify-Geschwindigkeit wichtig sind

Der Hauptthread des Browsers kümmert sich um das Parsen, die JavaScript-Ausführung, die Stilberechnung, das Layout, das Malen und viele Benutzerinteraktionen. Wenn eine Aufgabe zu lange ausgeführt wird, kann der Browser nicht schnell auf Tippen, Klicken, Scrollen oder Rendern von Aufgaben reagieren. In den Leistungsrichtlinien von Chrome wird empfohlen, lange Aufgaben aufzuteilen, damit der Browser die Möglichkeit hat, die Seite zu aktualisieren und Eingaben zu verarbeiten.

Dies ist direkt wichtig für Shopify INP und Gesamtblockierungszeit. Leuchtturm-Labortests zeigen TBT. Felddaten in Core Web Vitals zeigen, ob echte Käufer eine schlechte Reaktionsfähigkeit feststellen.

Lange Aufgaben überschneiden sich auch mit größeren minimiert die Haupt-Thread-Arbeit Warnung und reduziert die Ausführungszeit von JavaScript. Betrachten Sie die Haupt-Thread-Arbeit als die Gesamt-CPU-Kosten und lange Aufgaben als die Blöcke, die Käufer am meisten blockieren.

Häufige Quellen für lange Aufgaben in Shopify-Themes

Auf Produktseiten werden häufig Variantenlogik, Mediengalerien, Abonnements, Rezensionen, Empfehlungen, Personalisierung, Analysen und Warenkorb-Schubladencode zusammen ausgeführt. Auf den Sammlungsseiten werden Filter, Sortierung, Suche, Produktkartenverwaltung und Nachverfolgung ausgeführt. Auf Homepages werden Schieberegler, Videoabschnitte, Seitenerstellungsblöcke, App-Einbettungen und Marketingpixel ausgeführt.

Skripte von Drittanbietern sind oft der schnellste Erfolg. Klaviyo, GTM, Meta Pixel, TikTok Pixel, Bewertungs-Widgets, Chat-Tools, Popups und Attributions-Apps können allesamt die Haupt-Thread-Arbeit hinzufügen. Nutzen Sie die Anleitungen auf JavaScript von Drittanbietern, GTM verlangsamt Shopify, und Live-Chat-Widgets für App-spezifische Korrekturen.

Handbuch Schritt für Schritt: Unterteilen Sie lange Haupt-Thread-Aufgaben auf Shopify

1. Zeichnen Sie eine mobile Leistungsverfolgung auf

Öffnen Sie Chrome DevTools, drosseln Sie die CPU, zeichnen Sie den Seitenladevorgang auf und suchen Sie nach langen gelben Skriptblöcken. Klicken Sie auf einen Block, um den Funktionsaufrufstapel anzuzeigen. Vergleichen Sie das mit der Diagnose von PageSpeed ​​und dem Web Performance Dashboard von Shopify.

2. Widgets verzögern, die für die erste Ansicht nicht benötigt werden

Chat, Umfragen, Heatmaps und einige Bewertungs-Widgets müssen selten ausgeführt werden, bevor der Held und der Produktinhalt gerendert werden. Laden Sie sie nach Benutzerabsicht oder Leerlaufzeit.

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

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

3. Initialisieren Sie JavaScript nur auf Seiten, die es benötigen

Führen Sie keine Sammlungsfilter auf Produktseiten oder Produktmediencode in Blogbeiträgen aus. Schützen Sie Initialisierer, indem Sie nach dem relevanten DOM suchen, bevor Sie ein teures Setup ausführen.

if (document.querySelector('[data-product-form]')) {
  initProductForm();
}

if (document.querySelector('[data-collection-filters]')) {
  initCollectionFilters();
}

4. Teilen Sie teure Schleifen in kleinere Teile auf

Wenn benutzerdefinierter Code viele Produktkarten, Varianten, Bewertungen oder Filteroptionen gleichzeitig verarbeitet, teilen Sie die Arbeit auf, damit der Browser zwischen den einzelnen Abschnitten atmen kann. Benutzen requestIdleCallback sofern unterstützt, mit Timeout-Fallback.

const cards = Array.from(document.querySelectorAll('[data-product-card]'));

function hydrateCards(start = 0) {
  const end = Math.min(start + 8, cards.length);
  for (let i = start; i < end; i += 1) {
    hydrateProductCard(cards[i]);
  }
  if (end < cards.length) {
    const schedule = window.requestIdleCallback || ((cb) => setTimeout(cb, 50));
    schedule(() => hydrateCards(end), { timeout: 500 });
  }
}

hydrateCards();

5. Move non-visual calculations away from first load

Empfehlungsbewertung, Personalisierung, Inventarabzeichen und Analyseanreicherung sollten nicht die erste Wiedergabe blockieren, es sei denn, Käufer benötigen das Ergebnis sofort. Rendern Sie einen stabilen Standard und verbessern Sie ihn dann, sobald die Seite verwendbar ist.

6. Schützen Sie umsatzkritische Skripte

Verzögern Sie die Variantenauswahl, Produktformulare, Aktualisierungen der Warenkorbschublade, Abonnementselektoren, Einwilligungen, Checkout-Übergaben oder Zuordnungsereignisse nicht blind. Geschwindigkeitsänderungen müssen das Kaufverhalten bewahren. Testen Sie Add-to-Cart, Variantenänderungen, Rabattflüsse, Tracking und Checkout nach jeder Skriptänderung.

Manueller Fix vs. Thunder Fix

So bestätigen Sie lange Haupt-Thread-Aufgaben verbessert

Erneuter Test mit PageSpeed Insights und dem kostenloser Shopify-Geschwindigkeitstest. Achten Sie auf niedrigere TBT, weniger lange Aufgaben in DevTools, kürzere JavaScript-Ausführungszeit und verbesserte Reaktionsfähigkeit beim Tippen auf Filter, Varianten, Akkordeons und Schaltflächen zum Hinzufügen zum Warenkorb.

Befolgen Sie für das breitere System die vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung. Wenn Sie zuerst eine Automatisierung benötigen, vergleichen Sie die Optionen im beste Shopify-Apps zur Geschwindigkeitsoptimierung Anleitung oder Prüfung Thunder-Preise.

FAQ