Shopify Übermäßige DOM-Größe: So beheben Sie die PageSpeed-Warnung (2026)

Schnelle Lösung mit Thunder

Was PageSpeed mit übermäßiger DOM-Größe bedeutet

Das DOM ist das Live-Modell Ihres HTML-Codes durch den Browser. Jeder Abschnitt, jede Produktkarte, jedes Menüelement, jedes App-Logo, jeder Popup-Wrapper und jede versteckte Vorlage wird zu einem Knoten, den der Browser mit JavaScript analysieren, formatieren, anordnen und manchmal aktualisieren muss.

Die Lighthouse-Anleitung von Google weist üblicherweise auf drei Schwellenwerte hin: mehr als Insgesamt 1.500 DOM-Knoten, eine maximale Tiefe größer als 32 verschachtelte Elementeoder ein Elternteil mit mehr als 60 untergeordnete Elemente. Shopify Community-Threads sind voll von Händlern, die sehen 3,000, 5,000, oder sogar 7,000+ Elemente und fragen, ob sie einen Shopify Experten. Die ehrliche Antwort: manchmal ja, aber Sie können zuerst eine überraschende Menge aus dem Theme-Editor entfernen.

Ein großes DOM schadet LCP nicht immer direkt, aber es macht den Browser in allen Bereichen rund um LCP langsamer: Stilberechnung, Layout, JavaScript-Abfragen, Ereignisdelegierung und Interaktionsrendering. Aus diesem Grund erscheint DOM-Bloat häufig neben minimiert die Haupt-Thread-Arbeit, JavaScript-Ausführungund INP-Warnungen.

Die Shopify-spezifischen Ursachen

Schritt 1: Messen Sie den DOM vor der Bearbeitung

Öffnen Sie die Seite und führen Sie Folgendes in der Chrome DevTools-Konsole aus:

document.querySelectorAll('*').length

Anschließend prüfen Sie die größten Abschnitte. PageSpeed ​​sagt Ihnen Gesamtzahlen, aber DevTools sagt Ihnen, wo die Aufblähung liegt. Verwenden Sie das Bedienfeld „Elemente“, reduzieren Sie Abschnitte und zählen Sie die offensichtlichen Übeltäter: Produktraster, Mega-Menüs, Seitenerstellungsblöcke und injizierte App-Roots. Kombinieren Sie dies mit unserem Shopify-Geschwindigkeitsaudit-Checkliste , damit Sie die DOM-Größe nicht korrigieren und gleichzeitig schwerwiegendere Skriptprobleme übersehen.

Schritt 2: Sammlung und Suchergebnisraster einschränken

Sammlungsseiten sind der schnellste Weg, ein großes DOM zu erstellen. Eine Produktkarte besteht selten aus einem Element. Es kann zwei Bilder, Anbieter, Titel, Preis, Vergleichspreis, Verkaufsabzeichen, Farbmuster, Schnellhinzufügen-Formular, Wunschlisten-Schaltfläche, Bewertungssterne und App-Container enthalten.

Reduzieren Sie in einer Sammlungsvorlage die anfängliche Paginierungsgröße:

