Die Lighthouse-Warnung 'Avoid excessive-DOM size' beheben

Zuletzt überprüft von Arjen Karel im Februar 2026

Was ist die Lighthouse-Warnung 'avoid excessive-DOM size'?

Was ist die avoid excessive-DOM size Warnung in Lighthouse? Lighthouse markiert Seiten, die entweder:

• mehr als 1.500 DOM-Knoten insgesamt haben.
  Das bedeutet, dass es mehr als 1.500 HTML Elemente auf Ihrer Seite gibt.
• eine maximale Knotentiefe von mehr als 32 Knoten haben.
  Dies passiert, wenn ein Element 32 Ebenen tief verschachtelt ist.
• einen Elternknoten mit mehr als 60 Kindknoten haben.
  Dies kann passieren, wenn ein Elternelement (wie eine Tabelle oder eine Liste) mehr als 60 Kinder hat (Tabellenzeilen oder Listenelemente).

Um diese Zahlen einzuordnen: Laut dem Markup-Kapitel des 2024 Web Almanac hat die durchschnittliche Seite 594 DOM-Elemente. Beim 90. Perzentil springt es auf 1.716, was bereits den Lighthouse-Schwellenwert überschreitet. Ungefähr 10% aller Seiten im Web lösen diese Warnung aus.

Seit Lighthouse 13 (Oktober 2025) hat sich dieses Audit zum "Optimize DOM size" Insight entwickelt. Es wird jetzt basierend auf tatsächlichen Style-Neuberechnungen und Layout-Arbeit ausgelöst, die 40ms überschreiten, nicht nur auf statischen Knotenanzahlen. Die oben genannten Schwellenwerte werden weiterhin als Referenzpunkte angegeben.

Zur Erinnerung: Was ist das DOM?

DOM steht für Document Object Model. Das DOM ist eine baumstrukturierte Objektdarstellung Ihres HTML, wobei jedes HTML Element (zum Beispiel: body oder h1) durch einen eigenen Knoten repräsentiert wird.

Was verursacht eine exzessive DOM-Größe?

Eine exzessive DOM-Größe kann viele Ursachen haben. Eine exzessive DOM-Größe wird in der Regel verursacht durch:

• Schlecht programmierte Plugins in Ihrem CMS.
• DOM-Knoten, die von JavaScript erstellt werden.
• Page Builder, die aufgeblähtes HTML generieren (zum Beispiel: Elementor oder WP Bakery).
• Text, der in einen WYSIWYG-Editor (wie TinyMCE) kopiert und eingefügt wird.
• Schlechte Template-Programmierung.

Das Markup-Kapitel des 2024 Web Almanac stellte fest, dass <div> Elemente allein 28,7% aller Seitenelemente ausmachen. Diese "Divitis" ist ein wesentlicher Beitrag zu exzessiven DOM-Größen, besonders bei Page-Builder-Output.

Wie beeinflusst eine exzessive DOM-Größe die Seitengeschwindigkeit?

Ein großes DOM hat keinen direkten Einfluss auf die Lighthouse-Metriken. Es macht das Rendering einer Webseite jedoch unnötig kompliziert, wodurch es fast unmöglich wird, einen hohen Lighthouse-Score zu erreichen. Ihr Browser muss mehr Arbeit leisten, bevor die Webseite auf dem Bildschirm angezeigt werden kann. Es gibt 4 Probleme mit einem großen DOM:

• Die Größe Ihres HTML ist größer, weil Ihr Code aufgebläht ist. Dies erhöht die Zeit, die zum Herunterladen Ihrer Seite benötigt wird.
• Eine große DOM-Größe verlangsamt die Rendering-Performance. Ihr Browser muss beim ersten Laden und bei jeder Interaktion eines Benutzers oder Scripts mit Ihrer Seite mehr (DOM-)Berechnungen durchführen.
• Ihr Browser verbraucht möglicherweise viel mehr Speicher bei der Interaktion mit dem DOM über JavaScript.
• Ein großes DOM wirkt sich direkt auf Interaction to Next Paint (INP) aus. Jedes Mal wenn ein Benutzer klickt, tippt oder schreibt, muss der Browser Styles und Layout für betroffene Elemente neu berechnen. Je mehr DOM-Knoten auf der Seite sind, desto länger dauert dies. Wenn die Style-Neuberechnung mehr als 300 Elemente betrifft oder länger als 40ms dauert, wird es zu einem messbaren Problem für INP. Deshalb scheitern Seiten mit Tausenden von DOM-Knoten oft bei INP, selbst wenn ihr JavaScript schnell ist.

Die Warnung 'avoid excessive DOM size' wird höchstwahrscheinlich indirekt wichtige Core Web Vitals wie Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) beeinflussen. Der größte Einfluss besteht jedoch auf INP, das am häufigsten nicht bestandene Core Web Vital.

So beheben Sie 'avoid excessive-DOM size'

Um die Warnung 'avoid excessive-DOM size' zu beheben, müssen Sie zunächst ihre Ursachen aufspüren. Lighthouse gibt Ihnen einen Hinweis darauf, wo die maximale DOM-Tiefe und die maximalen Kindelemente zu finden sind. Von dort aus müssen Sie etwas suchen. Verwenden Sie den DOM-Inspektor in Chrome DevTools und überprüfen Sie das DOM. Versuchen Sie herauszufinden, was eine große Anzahl von DOM-Knoten erzeugt. Es gibt 5 übliche Verdächtige:

