Arbeitsaufschlüsselung im Shopify-Hauptthread: Lesen Sie die PageSpeed-Diagnose

Was die Haupt-Thread-Arbeitsaufschlüsselung bedeutet

Der Hauptthread des Browsers koordiniert HTML-Parsing, CSS-Parsing, JavaScript-Ausführung, Stilberechnung, Layout, Farbe und die meisten Interaktionsabwicklungen. Wenn PageSpeed ​​eine hohe Haupt-Thread-Gesamtzahl meldet, bedeutet das, dass die Seite den Browser während des Ladevorgangs auffordert, zu viel CPU-Arbeit zu leisten. Dies kann das erste Rendern verzögern, Klicks blockieren und dazu führen, dass sich Produktseiten auf Mobilgeräten klebrig anfühlen.

Die Lighthouse-Dokumentation von Chrome gruppiert die Haupt-Thread-Arbeit in Kategorien: Skriptbewertung, Stil und Layout, Rendering, Parsen von HTML und CSS, Skriptparsen und -kompilierung sowie Garbage Collection. Auf Shopify passen diese Kategorien gut zu echten Shop-Problemen: App-Skripte, übergroße Theme-Bundles, komplexes CSS, riesige DOM-Bäume, animierte Abschnitte, Page-Builder-Markup, Sammlungsfilter und Personalisierungs-Widgets.

Diese Diagnose bezieht sich auf minimiert die Haupt-Thread-Arbeit, lange Haupt-Thread-Aufgaben, und Gesamtblockierungszeit. Eine Seite kann eine hohe Gesamtzahl ohne eine große Aufgabe haben, oder eine bescheidene Gesamtzahl mit einer hässlichen Aufgabe, die INP beeinträchtigt. Lesen Sie beide Ansichten.

So lesen Sie die einzelnen Shopify-Hauptthread-Kategorien

Skriptauswertung

Die Skriptauswertung ist die Zeit, die für die Ausführung von JavaScript aufgewendet wird. Dies ist oft die größte Shopify-Kategorie, da die Storefront Theme-Code, App-Einbettungen, Rezensionen, Warenkorb-Schubladen, Personalisierung, Analysen, Pixel, Chat, Filter und Seitenerstellungs-Widgets lädt. Wenn diese Kategorie dominiert, prüfen Sie zuerst die Apps und dann die Themenpakete.

Zu den gängigen Korrekturen gehören das Zurückstellen unkritischer Skripte, das Entfernen nicht verwendeter App-Codes, das Initialisieren von Code nur für Vorlagen, die ihn benötigen, und das Ersetzen umfangreicher Einbettungen durch Fremdfassaden.

Stil und Layout

Stil und Layout sind die Zeit, die der Browser mit der Berechnung von CSS und Seitengeometrie verbringt. Shopify-Sammelseiten mit vielen Produktkarten, Filtern, Abzeichen, Farbfeldern und Klebeelementen können hier viel Geld ausgeben. Dies gilt auch für Themes mit tief verschachteltem Page-Builder-Markup.

Beheben Sie dieses Problem, indem Sie die DOM-Komplexität reduzieren, Selektoren vereinfachen, Layout-Thrashing vermeiden und stabile Abmessungen für Bilder, Medien und eingefügte App-Slots festlegen. Wenn PageSpeed auch die DOM-Größe kennzeichnet, verwenden Sie die Shopify-Leitfaden für übermäßige DOM-Größen.

Rendering

Das Rendering umfasst Mal- und Compositing-Arbeiten. Große Schatten, Filter, Hintergrundvideos, animierte Abschnitte und große Bildüberlagerungen können das Rendern teuer machen. Verwenden Sie Transformationen und Deckkraft für Animationen, halten Sie die Farbbereiche kleiner und vermeiden Sie das Layout ändernde Animationseigenschaften.

HTML und CSS analysieren

Die Analysekosten steigen, wenn die Seite zu viel HTML oder CSS enthält. Shopify-Themes sammeln häufig ungenutzte Abschnitte, Seitenerstellungs-Wrapper, App-CSS und duplizierte Stildateien an. Bereinigen Sie nicht verwendetes CSS sorgfältig, konzentrieren Sie sich auf kritisches CSS und entfernen Sie App-Reste nach der Deinstallation von Tools.

Skriptanalyse und -kompilierung

Bevor JavaScript ausgeführt wird, muss der Browser es analysieren und kompilieren. Große Bundles schaden selbst dann, wenn nur ein Teil des Codes ausgeführt wird. Aus diesem Grund ist es wichtig, nicht verwendeten Code zu entfernen und vorlagenspezifischen Code aufzuteilen. Die Leitfaden zur Reduzierung der JavaScript-Ausführungszeit deckt die nächste Schicht ab.

