7 bewährte Strategien zur Behebung der Warnung „Übermäßige DOM-Größe vermeiden“.

Veröffentlicht: 2022-11-23

TL;DR: Das Korrigieren der Warnung „Vermeiden Sie eine übermäßige DOM-Größe“ wird Ihre Lighthouse-Ergebnisse nicht verbessern, aber es hat einen direkten Einfluss auf die reale Leistung Ihrer Website. Eine große DOM-Größe verlangsamt Ihre Website, erhöht die Renderzeit und die Datenkosten für Ihre Benutzer und überlastet den Speicher ihrer Geräte. Es gibt zahlreiche Lösungen für das Problem der übermäßigen DOM-Größe, z. B. das Vermeiden schlecht codierter Themen und Plugins, das Aufteilen Ihrer einseitigen Website in mehrere Seiten und die vorsichtige Verwendung von Seitenerstellern.

Die meisten Verbesserungsvorschläge von Google PageSpeed Insights sind ziemlich einfach.

Egal, ob es sich um „Offscreen-Bilder verschieben“, „Ressourcen zum Blockieren des Renderings eliminieren“ oder „unbenutztes CSS reduzieren“ handelt, Sie können erkennen, welche nächsten Schritte Sie unternehmen müssen, um die Probleme zu lösen.

Wenn Sie jedoch etwas tiefer scrollen, werden Sie plötzlich von der Warnung „Vermeiden Sie eine übermäßige DOM-Größe“ getroffen:

Erste Reaktion:

Was zum Teufel ist die DOM-Größe und wie kann ich das beheben?!

Sie sind an der richtigen Stelle.

In den folgenden Abschnitten erfahren Sie alles, was Sie über die DOM-Größe wissen müssen und wie Sie mit dieser Warnung umgehen:

Was ist DOM (Dokumentobjektmodell)?
Welchen Einfluss hat die DOM-Größe auf die Seitenleistung?
Warum wird die Warnung „Übermäßige DOM-Größe vermeiden“ angezeigt
So beheben Sie die Warnung „Übermäßige DOM-Größe vermeiden“.

Erreiche mit einem Klick eine Punktzahl von über 90 PSI. Sehen Sie Ihre Website mit NitroPack!

Was ist DOM?

Ihre Website enthält Ressourcen wie ein HTML-Dokument, CSS- und JavaScript-Dateien.

Immer wenn ein Benutzer Ihre Website lädt, stellt sein Browser eine Verbindung her und empfängt die Ressourcen. Sobald der erste Datenblock empfangen wurde, beginnt der Parsing-Prozess.

Parsing ist der Schritt, den der Browser unternimmt, um Daten (HTML-Markup) in den DOM-Baum umzuwandeln.

Das DOM ist ein Dokumentmodell, das HTML als Baum aus Zweigen und Knoten darstellt.

Jeder Zweig des Baums endet in einem Knoten, und jeder Knoten enthält Objekte. Ein Knoten stellt einen Teil des Dokuments dar, z. B. ein Element, eine Textzeichenfolge oder einen Kommentar.

Einfacher ausgedrückt, wenn Sie DOM hören, bedeutet dies die Struktur von Objekten, die der Browser jedes Mal erstellt, wenn eine Webseite geladen wird.

Schlüsselbegriffe:

Knoten. Jedes Element oder Tag im DOM wird als Knoten oder Blatt bezeichnet.
Tiefe. Die Anzahl der Elemente in einem Zweig eines DOM.
Untergeordnetes Element. Der letzte Knoten, der nicht weiter verzweigt.

Welchen Einfluss hat die DOM-Größe auf die Seitenleistung?

Je mehr Zweige und Knoten Ihr DOM hat, desto größer wird es.

Je größer die DOM-Größe, desto mehr negative Leistungsprobleme könnten auftreten.

Hier sind einige der Probleme, die mit einer größeren DOM-Größe korrelieren:

1. Erhöhte Datenkosten und langsamere Ladezeiten

Eine große DOM-Struktur enthält oft viele Knoten, die nicht sichtbar sind, wenn der Benutzer die Seite zum ersten Mal lädt. Dadurch werden die Datenkosten für Ihre Benutzer unnötig erhöht, da sie mehr Elemente laden müssen, und die Ladezeit verlangsamt.

2. Überfordert die Speicherressourcen des Geräts Ihres Benutzers

Die ständige Interaktion mit JavaScript-Abfragen führt zu schlechter Leistung und langsamem Rendering. Dies führt zu einer negativen Seitenerfahrung für die Benutzer Ihrer Website.

3. Erhöhte Renderzeit

Wenn Benutzer mit Ihrer Seite interagieren, muss der Browser die Position und den Stil von Knoten ständig neu berechnen. Ein großer und komplizierter DOM-Baum kann das Rendern drastisch verlangsamen.

4. Erhöhte Zeit bis zum ersten Byte (TTFB)

