Shopify Gesamtblockierungszeit: So reduzieren Sie TBT (2026)

Schnelle Lösung mit Thunder

Was misst die Gesamtblockierungszeit?

Die Gesamtblockierungszeit ist die Summe der blockierenden Anteile langer Aufgaben zwischen dem ersten Contentful Paint und der Zeit bis zur Interaktion. Eine lange Aufgabe ist jede Haupt-Thread-Aufgabe, die länger als 50 ms dauert. Wenn eine Aufgabe 120 ms dauert, beträgt der Blockierungsanteil 70 ms. Lighthouse fügt diese blockierenden Teile zusammen.

Das ist wichtig, weil der Browser nicht auf einen Tipp reagieren kann, während der Hauptthread beschäftigt ist. Eine Seite kann zwar geladen aussehen, sich aber dennoch kaputt anfühlen, wenn der Kunde auf eine Variantenauswahl, ein Menü oder eine Einkaufswagenschublade tippt, während JavaScript noch ausgeführt wird.

TBT ist keine Core Web Vitals-Metrik für echte Benutzer. Aber es hängt eng mit der Reaktionsfähigkeit zusammen. Die zu beobachtende Feldmetrik ist INP, wobei Google weniger als 200 ms für gut hält. Wenn TBT in Lighthouse schrecklich ist, ist Ihr INP-Risiko normalerweise auch höher.

Warum die Gesamtblockierungszeit von Shopify hoch wird

Schritt 1: Finden Sie die langen Aufgaben hinter TBT

Open Chrome DevTools -> Performance, record a mobile-like page load, and look for long yellow tasks. Click each task and inspect the call stack. The domain or file name often tells you whether the work comes from your theme, an app, a tag manager, or a third-party widget.

new PerformanceObserver((list) => {
  for (const task of list.getEntries()) {
    console.log('Long task:', Math.round(task.duration), 'ms');
  }
}).observe({ type: 'longtask', buffered: true });

This small observer does not replace DevTools, but it gives you a quick feel for whether long tasks are happening during load. If most long tasks come from third-party domains, start with app loading. If they come from your theme bundle, inspect custom JavaScript.

Schritt 2: Shopify-App- und Theme-Skripte zurückstellen

The fastest TBT win is usually to stop non-critical scripts from running during the first load. For theme scripts that are not needed before content appears, use defer:

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

Seien Sie vorsichtig bei der Bestellung. aufschieben behält die Ausführungsreihenfolge nach dem Parsen bei. asynchron nicht. Bearbeiten Sie bei App-Skripten nicht blind Dateien, die Ihnen nicht gehören. Verwenden Sie Thunder für eine abhängigkeitsbewusste Verzögerung und entfernen Sie dann geringwertige Apps, die immer noch viel Arbeit verursachen.

Schritt 3: Widgets nach Absicht oder Sichtbarkeit laden

Chat, Bewertungen, Empfehlungen, Videoeinbettungen und Personalisierungs-Widgets müssen selten vor dem ersten Mal initialisiert werden. Laden Sie sie, wenn der Kunde in der Nähe des Abschnitts scrollt oder mit der Funktion interagiert.

const target = document.querySelector('[data-recommendations]');

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

    import('./recommendations.js').then((module) => {
      module.init(target);
    });

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

  observer.observe(target);
}

Dieses Muster reduziert die anfängliche TBT, da das JavaScript noch vorhanden ist, aber im empfindlichsten Fenster nicht ausgeführt wird. Kombinieren Sie es mit unserem Leitfaden für Skripte von Drittanbietern und Hotjar Speed Impact Guide wenn Tracking-Tools Teil des Stacks sind.

Schritt 4: Lange Themenaufgaben in Abschnitte aufteilen

Einige Shopify-Theme-Codes funktionieren ordnungsgemäß in einem schlechten Zustand. Produktfilterung, Darstellung von Suchergebnissen, Aktualisierungen von Warenkorbempfehlungen und Einrichtung von Variantenoptionen können Hunderte von Elementen in einer Aufgabe durchlaufen. Teilen Sie die Arbeit in Abschnitte auf, damit der Browser zwischen den Stapeln reagieren kann.

async function hydrateCards(cards) {
  for (let index = 0; index < cards.length; index += 12) {
    cards.slice(index, index + 12).forEach(hydrateCard);

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

Dadurch wird die Gesamtcodegröße nicht reduziert, aber es verkürzt die Blockierungszeit, da der Browser die Möglichkeit hat, zu malen und zu antworten. Es ist besonders nützlich auf Sammlungsseiten, Suchseiten und App-lastigen Produktvorlagen.

Schritt 5: DOM und nicht verwendetes JavaScript reduzieren

Ein großes DOM macht JavaScript langsamer, da Abfragen, Ereignisdelegierung, Stilneuberechnung und Layout mehr Elemente berühren. Wenn PageSpeed TBT plus DOM-Warnungen anzeigt, lesen Sie unsere Shopify Leitfaden für übermäßige DOM-Größen und Produktraster reduzieren, Mobil-/Desktop-Markup, Mega-Menüs und Seitenerstellungs-Wrapper duplizieren.

Ungenutztes JavaScript ist der andere stille TBT-Kosten. Alte App-Snippets, ungenutzte Theme-Funktionen, veraltete Schieberegler und aufgegebener A/B-Testcode werden weiterhin analysiert und ausgeführt. Räumen Sie diese mit unserem auf unbenutzter CSS- und JavaScript-Leitfaden.

Wenn auch die Bilder riesig sind, wird TBT nicht Ihr einziger Engpass sein. Benutzen Sie die Leitfaden für enorme Netzwerknutzlasten nachdem die Arbeit am Hauptdrehbuch unter Kontrolle ist.

Manueller Fix vs. Thunder Fix

Testen Sie TBT erneut, ohne Lärm zu jagen

Die Ergebnisse des Lighthouse-Labors variieren, insbesondere bei Shopify-Mobiltests. Führen Sie mehrere Tests durch, vergleichen Sie den Median und konzentrieren Sie sich auf dieselbe Vorlage. Beobachten Sie TBT, Haupt-Thread-Arbeit, JavaScript-Ausführungszeit und INP-Felddaten gemeinsam.

Wenn sich TBT verbessert, LCP jedoch schwach bleibt, gehen Sie zu Shopify LCP-Optimierung. Wenn die TBT nach der App-Verzögerung hoch bleibt, liegt das Problem wahrscheinlich am benutzerdefinierten Theme-Code oder an einer notwendigen App, die tiefergehende Arbeit erfordert. Informationen zur Automatisierung finden Sie unter Thunders Funktionen und Preis.

Referenzen und Validierung

Verwendung Dokumentation zur Gesamtblockierungszeit von Chrome als Quelle der Wahrheit für die Berechnung der TBT. Vergleichen Sie es mit, um die Reaktionsfähigkeit eines echten Benutzers zu ermitteln INP-Anleitung von web.dev.

Beispiele aus der Shopify-Community geben in der Regel umfassende Ratschläge wie das Komprimieren von Bildern oder das Entfernen von Apps. Das kann helfen, aber bei TBT geht es speziell darum, die Arbeit im Haupt-Thread zu blockieren. Die beste Lösung ist präzise: Finden Sie lange Aufgaben, verschieben Sie unkritische Skripts, entfernen Sie minderwertiges JavaScript und teilen Sie benutzerdefinierte Arbeiten in kleinere Teile auf.