{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    {% render 'card-product', product: product %}
  {% endfor %}
{% endpaginate %}

Für die meisten Geschäfte reichen 16 bis 24 Produkte pro Seite. Wenn Sie den unendlichen Bildlauf verwenden, rendern Sie nur die erste Seite und rufen Sie den Rest nach der Interaktion ab. Unser Leitfaden zur Geschwindigkeit der Sammlungsseite behandelt dies ausführlicher.

Schritt 3: Entfernen Sie doppelte Mobil- und Desktop-Markups

Viele Themes rendern zwei vollständige Versionen desselben Inhalts: einen Desktop-Block und einen mobilen Block, und verstecken dann eine mit CSS. Der Besucher sieht eine Version, der Browser analysiert jedoch weiterhin beide.

{%- comment -%}Avoid this pattern when the content is identical{%- endcomment -%}
<div class="hidden md:block">{% render 'mega-menu-desktop' %}</div>
<div class="md:hidden">{% render 'mega-menu-mobile' %}</div>

{%- comment -%}Prefer one semantic menu and change layout with CSS{%- endcomment -%}
<nav class="site-menu">
  {% render 'menu-items', menu: section.settings.menu %}
</nav>

Gehen Sie dabei vorsichtig vor. Einige mobile Menüs erfordern ein anderes Verhalten, aber duplizierte Produktkarussells, duplizierte Ankündigungsleisten und duplizierte Menübäume sind normalerweise einfache Erfolge.

Schritt 4: App-Einbettungen und verwaiste Snippets prüfen

Gehen Sie im Shopify Admin zu Online Store -> Themes -> Anpassen -> App-Einbettungen. Deaktivieren Sie alles, was nicht auf jeder Seite geladen werden muss. Durchsuchen Sie dann Ihre Designdateien nach alten App-Namen, Skriptdomänen und Snippets. Apps, die vor Monaten entfernt wurden, können Wrapper hinterlassen theme.liquid oder Produktvorlagen.

Wenn eine App noch benötigt wird, laden Sie sie nur dort, wo es darauf ankommt. Ein Bewertungs-Widget gehört auf Produktseiten, nicht auf Richtlinienseiten. Ein Bundle-Widget gehört in die Nähe von Kaufbereichen, nicht auf jede Sammelkarte. Um die Auswirkungen auf die App-Geschwindigkeit zu erfahren, vergleichen Sie Ihren Stack mit unserem Forschung zur Auswirkung auf die App-Geschwindigkeit und Apps, die Shopify-Shops verlangsamen.

Manueller Fix vs. Thunder Fix

Die praktische Prioritätsreihenfolge

1. Ausführen ein Geschwindigkeitstest und PageSpeed Insights für Ihre Vorlage mit dem höchsten Traffic.
2. Installieren Sie Thunder oder verschieben Sie unkritische Skripte manuell, wenn JavaScript auch den Hauptthread blockiert.
3. Schneiden Sie die Sammelraster auf 16–24 Produkte pro Startseite.
4. Entfernen Sie versteckte doppelte Mobil-/Desktop-Inhalte.
5. Deaktivieren Sie nicht verwendete App-Einbettungen und löschen Sie verwaiste App-Snippets.
6. Vereinfachen Sie Mega-Menüs und Seitenerstellungsabschnitte.
7. Testen Sie erneut mit derselben URL und vergleichen Sie DOM-Knoten, TBT, INP und LCP.

Wenn Sie einen umfassenderen Plan benötigen, nutzen Sie unseren Vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung. Informationen zu entsprechenden PageSpeed-Warnungen finden Sie in den Anleitungen zu Reduzieren Sie die Gesamtblockierungszeit von Shopify, behebt kritische Shopify-Anfrageketten, und Reduzieren Sie die Nutzlasten des Shopify-Netzwerks. Für praktisches Aufräumen steht Ihnen unser zur Verfügung Shopify-Geschwindigkeitsoptimierungsdienst kann Korrekturen auf Themenebene sicher verarbeiten.

Referenzen und Validierung

Vergleichen Sie für die zugrunde liegende Diagnose Ihren Bericht mit Hinweise zur DOM-Größe von Chrome Lighthouse. Die Schwellenwerte sind nicht willkürlich; Sie spiegeln den zusätzlichen Speicher-, Stilberechnungs- und Layoutaufwand wider, den der Browser verursacht, wenn eine Seite zu groß wird.

Shopify Community-Threads zur DOM-Größe folgen meist dem gleichen Muster: Händler sehen eine beängstigende PageSpeed-Zahl und entdecken dann, dass die eigentliche Ursache eine Ansammlung von Abschnitten, App-Einbettungen, duplizierten Menüs und Kollektionskarten ist. Behandeln Sie die Warnung als Bereinigungsplan, nicht als Beweis dafür, dass Shopify selbst defekt ist. Der beste Schritt ist, Markup zu reduzieren, wo es für den Kunden nichts ändert, und dann Thunder zu verwenden, um zu verhindern, dass das verbleibende App-JavaScript die Seite blockiert.