TTFB misst, wie lange es dauert, bis der Browser eines Clients das erste Byte der Antwort vom Server empfängt. Ein übermäßiges DOM weist auf ein größeres HTML-Dokument hin. Infolgedessen muss eine größere Datenmenge transportiert werden, was mehr Zeit in Anspruch nehmen kann.

Warum wird in PageSpeed Insights die Warnung „Vermeiden Sie eine übermäßige DOM-Größe“ angezeigt

PSI verwendet Lighthouse, um URLs in einer kontrollierten Umgebung (dh unter Verwendung von Labordaten) zu analysieren, um die Leistung, Zugänglichkeit, Best Practices und den SEO-Score zu präsentieren.

Damit Lighthouse Ihre Seite kennzeichnen bzw. die Warnung „Übermäßige DOM-Größe vermeiden“ in Ihrem PSI-Bericht anzeigen kann, muss einer der folgenden Fehler für seinen DOM-Baum zutreffen:

Es hat insgesamt mehr als 1.500 DOM-Knoten .
Es hat eine maximale Knotentiefe von mehr als 32 Knoten .
Ein übergeordneter Knoten hat mehr als 60 untergeordnete Knoten .

Gut zu wissen: Die DOM-Größe wirkt sich nicht direkt auf Ihre Lighthouse-Bewertungen aus (z. B. Leistung, Zugänglichkeit, Best Practices und SEO). Eine übermäßige DOM-Größe wirkt sich jedoch negativ auf die reale Leistung Ihrer Website aus, was zu langsamen Ladezeiten und einer schlechten Benutzererfahrung für Ihre Benutzer führt.

Schließen Sie sich den besten 31 % der Websites an, die ihre Core Web Vitals bestehen! Sehen Sie Ihre Website mit NitroPack

Vermeiden Sie eine übermäßige DOM-Größe

Eine gute Faustregel von Google lautet:

„Im Allgemeinen sollten Sie nach Möglichkeiten suchen, DOM-Knoten nur bei Bedarf zu erstellen und Knoten zu zerstören, wenn sie nicht mehr benötigt werden.“

Das ist natürlich leichter gesagt als getan, und es wird Zeiten geben, in denen Sie sich auf das Wesentliche konzentrieren müssen, um Ihre Website zu optimieren.

Dann empfehlen wir, einige der folgenden Fixes anzuwenden:

1. Vermeiden Sie schlecht codierte Plugins und Themes

Sie werden im Grunde den Code Ihrer Website aufblähen, Ihre DOM-Größe erhöhen und die Geschwindigkeit und Gesamtleistung Ihrer Website beeinträchtigen.

Wie können Sie feststellen, ob ein Design/Plugin schlecht codiert wurde?

Tolle Frage. Und die Antwort lautet:

Lesen Sie die Bewertungen. Wenn es Probleme gibt, ist sie wahrscheinlich schon jemandem begegnet und hat sie kommentiert.
Scheuen Sie sich nicht, etwas Geld auszugeben. Genau wie bei allem anderen bekommen Sie, wofür Sie bezahlen. Geld zu sparen, indem man ein kostenloses Theme/Plug-in erhält, mag großartig klingen, aber die langfristigen Auswirkungen werden Sie viel mehr kosten.
Überprüfen Sie, wann es zuletzt aktualisiert wurde. Sie möchten auf jeden Fall veraltete Themen und Plugins vermeiden.

Wenn Sie ein WooCommerce-Benutzer sind oder planen, einen Shop zu eröffnen, sollten Sie sich unbedingt unsere eingehende Recherche zu den leistungsstärksten Woo-Themes im Jahr 2022 ansehen.

Hier ist eine Checkliste mit Dingen, die Sie bei der Auswahl eines Themas beachten/vermeiden sollten:

Mehrzweckthemen. Sie kommen mit vielen Optionen, die Sie nie verwenden werden und gleichzeitig Ihren Code aufblähen werden.
Kostenlose Versionen. Auch hier sind sie großartig für eine Probefahrt, aber oft sind sie leistungsschwach und können Ihnen eine Menge Ärger bereiten.
Ausgelöschte Themen. Verwenden Sie niemals eine gecrackte Version eines kostenpflichtigen Themes, da diese schädliche Skripte enthalten kann, die Ihrer Website schaden könnten.

2. Minimieren Sie JavaScript-basierte DOM-Knoten

Das Hinzufügen dynamischer Elemente auf Ihrer Website ist mit einem Preis verbunden, da sie sie mit zusätzlichen JavaScript-Knoten aufblähen könnten.

Für den Anfang können Sie es beheben, indem Sie die JS-Dateien, die Probleme verursachen, zuweisen und entfernen. Falls es sich um ein Drittanbieter-Widget handelt (z. B. ein Chat-Widget), sollten Sie nach einer optimierten Alternative suchen.

3. Seitenersteller, die aufgeblähtes HTML generieren

