Minimieren Sie die Main-Thread-Arbeit auf Shopify: Behebung der PageSpeed-Warnung (2026)

Schnelle Lösung mit Thunder

Was der Hauptthread tatsächlich tut

Der Hauptthread des Browsers ist die einzelne Spur, in der die meisten sichtbaren Seitenarbeiten stattfinden. Es analysiert HTML, analysiert CSS, berechnet, welche Stile angewendet werden, berechnet das Layout, malt Pixel, verarbeitet Eingaben und führt JavaScript aus. Wenn JavaScript ausgeführt wird, kann der Browser nicht gleichzeitig auf einen Tipp reagieren, das Layout aktualisieren oder einen neuen Frame zeichnen.

Lighthouse unterteilt dies in Kategorien wie Skriptauswertung, Skriptparsing und -kompilierung, Stil und Layout, Rendering, Parse von HTML und CSS sowie Garbage Collection. Shopify-Händler sehen häufig, dass die Skriptauswertung den Bericht dominiert, da App-Skripte auf jeder Seite ausgeführt werden, selbst wenn der Kunde das Widget nie öffnet.

Aus diesem Grund ist die Warnung über den Laborwert hinaus wichtig. Hohe Haupt-Thread-Arbeit erhöht die Gesamtblockierungszeit, und die Gesamtblockierungszeit ist ein starkes Laborsignal für echte Interaktionsschmerzen. Der INP-Schwellenwert von Google für ein gutes Erlebnis liegt unter 200 ms; Wenn der Hauptthread beschäftigt ist, wartet der Klick.

Warum Shopify Stores diese Warnung auslösen

Schritt 1: Finden Sie die langen Aufgaben

Öffnen Sie Chrome DevTools, gehen Sie zu Leistung, zeichnen Sie einen Seitenladevorgang auf und suchen Sie nach langen gelben Aufgaben. Jede Aufgabe über 50 ms blockiert den Hauptthread lange genug, um zur Gesamtblockierungszeit zu zählen.

// Quick field debugging in the browser console
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Long task:', Math.round(entry.duration), 'ms');
  }
}).observe({ type: 'longtask', buffered: true });

If the worst tasks come from third-party domains, use our Leitfaden für Skripte von Drittanbietern. If they come from your own theme bundle, continue below.

Schritt 2: Unkritische Theme-Skripte zurückstellen

Skripte im Kopf ohne Verzögerung blockieren das Parsen und konkurrieren frühzeitig um den Hauptthread. Für Designskripte, die nicht ausgeführt werden müssen, bevor Inhalte angezeigt werden, verwenden Sie defer:

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

Seien Sie vorsichtig mit Abhängigkeiten. Wenn eine Variantenauswahl von einer davor geladenen globalen Bibliothek abhängt, behalten Sie die Reihenfolge bei. Fügen Sie nicht blind alles Async hinzu. Async kann Dateien in der falschen Reihenfolge ausführen. Thunder übernimmt die abhängigkeitsbewusste Verzögerung für App-Skripte, was normalerweise der größte Gewinn ist.

Schritt 3: Widgets nur bei Bedarf laden

Chat, Bewertungskarussells, Empfehlungsblöcke und Videoeinbettungen müssen beim Laden der Seite oft nicht initialisiert werden. Laden Sie sie, wenn sie sichtbar sind oder nach einer Interaktion.

const widget = document.querySelector('[data-reviews-widget]');

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

  import('./reviews-widget.js').then((module) => {
    module.init(widget);
  });

  observer.disconnect();
}, { rootMargin: '300px' });

if (widget) observer.observe(widget);

Dieses Muster hält ungenutztes JavaScript vom kritischen Pfad fern. Für Bilder und Einbettungen kombinieren Sie es mit unserem Shopify Lazy Loading-Anleitung.

Schritt 4: Lange JavaScript-Aufgaben aufteilen

