Fix avoid excessive-DOM size Lighthouse-Warnung

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

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

• insgesamt mehr als 1.500 DOM-Knoten haben.
  Das bedeutet, dass sich mehr als 1500 HTML-Elemente auf Ihrer Seite befinden.
• eine maximale Knoten-Tiefe von mehr als 32 Knoten haben.
  Dies passiert, wenn ein Element in mindestens 32 übergeordneten Elementen verschachtelt ist.
• einen Parent-Knoten mit mehr als 60 Child-Knoten haben.
  Dies kann passieren, wenn ein Parent-Element (wie eine Tabelle oder eine Liste) mehr als 60 Kinder (Tabellenzeilen oder Listenelemente) hat.

Die 'avoid excessive DOM size' Warnung hat keinen direkten Einfluss auf Lighthouse-Metriken. Theoretisch könnten Seiten mit einer großen DOM-Größe ziemlich schnell laden. In der Praxis tun sie das oft nicht. Eine excessive DOM size wird höchstwahrscheinlich indirekt wichtige Lighthouse-Metriken wie Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS) beeinflussen.

Eine kurze Erinnerung: Was ist das DOM?

DOM steht für Document Object Model. Das DOM ist eine baumstrukturierte Objekt-Darstellung Ihres HTML, bei der jedes HTML-Element (zum Beispiel: der Body oder h1) durch seinen eigenen Knoten repräsentiert wird.

Was verursacht eine excessive DOM size?

Eine excessive DOM size kann eine beliebige Anzahl von Gründen haben. Eine excessive DOM size wird meist verursacht durch:

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

Wie beeinflusst 'excessive-DOM size' die PageSpeed

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

• Der Umfang Ihres HTML ist größer, da 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 jedes Mal, wenn ein Benutzer oder ein Skript mit Ihrer Seite interagiert, mehr (DOM) Berechnungen durchführen.
• Ihr Browser kann bei der Interaktion mit dem DOM via JavaScript viel mehr Speicher verwenden.

Wie beheben Sie 'avoid excessive-DOM size'

Um die 'avoid excessive-DOM size' Warnung zu beheben, müssen Sie zuerst deren Ursprung herausfinden. Lighthouse gibt Ihnen einen Hinweis darauf, wo sich die maximale DOM-Tiefe und die maximalen Child-Elemente befinden. Von dort aus müssen Sie ein bisschen suchen. Verwenden Sie den DOM-Inspektor Ihres Webbrowsers und schauen Sie sich das DOM an. Versuchen Sie herauszufinden, was eine große Anzahl von DOM-Knoten erstellt. 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 erstellt, könnten Sie erwägen, dieses Plugin durch ein schlankeres Plugin zu ersetzen.
2. DOM-Knoten, die durch ein JavaScript erstellt wurden.
   Ein JavaScript, zum Beispiel ein Chat-Widget, kann eine große Anzahl von DOM-Knoten in das DOM injizieren. Entfernen Sie in diesem Fall die JavaScript-Datei oder suchen Sie einen Ersatz mit derselben Funktionalität.
3. Page Builder, die aufgeblähtes HTML generieren
   Page Builder wie Elementor oder WP Bakery erstellen oft aufgeblähten Code, der eine große Anzahl von DOM-Knoten hat. Hierfür gibt es keine einfache Lösung. PageBuilder sind oft ein Teil des Workflows. Die Lösung umfasst das Bereinigen Ihres aufgeblähten Codes und das Ändern Ihres Workflows.
4. Text, der in einen WYSIWYG-Editor kopiert und eingefügt wurde
   Die meisten WYSIWYG-Editoren wie TinyMCE leisten schlechte Arbeit beim Bereinigen von eingefügtem Code, insbesondere wenn er aus einer anderen Rich-Text-Quelle wie Microsoft Word eingefügt wird. Er kopiert nicht nur den Text, sondern auch die Stile. Diese Stile 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, Inhalt in Ihren Editor einzufügen, und bereinigen Sie Seiten, die bereits eingefügten, aufgeblähten Text haben.
5. Schlechte (Template) Programmierung.
   Wenn eine große DOM-Größe durch Ihren Editor erstellt oder durch Ihr Template verursacht wird, können Dinge hässlich werden. Dies bedeutet, dass aufgeblähter Code Teil des Kerns Ihrer Website ist. Sie müssen den Editor wechseln, Teile Ihres Templates umschreiben oder sogar ganz von vorne beginnen.

Workaround für 'avoid excessive-DOM size'

Manchmal ist es nicht möglich, die excessive DOM size zu entfernen, ohne große Teile Ihrer Seite umzuschreiben und Ihren gesamten Workflow zu ändern. Es gibt ein paar Workarounds, um die Auswirkungen einer excessive-DOM size zu verringern. Diese Workarounds sind weit davon entfernt, perfekt zu sein, und können eine ganz neue Reihe von Herausforderungen einführen, die in einigen Fällen Einfluss auf Ihre SEO oder Indexierung haben können.

• Lazy load Teile Ihrer Webseite.
  Um das initiale Rendering zu beschleunigen, könnten Sie erwägen, Teile Ihrer Website lazy zu laden. Zum Beispiel den Footer.
• Verbessern Sie Page Rendering mit Content Visibility.
  Die CSS Content-Visibility Eigenschaft sagt einem Browser, Styling, Layout und Paint zu überspringen, bis Sie es benötigen, was die Auswirkungen der übermäßigen Knotengröße verringern kann.
• Teilen Sie große Seiten in mehrere Seiten auf.
  Das Aufteilen großer Seiten in mehrere Seiten kann die Anzahl der DOM-Knoten verringern, wenn der Inhalt selbst viele DOM-Knoten erstellt hat.
• Implementieren Sie Infinite Scroll.
  Infinite Scroll ist im Grunde Lazy Loading. Beim Scrollen durch wiederholte Elemente wie Bilder (Pinterest) oder große Datentabellen kann Infinite Scroll Ihre Seite erheblich beschleunigen.
• Vermeiden Sie speicherintensives JavaScript.
  Seien Sie besonders vorsichtig mit JavaScript, wenn Sie es mit einer großen Anzahl von DOM-Knoten auf Ihrer Seite zu tun haben. document.getElementsByTagName('div'); kann eine große Anzahl von DOM-Knoten laden, was den Speicherverbrauch erhöht.
• Vermeiden Sie komplizierte Deklarationen.
  Seien Sie besonders vorsichtig mit komplizierten CSS-Deklarationen, wenn Sie es mit einer großen Anzahl von DOM-Knoten auf Ihrer Seite zu tun haben. div:last-child; muss den last-child Status für jedes Div auf Ihrer Seite überprüfen.