Übermäßige DOM-Größe vermeiden

Ein großer DOM-Baum kann die Leistung Ihrer Seite auf verschiedene Weise verlangsamen:

  • Netzwerkeffizienz und Lastleistung

    Ein großer DOM-Baum enthält oft viele Knoten, die beim ersten Laden der Seite durch den Nutzer nicht sichtbar sind. Das erhöht unnötig die Datenkosten für Ihre Nutzer und verlangsamt die Ladezeit.

  • Laufzeitleistung

    Wenn Nutzer und Skripts mit Ihrer Seite interagieren, muss der Browser ständig die Position und das Styling von Knoten neu berechnen. Ein großer DOM-Baum in Kombination mit komplizierten Stilregeln kann das Rendern und die Interaktivität erheblich verlangsamen.

  • Arbeitsspeicherleistung

    Wenn in Ihrem JavaScript allgemeine Abfrage-Selektoren wie document.querySelectorAll('li') verwendet werden, speichern Sie möglicherweise unwissentlich Verweise auf eine sehr große Anzahl von Knoten, was die Speicherkapazitäten der Geräte Ihrer Nutzer überfordern kann.

So schlägt die Lighthouse-Prüfung der DOM-Größe fehl

Lighthouse gibt die Gesamtzahl der DOM-Elemente für eine Seite, die maximale DOM-Tiefe der Seite und die maximale Anzahl der untergeordneten Elemente an:

Eine übermäßige DOM-Größe wird vermieden. Der Lighthouse-Audit zeigt die Gesamtzahl der DOM-Elemente, die maximale DOM-Tiefe und die maximale Anzahl an untergeordneten Elementen.
Lighthouse-Details zur übermäßigen DOM-Größe

Lighthouse kennzeichnet Seiten mit DOM-Strukturen, die:

  • Warnt, wenn das body-Element mehr als etwa 800 Knoten enthält.
  • Fehler,wenn das Body-Element mehr als etwa 1.400 Knoten enthält.

DOM-Größe optimieren

DOM-Knoten sollten nach Möglichkeit nur bei Bedarf erstellt werden – und wieder gelöscht werden, wenn sie nicht mehr benötigt werden.

Wenn Sie einen großen DOM-Baum übertragen, laden Sie Ihre Seite und notieren Sie manuell, welche Knoten angezeigt werden. Vielleicht können Sie die nicht angezeigten Knoten aus dem ursprünglich geladenen Dokument entfernen und erst nach einer relevanten Nutzerinteraktion wie einem Scrollen oder einem Klick auf eine Schaltfläche erstellen.

Wenn Sie DOM-Knoten zur Laufzeit erstellen, können Sie mit DOM-Haltepunkten für die Änderung von Unterbäumen herausfinden, wann Knoten erstellt werden.

Wenn Sie einen großen DOM-Baum nicht vermeiden können, können Sie die Rendering-Leistung verbessern, indem Sie Ihre CSS-Selektoren vereinfachen. Weitere Informationen finden Sie im Google-Artikel Umfang und Komplexität von Stilberechnungen reduzieren.

Weitere Informationen finden Sie im Artikel Wie sich große DOM-Größen auf die Interaktivität auswirken und was Sie dagegen tun können.

Stack-spezifische Anleitung

Angular

Wenn Sie umfangreiche Listen rendern, verwenden Sie virtuelles Scrolling mit dem Component Dev Kit (CDK).

React

Ressourcen