Müllabfuhr

Die Speicherbereinigung wird angezeigt, wenn Skripte Speicher zuweisen und bereinigen. Schwere Karussells, Filter, Personalisierungs-Widgets und wiederholte DOM-Neuerstellungen können dies auslösen. Wenn diese Kategorie hoch ist, suchen Sie nach Code, der wiederholt Arrays erstellt, Produktkarten neu erstellt oder Widgets beim Scrollen und Ändern der Größe neu rendert.

Handbuch Schritt für Schritt: Reduzieren Sie die Haupt-Thread-Arbeit auf Shopify

1. Testen Sie die richtigen Vorlagen

Test-Homepage, Top-Produktseite, Top-Sammlungsseite und ein Blog oder eine Landingpage. Eine Homepage kann viele Videos enthalten, während eine Sammlungsseite viele Filter enthält. Mitteln Sie das Problem nicht weg. Kombinieren Sie Labortests mit dem Web Performance Dashboard von Shopify und dem Shopify-Leitfaden zur Leistungsüberwachung.

2. Beginnen Sie mit der größten Kategorie

Wenn die Skriptauswertung 2.800 ms und das Layout 400 ms beträgt, verbringen Sie nicht den Tag damit, CSS zu minimieren. Wenn Stil und Layout dominieren, verschieben Sie nicht nur die Pixel. Die Diagnose ist nützlich, weil sie Ihnen sagt, wohin die nächste Stunde gehen soll.

3. Unkritische Skripte sicher verzögern

Move optional scripts away from the first render. Keep product forms, variant selection, cart behavior, consent, and checkout handoff safe.

function loadAfterFirstInteraction(src) {
  const load = () => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.head.appendChild(script);
  };

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

loadAfterFirstInteraction('https://example.com/reviews-widget.js');

4. Theme-Code nur dort initialisieren, wo er benötigt wird

Viele Themes laden ein globales Bundle, das jede Funktion in jeder Vorlage initialisiert. Schützen Sie teuren Code hinter DOM-Prüfungen, damit Produktmediencode nicht in Blog-Posts und Sammlungsfilter nicht auf Produktseiten ausgeführt wird.

if (document.querySelector('[data-product-gallery]')) {
  initProductGallery();
}

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

if (document.querySelector('[data-cart-drawer]')) {
  initCartDrawer();
}

5. Batch-Layout liest und schreibt

Layout-Thrashing tritt auf, wenn Code wiederholt das Layout liest und Stile in derselben Schleife schreibt. Lesen Sie zuerst die Messungen und schreiben Sie dann die Änderungen in einen separaten Frame.

const cards = Array.from(document.querySelectorAll('[data-product-card]'));
const heights = cards.map((card) => card.offsetHeight);
const maxHeight = Math.max(...heights);

requestAnimationFrame(() => {
  cards.forEach((card) => {
    card.style.minHeight = maxHeight + 'px';
  });
});

6. Teilen Sie große benutzerdefinierte Aufgaben auf

Wenn der Code Hunderte von Produktkarten, Farbfeldern oder Filtern gleichzeitig verarbeitet, teilen Sie die Arbeit auf. Dies hilft dem Browser, zwischen Stapeln zu reagieren und schützt INP.

const items = Array.from(document.querySelectorAll('[data-filter-option]'));

function hydrateBatch(start = 0) {
  const batch = items.slice(start, start + 20);
  batch.forEach(hydrateFilterOption);

  if (start + 20 < items.length) {
    setTimeout(() => hydrateBatch(start + 20), 0);
  }
}

hydrateBatch();

Manueller Fix vs. Thunder Fix

So bestätigen Sie die Aufschlüsselung verbessert

Testen Sie dieselbe Seite, denselben Gerätemodus und dieselben Netzwerkbedingungen erneut. Die Gesamtzahl der Hauptthreads sollte sinken, die größte Kategorie sollte kleiner werden und die zugehörigen Kennzahlen sollten sich verbessern. Achten Sie bei Labortests auf die Gesamtblockierzeit und lange Aufgaben. Beobachten Sie für die Feldleistung INP, LCP und das Konvertierungsverhalten.

Beachten Sie gute Schwellenwerte: LCP sollte 2,5 Sekunden oder schneller sein, INP sollte 200 ms oder schneller sein und CLS sollte bei mindestens 75 % der Besuche 0,1 oder niedriger sein. Wenn Ihr Ausfall nach der App- und Skriptbereinigung immer noch hoch ist, fahren Sie mit fort vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung, vergleichen Sie die Automatisierung im beste Shopify-Apps zur Geschwindigkeitsoptimierungoder Rezension professionelle Geschwindigkeitsoptimierung für die Bereinigung von benutzerdefiniertem Code.

FAQ