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

Ein großer DOM-Baum kann die Seitenleistung auf verschiedene Weise beeinträchtigen:

  • Netzwerkeffizienz und Leistungsbelastung

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

  • Laufzeitleistung

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

  • Arbeitsspeicherleistung

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

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

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

Vermeidet eine übermäßige DOM-Größe von Ligthhouse-Audits, die die gesamten DOM-Elemente, die maximale DOM-Tiefe und die maximale Anzahl untergeordneter Elemente anzeigen.
Lighthouse hebt Details zur übermäßigen DOM-Größe hervor

Lighthouse meldet Seiten mit DOM-Bäumen, die:

  • Es wird gewarnt, wenn das Body-Element mehr als etwa 800 Knoten hat.
  • Fehler,wenn das Body-Element mehr als etwa 1.400 Knoten hat.

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 senden, laden Sie Ihre Seite und notieren Sie sich manuell, welche Knoten angezeigt werden. Vielleicht können Sie die nicht angezeigten Knoten aus dem anfänglich geladenen Dokument entfernen und sie erst nach einer relevanten Nutzerinteraktion wie Scrollen oder Klicken auf eine Schaltfläche erstellen.

Wenn Sie DOM-Knoten zur Laufzeit erstellen, können Sie mithilfe von DOM-Änderungs-Breakpoints für untergeordnete Verzweigungen ermitteln, wann Knoten erstellt werden.

Wenn Sie einen großen DOM-Baum nicht vermeiden können, können Sie die Renderingleistung auch durch Vereinfachen Ihrer CSS-Selektoren verbessern. Weitere Informationen finden Sie im Hilfeartikel Umfang und Komplexität von Stilberechnungen reduzieren von Google.

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.

Stackspezifische Anleitung

Angular

Wenn Sie große Listen rendern, verwenden Sie virtuelles Scrollen mit dem Component Dev Kit (CDK).

React

  • Sie haben die Möglichkeit, eine Bibliothek wie react-window zur Fensterverwaltung zu nutzen, um die Anzahl an DOM-Knoten zu minimieren, die beim Rendern vieler sich wiederholender Elemente auf der Seite erstellt werden.
  • Sie können shouldComponentUpdate, PureComponent oder React.memo nutzen, um wiederholtes Rendern auf ein Mindestmaß zu reduzieren.
  • Verwenden Sie Skip effects nur, bis sich bestimmte Abhängigkeiten geändert haben, wenn Sie den Effect-Hook zur Verbesserung der Laufzeitleistung verwenden.

Ressourcen