Die Benutzerfreundlichkeit von Seitenerstellern hat sie für viele Benutzer zu einem integralen Bestandteil des Website-Erstellungsprozesses gemacht.

Leider können Seitenersteller manchmal aufgeblähten Code mit einer übermäßigen Anzahl von DOM-Knoten erzeugen. Sie tun dies, indem sie zu viele div-Tags einfügen.

Um damit umzugehen, können Sie auf Ihr HTML zugreifen und es manuell reparieren.

Die gute Nachricht ist, dass einige Seitenersteller Schritte unternehmen, um diese bekannten Probleme zu lösen. Elementor hat beispielsweise angekündigt, dass Elementor 3.0 mit erheblichen DOM-Verbesserungen ausgestattet ist, um die Geschwindigkeit und Leistung neuer Websites zu steigern.

4. Kopieren Sie keinen Text und fügen Sie ihn nicht in den WYSIWYG-Editor ein

Die meisten WYSIWYG-Editoren (What You See Is What You Get) scheitern daran, eingefügten Code zu bereinigen. Vor allem, wenn sie aus einer anderen Rich-Text-Quelle wie Microsoft Word eingefügt werden. Das Problem ist, dass nicht nur der Text kopiert wird, sondern auch seine Stile. Und sie sind der Hauptschuldige, da sie viele DOM-Knoten einbetten könnten.

Sie haben ein paar Möglichkeiten, damit umzugehen:

Vermeiden Sie es, Text in Ihren Editor einzufügen
Verwenden Sie die Option Als reinen Text einfügen
(Wenn Ihr Editor dies zulässt) Verwenden Sie die erweiterten Funktionen, um den Code nach dem Einfügen zu bereinigen

Und last but not least - kehren Sie zu Ihren alten Seiten zurück und bereinigen Sie sie.

5. Teilen Sie Ihre einseitige Website in mehrere Seiten auf

Eine einseitige Website ist eine großartige Idee, wenn ihr einziger Zweck darin besteht, Ihr Unternehmen zu präsentieren.

Wenn Sie sich dagegen entscheiden, Geschäftsinformationen, Blogartikel, Produkte, Kontaktformulare usw. hinzuzufügen, teilen Sie diese in separate Seiten auf und verknüpfen Sie sie über das Navigationsmenü.

Das Aufteilen großer Seiten in mehrere Seiten kann die Anzahl der DOM-Knoten reduzieren.

6. Blenden Sie unerwünschte Elemente nicht mit display:none aus

display: none wird häufig mit JavaScript verwendet, um Elemente auszublenden und anzuzeigen, ohne sie zu löschen und neu zu erstellen. Das bedeutet jedoch nicht, dass sie aus Ihrem HTML-Markup verschwinden und Besucher unerwünschte Elemente laden müssen.

7. Vermeiden Sie komplizierte CSS-Deklarationen und JavaScript

Komplizierte CSS-Deklarationen und JavaScript können die Speichernutzung zusätzlich erhöhen und Ihre Website verlangsamen. Es ist am besten, sie zu überspringen, wenn Sie es mit einer übermäßigen Anzahl von DOM-Knoten zu tun haben.

CSS- und JavaScript-Probleme automatisch beheben! Sehen Sie Ihre Website mit NitroPack

Abschließend

Es stimmt, dass die Behebung Ihrer DOM-Probleme nicht zu einer Verbesserung Ihrer PageSpeed Insights-Ergebnisse führt.

Die versteckten Vorteile, wenn man sich Mühe gibt, mit der Warnung „Vermeiden Sie eine übermäßige DOM-Größe“ umzugehen, sind jedoch viel größer:

Erhöhen Sie die Ladezeit Ihrer Website
Verbessern Sie die wahrgenommene Leistung Ihrer Seite
Bieten Sie Besuchern ein besseres Benutzererlebnis

Am wichtigsten ist, dass diese drei Dinge von Google belohnt werden ! Darüber hinaus sind sie ein todsicherer Weg, um die Absprungraten zu senken, die durchschnittlich verbrachte Zeit zu erhöhen und nicht zuletzt - die Conversions zu steigern.

Wenn Sie nach Möglichkeiten suchen, andere PSI-Vorschläge zu beheben, lesen Sie unbedingt unsere anderen Artikel:

Einfaches Bereitstellen von Bildern in Next-Gen-Formaten (WordPress, OpenCart & Magento)
So laden Sie Offscreen-Bilder faul (5 bewährte Techniken)
Bildoptimierung für das Web: 2022 SEO- und Website-Geschwindigkeitstechniken
8 Strategien zum Laden von Schriftarten zur Verbesserung Ihrer zentralen Web-Vitals (2022)
So eliminieren Sie Render-Blocking-Ressourcen (CSS und JavaScript)
Reduzieren Sie die Auswirkungen von Drittanbieter-Code (mit/ohne Plugins)
7 Wege zur Minimierung der Haupt-Thread-Arbeit