1. Schlecht programmierte Plugins in Ihrem CMS.
   Wenn ein Plugin, zum Beispiel ein Slider oder ein Kalender-Plugin, eine große Anzahl von DOM-Knoten erzeugt, könnten Sie dieses Plugin durch ein schlankeres Plugin ersetzen.
2. Von JavaScript erstellte DOM-Knoten.
   Ein JavaScript, zum Beispiel ein Chat-Widget, könnte eine große Anzahl von DOM-Knoten in das DOM einfügen. Entfernen Sie in diesem Fall die JavaScript-Datei oder finden Sie einen Ersatz mit der gleichen Funktionalität.
3. Page Builder, die aufgeblähtes HTML generieren.
   Page Builder wie Elementor oder WP Bakery erstellen oft aufgeblähten Code mit einer großen Anzahl von DOM-Knoten. Dafür gibt es keine einfache Lösung. Page Builder sind oft Teil des Workflows. Die Lösung umfasst das Bereinigen Ihres aufgeblähten Codes und die Änderung Ihres Workflows.
4. Text, der in einen WYSIWYG-Editor kopiert und eingefügt wird.
   Die meisten WYSIWYG-Editoren wie TinyMCE leisten schlechte Arbeit beim Bereinigen von eingefügtem Code, besonders wenn aus einer anderen Rich-Text-Quelle wie Microsoft Word eingefügt wird. Es wird nicht nur der Text, sondern auch die Styles kopiert. Diese Styles können in einer großen Anzahl von DOM-Knoten eingebettet sein. Die Lösung für dieses Problem ist einfach. Hören Sie auf, Inhalte in Ihren Editor einzufügen, und bereinigen Sie Seiten, die bereits eingefügten, aufgeblähten Text enthalten.
5. Schlechte (Template-)Programmierung.
   Wenn eine große DOM-Größe von Ihrem Editor erstellt wird oder durch Ihr Template verursacht wird, kann es unschön werden. Das bedeutet, dass aufgeblähter Code Teil des Kerns Ihrer Website ist. Sie müssen den Editor wechseln, Teile Ihres Templates umschreiben oder sogar von vorne beginnen.

Techniken zur Reduzierung der Auswirkung eines großen DOM

Manchmal ist es nicht möglich, die exzessive DOM-Größe zu entfernen, ohne große Teile Ihrer Site umzuschreiben und Ihren gesamten Workflow zu ändern. Es gibt mehrere Techniken, um die Auswirkung einer exzessiven DOM-Größe zu verringern:

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

• Lazy Loading von Teilen Ihrer Webseite.
  Um das initiale Rendering zu beschleunigen, könnten Sie in Betracht ziehen, Teile Ihrer Website lazy zu laden. Zum Beispiel den Footer.
• Verwenden Sie content-visibility: auto, um das Rendering von nicht sichtbaren Inhalten zu überspringen.
  Die CSS content-visibility Eigenschaft weist den Browser an, Styling, Layout und Paint für nicht sichtbare Elemente zu überspringen, bis der Benutzer in deren Nähe scrollt. Sie hat jetzt 93% Browser-Unterstützung (Chrome 85+, Firefox 125+, Safari 18+). Kombinieren Sie sie immer mit contain-intrinsic-size, um Layout Shifts zu vermeiden:
• Große Seiten in mehrere Seiten aufteilen.
  Das Aufteilen großer Seiten in mehrere Seiten kann die Anzahl der DOM-Knoten reduzieren, wenn der Inhalt selbst viele DOM-Knoten erzeugt.
• Virtuelles Scrolling implementieren.
  Für lange Listen, Datentabellen oder Bildgalerien rendert virtuelles Scrolling nur die im Viewport sichtbaren Elemente. Bibliotheken wie react-window (React) und das CDK Virtual Scrolling Modul (Angular) halten die DOM-Knotenanzahl auf die sichtbaren Elemente (typischerweise 10 bis 30 Knoten) statt Tausender.
• Speicherintensives JavaScript vermeiden.
  Wenn Sie mit einer großen Anzahl von DOM-Knoten auf Ihrer Seite arbeiten, seien Sie besonders vorsichtig mit JavaScript. document.getElementsByTagName('div'); könnte eine große Anzahl von DOM-Knoten laden, was den Speicherverbrauch erhöht.
• Komplizierte CSS-Deklarationen vermeiden.
  Wenn Sie mit einer großen Anzahl von DOM-Knoten auf Ihrer Seite arbeiten, seien Sie besonders vorsichtig mit komplizierten CSS-Deklarationen. div:last-child; muss den last-child Status für jedes div auf Ihrer Seite überprüfen. Einfachere Selektoren bedeuten weniger Traversierungsarbeit für den Browser. Dies ist besonders wichtig für INP, wo jede Millisekunde der Style-Neuberechnung zählt.

Nach der Reduzierung Ihrer DOM-Größe verfolgen Sie die Auswirkung auf echte Benutzer mit Real User Monitoring. In unseren CoreDash Daten verbessert die Reduzierung der DOM-Knotenanzahl unter 1.500 typischerweise INP um 35% auf mobilen Geräten.