DOM zu groß in WordPress: so lösen Sie es

Die Warnung “Übermäßige DOM-Größe vermeiden” aus Google Lighthouse ist eine Kennzahl, auf die Sie achten sollten. Wir sehen uns das Document Object Model (DOM) genau an und stellen Ihnen in diesem Beitrag das DOM-Werkzeug vor, mit dem unsere SEO-Fachleute bei Türk SEM arbeiten. Ein großes DOM zieht Probleme bei der Leistung und bei der Pflege nach sich, und noch einiges mehr.

In diesem Beitrag im Blog von Türk SEM zeigen wir Ihnen, wie Sie die Warnung ‘Übermäßige DOM-Größe vermeiden‘ aus Google Lighthouse abstellen. Zuerst hilft es aber zu verstehen, was sie überhaupt bedeutet.

Werkzeug zum Prüfen des DOM

Das DOM-Werkzeug, mit dem die SEO-Fachleute von Türk SEM arbeiten, steht ab sofort allen offen. Es führt 5 grundlegende Prüfungen des DOM durch und erklärt Ihnen Punkt für Punkt, wo Sie nacharbeiten sollten. Sie sehen alle Stellen, an denen sich am DOM etwas tun lässt.

Wenn Sie länger mit dem Werkzeug arbeiten wollen, nutzen Sie dafür die Seite Werkzeug für alle DOM-Fehler.

Was heißt “Übermäßige DOM-Größe vermeiden”?

Das DOM ist im Kern so etwas wie eine Datenbank oder eine Ausgabe der verschiedenen Elemente Ihrer Website. Dazu gehören Ihre Überschriften, Absätze, Bilder, Links und mehr. Ein anschauliches Beispiel dafür liefert der Code, den ein Seitenbaukasten für WordPress wie Elementor ausgibt.

In der Regel öffnet und schließt jedes Widget von Elementor Code, sodass daraus ein Element im gesamten ‘DOM-Baum’ wird. Sie sehen das in den DevTools oder im Element-Inspektor Ihres Browsers:

Wenn Sie in PageSpeed eine Warnung zum DOM bekommen, sieht sie so aus.

Die Botschaft ist eigentlich klar: ‘Übermäßige DOM-Größe vermeiden.’ Lighthouse meldet diese Warnung in drei Bereichen:

• Die Gesamtzahl der Elemente auf der Seite. Wenn Ihr DOM-Baum mehr als 800 Elemente hat, sehen Sie in Lighthouse eine Warnung.
• Der Wert für den Codeabschnitt mit den am tiefsten verschachtelten Elementen. Liegt er über dem Höchstwert, warnt Lighthouse vor zu großer DOM-Tiefe.
• Lighthouse weist außerdem auf einen Elternknoten hin, der mehr als 60 ‘Kind’-Knoten hat. Gemeint ist dabei jeder Knoten im DOM-Baum, nicht nur HTML-Elemente.

Ich sollte allerdings dazusagen: Weil diese Kennzahl in Google Lighthouse unter ‘Diagnose’ läuft, wirkt sie sich nicht unmittelbar auf Ihren Wert für die Leistung aus. Auf Teile der Core Web Vitals wirken die DOM-Werte aber sehr wohl. Interaction to Next Paint (INP) hängt von allen Core Web Vitals am unmittelbarsten mit Ihrer DOM-Größe zusammen.

So stellen Sie die Warnung ab

1. Wählen Sie Themes und Plugins mit sauberem Code
2. Optimole hilft dabei, Bilder in Form zu bringen und Lazy Loading einzurichten
3. Bauen Sie Seitenzahlen oder unendliches Scrollen ein und teilen Sie die Last auf
4. Denken Sie schlicht: Weniger Elemente auf der Website sind besser

Ehrlich gesagt hängt das Thema DOM bei WordPress meistens am Theme. Themes, die nicht schlicht und sauber programmiert sind, produzieren seitenlangen Code und damit die Fehler beim DOM. Das wirkt sich unmittelbar auf die Ladezeit aus. Bei unserer eigenen Website turksem.com hat das Theme dem DOM leider wenig Aufmerksamkeit geschenkt. Unsere DOM-Werte fallen deshalb ziemlich schlecht aus.

Ein Theme zu wechseln, ist meistens ziemlich mühsam, und uns geht es genauso. 3 Mal wollten wir unser Theme wechseln, aber nach 15 Jahren im Betrieb ist das eine große Sache. Klar ist trotzdem, was die Daten sagen: Wir müssen das Theme von turksem.com wechseln.

Auch den Wert TTFB haben wir vor Kurzem behandelt, sehen Sie sich diesen Beitrag gern an.

Ein aufgeräumtes WordPress-Theme und hilfreiche Plugins

Nach vielen Versuchen hat sich Neve Themes für uns als sehr gute Wahl erwiesen. Sehen Sie sich Neve für Ihre eigene Arbeit gern an.

Das Plugin Optimole deckt viele Grundbedürfnisse ab. Es arbeitet mit LiteSpeed und WP Rocket zusammen.

Auf unserer Seite mit den SEO-Werkzeugen von Türk SEM finden Sie außerdem das Werkzeug für den Geschwindigkeitstest mit weiteren Angaben rund um das Tempo.