Wenn Ihr Theme Hunderte von DOM-Knoten durchläuft, Preise neu berechnet, Filter aktualisiert oder Suchergebnisse in einem großen Block darstellt, geben Sie zwischen den Blöcken an den Browser zurück.

async function renderProducts(products) {
  for (let i = 0; i < products.length; i += 12) {
    renderProductBatch(products.slice(i, i + 12));

    if ('scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    } else {
      await new Promise((resolve) => setTimeout(resolve, 0));
    }
  }
}

This does not reduce total work, but it prevents one long task from blocking input. That helps INP, especially on mobile where CPU throttling makes every millisecond of script work more expensive. For deeper JavaScript cleanup, use our Shopify JavaScript-Optimierungsleitfaden.

Schritt 5: Vermeiden Sie Layout-Thrashing

Layout-Thrashing tritt auf, wenn Code wiederholt Layoutwerte liest und DOM-Änderungen in derselben Schleife schreibt. Jeder Lesevorgang kann den Browser dazu zwingen, das Layout synchron neu zu berechnen.

// Bad: read and write in the same loop
cards.forEach((card) => {
  const height = card.offsetHeight;
  card.style.minHeight = height + 20 + 'px';
});

// Better: batch reads, then batch writes
const heights = cards.map((card) => card.offsetHeight);
cards.forEach((card, index) => {
  card.style.minHeight = heights[index] + 20 + 'px';
});

Dies ist wichtig für Sammlungsseiten, Quick-Add-Schubladen, Sticky-Header und Produktmediengalerien. Wenn PageSpeed ​​sowohl Arbeit am Haupt-Thread als auch hohe Stil-/Layout-Kosten anzeigt, überprüfen Sie zuerst diese interaktiven Komponenten.

Manueller Fix vs. Thunder Fix

Testen Sie die richtigen Metriken erneut

Testen Sie nach Änderungen zunächst das Mobilgerät erneut. Sehen Sie sich die Gesamtblockierungszeit in Lighthouse, INP in Felddaten und die Aufschlüsselung der Haupt-Thread-Kategorien an. Streben Sie nicht in einem synthetischen Lauf nach dem perfekten Ergebnis; Vergleichen Sie mehrere Läufe und nutzen Sie das Web-Performance-Dashboard von Shopify für echte Benutzertrends.

Wenn Ihr LCP ebenfalls hoch ist, könnte der nächste Engpass Ihr Heldenbild sein. Nutzen Sie unsere Anleitung zum Vorladen von Shopify Hero-Bildern und die breitere Leitfaden zur Shopify-Geschwindigkeitsoptimierung. Wenn PageSpeed auch meldet hohe Shopify-Gesamtblockierungszeit, kritische Anforderungsketten, oder enorme Netzwerknutzlasten, beheben Sie diese Diagnosen im selben Prüfdurchlauf. Informationen zu Preisen und Automatisierungsoptionen finden Sie unter Thunder-Preise.

Referenzen und Validierung

Verwendung Arbeitsaufschlüsselung im Hauptthread von Lighthouse als Quelle der Wahrheit für die diagnostischen Maßnahmen. Es trennt Skriptauswertung, Parsing, Stil und Layout, Rendering und andere Browserarbeiten, sodass Sie erkennen können, ob das Problem an Ihrem Theme-Code, Ihrem App-Stack oder der Menge an DOM liegt, die der Browser verarbeiten muss.

Überprüfen Sie die Reaktionsfähigkeit mit INP-Anleitung von web.dev. Ein Geschäft kann optisch überladen aussehen, sich aber dennoch kaputt anfühlen, wenn der Hauptthread beschäftigt ist, wenn der Kunde auf eine Variante tippt, die Warenkorbschublade öffnet oder auf „Zur Kasse gehen“ klickt. Aus diesem Grund konzentriert sich Thunder so stark auf die Verzögerung von Skripten Dritter: Es gibt dem Browser Raum zum Reagieren, bevor der Besucher die Geduld verliert.