So beheben Sie übermäßige DOM-Größe in WordPress (11 Expertentipps)

Die Warnung 'Vermeiden Sie eine übermäßige DOM-Größe' in WordPress bedeutet, dass Ihre Seite zu viele HTML-Elemente hat, was sie verlangsamt.

Die besten Möglichkeiten, dies zu beheben, sind die Verwendung eines Performance-Plugins wie WP Rocket, die Optimierung des Ladens von Bildern und Galerien sowie die Auswahl eines leichten Themes oder Page Builders.

Diese Warnung kann in Google Lighthouse oder anderen Geschwindigkeitstest-Tools angezeigt werden und klingt technisch. Aber das Konzept ist einfach: Ihre Website ist eine Sammlung von Teilen, und zu viele davon können einen Browser überfordern.

Hier bei WPBeginner haben wir nicht nur unsere eigenen Websites mit hohem Traffic optimiert, um genau dieses Problem zu lösen, sondern auch unzähligen Benutzern geholfen, die Geschwindigkeit ihrer Websites zu verbessern.

In diesem Artikel werden wir 11 unserer Expertenmethoden detailliert beschreiben, um das Problem zu lösen und Ihre WordPress-Leistung zu verbessern.

Was bedeutet die Warnung „Vermeiden Sie eine übermäßige DOM-Größe“?

Die Warnung „Vermeiden Sie eine übermäßige DOM-Größe“ erscheint in Geschwindigkeitstest-Tools wie Google PageSpeed Insights, wenn eine Webseite zu viele HTML-Elemente enthält, die ein Browser nicht effizient verarbeiten kann.

DOM steht für Document Object Model. Es ist eine baumartige Struktur, die alle Objekte auf Ihrer Webseite darstellt. Jedes Element, wie eine Überschrift, ein Absatz, ein Bild oder ein Button, ist ein „Knoten“ in diesem Baum.

Die Gesamtzahl dieser Knoten macht die DOM-Größe aus. Wenn diese Zahl zu groß wird, benötigt der Browser mehr Zeit und Ressourcen, um die Seite zu rendern, was Ihre Website verlangsamen kann.

Wie wirkt sich eine übermäßige DOM-Größe auf die Website-Leistung aus?

Eine große DOM-Größe wirkt sich auf verschiedene wichtige Weise negativ auf die Performance Ihrer WordPress-Website aus. Jedes Element, das Sie einer Seite hinzufügen, von Text und Bildern bis hin zu Formularen und Menüs, erhöht die Anzahl der DOM-Knoten.

Diese Komplexität hat folgende Auswirkungen:

• Langsamere Seitenanzeige: Ein Browser muss den gesamten DOM-Baum parsen, bevor er die Seite anzeigen kann. Ein größerer Baum benötigt länger zur Verarbeitung, was die Zeit verzögert, die ein Besucher benötigt, um Ihre Inhalte zu sehen.
• Erhöhter Speicherverbrauch: Eine komplexe DOM-Struktur erfordert mehr Speicher und Rechenleistung vom Gerät des Benutzers. Dies kann besonders auf Mobiltelefonen auffallen.
• Schlechte Benutzererfahrung: Diese Leistungseinbußen führen zu langsameren Ladezeiten. Dies kann Besucher frustrieren und dazu führen, dass sie Ihre Website verlassen, bevor sie überhaupt geladen ist.
• Negative SEO-Auswirkungen: Suchmaschinen wie Google verwenden die Seitenladegeschwindigkeit als Rankingfaktor. Langsam ladende Seiten können Ihr WordPress SEO beeinträchtigen und die Website-Konversionen reduzieren.

Wie viele DOM-Elemente sind zu viele für Google?

Test-Tools wie Google Lighthouse verwenden nicht nur eine Zahl, um eine übermäßige DOM-Größe zu kennzeichnen. Stattdessen betrachten sie drei spezifische Kriterien:

• Gesamte DOM-Knoten: Eine Warnung wird ausgelöst, wenn die Gesamtzahl der HTML-Elemente (Knoten) auf der Seite 1.500 überschreitet. Dies ist der häufigste Grund für die Warnung.
• Maximale DOM-Tiefe: Eine Warnung wird ausgelöst, wenn Elemente zu tief ineinander verschachtelt sind. Lighthouse markiert eine Seite, wenn die Verschachtelung tiefer als 32 Ebenen geht.
• Maximale Kindelemente: Eine Warnung wird ausgelöst, wenn ein einzelnes Elternelement mehr als 60 direkt darin enthaltene Kindelemente hat. Dies geschieht oft bei schlecht codierten Mega-Menüs oder Galerien.

Seiten mit mehreren Slidern, komplexen Layouts mit vielen verschachtelten Abschnitten oder zahlreichen eingebetteten Elementen überschreiten eher diese Grenzen. Sie müssen jedoch Ihr Design nicht opfern, um dieses Problem zu beheben.

Wir haben einen umfassenden Leitfaden für Sie zusammengestellt, um dies zu lösen. Hier sind 11 bewährte Methoden, um die DOM-Größe zu reduzieren und die WordPress-Leistung zu verbessern:

1. Verwenden Sie ein WordPress-Plugin zur Geschwindigkeitsoptimierung
2. Überprüfen Sie Ihr Theme und Ihre Plugins
3. Verwenden Sie einen optimierten Page Builder
4. Optimieren Sie Ihre Bilder und Videos
5. Implementieren Sie Lazy Loading
6. Kommentare oder Beiträge mit vielen Inhalten paginieren
7. CSS- und JavaScript-Dateien minimieren
8. Blockierendes JavaScript und CSS reduzieren
9. WordPress-Caching aktivieren
10. Verwenden Sie ein WordPress CDN
11. Optimieren Sie Ihre WordPress-Datenbank

Nutzen Sie gerne die obigen Schnelllinks, um mehr über eine bestimmte Optimierungsmethode zu erfahren.

1. Verwenden Sie ein WordPress-Plugin zur Geschwindigkeitsoptimierung

Unsere erste Empfehlung ist die Installation eines leistungsstarken WordPress-Plugins zur Geschwindigkeitsoptimierung. Diese Plugins übernehmen die technischen Optimierungen, die erforderlich sind, um Ihre Website schneller zu machen.

Dies ermöglicht es Ihnen, sich auf die Verwaltung und Erstellung Ihrer Inhalte zu konzentrieren, während das Plugin im Hintergrund arbeitet.

Hier bei WPBeginner verwenden und empfehlen wir WP Rocket. Wir haben es auf unseren eigenen Websites verwendet, um Caching, Dateiooptimierung und Lazy Loading zu verwalten, worüber Sie in unserem Artikel über wie wir die Seitenladezeit auf WPBeginner verbessern mehr erfahren können.

Während WP Rocket hauptsächlich als Caching-Plugin bekannt ist, helfen viele seiner Funktionen, die Probleme zu lösen, die durch einen großen DOM verursacht werden. Dazu gehören Dateisoptimierung, Lazy Loading und das verzögerte Laden von JavaScript.

Wir werden diese Funktionen später im Artikel erklären. Sie können auch unseren vollständigen WP Rocket Testbericht für weitere Informationen lesen oder unseren Einrichtungsleitfaden verwenden, um loszulegen.

2. Überprüfen Sie Ihr Theme und Ihre Plugins

Während WordPress-Plugins und -Themes Ihrer WordPress-Website Funktionalität und Stil verleihen, können sie auch zu einer übermäßigen DOM-Größe beitragen.

Schlecht programmierte Themes und Plugins können unnötige HTML-Elemente hinzufügen und die Seitenstruktur aufblähen. Ebenso können Plugins und Themes mit zusätzlichen Funktionen, die Sie nicht verwenden, ihren Code laden und so die DOM erhöhen.

Um zu prüfen, ob ein bestimmtes Plugin oder Theme die Ursache ist, können Sie Plugins einzeln deaktivieren oder vorübergehend zu einem Standard-WordPress-Theme wechseln. Führen Sie nach jeder Änderung einen Geschwindigkeitstest durch, um zu sehen, ob die Warnung vor der DOM-Größe verschwindet.

Um dieses Problem zu vermeiden, wählen Sie immer Themes und Plugins aus seriösen Quellen wie dem offiziellen WordPress-Verzeichnis oder bekannten Entwicklern. Diese Ressourcen haben in der Regel strengere Codierungsstandards.

Für vertrauenswürdige Empfehlungen besuchen Sie das WPBeginner Solution Center, wo wir WordPress-Software testen und bewerten.

3. Verwenden Sie einen optimierten Page Builder

Page Builder sind hervorragende Werkzeuge zum Erstellen benutzerdefinierter Layouts ohne Code, aber einige können zu einer übermäßigen DOM-Größe beitragen. Sie umschließen oft Ihre Inhalte mit zusätzlichen HTML-Elementen, um Styling und Layout zu steuern.

Beispielsweise kann ein schlecht optimierter Page Builder einen einzelnen Button in mehreren verschachtelten <div>-Containern für Ausrichtung und Styling verpacken. Jeder dieser Container fügt dem DOM einen weiteren Knoten hinzu, wodurch die Gesamtzahl schnell ansteigt.

Wenn Sie vermuten, dass Ihr Page Builder das Problem ist, können Sie ihn testen, indem Sie ihn auf einer Staging-Site deaktivieren und die DOM-Größe erneut überprüfen. Sie können integrierte Tools wie den Full Site Editor verwenden, aber diese bieten möglicherweise nicht genügend Flexibilität.

Für die beste Balance zwischen Flexibilität und Leistung empfehlen wir die Verwendung eines geschwindigkeitsoptimierten Seitenerstellers wie SeedProd. In unseren Tests übertrifft er durchweg andere beliebte Builder.

Sie können sehen, wie es im Vergleich zu anderen in unserer Elementor vs. Divi vs. SeedProd Analyse abschneidet.

Viele unserer Partner-Marken, darunter WPForms und Duplicator, nutzen SeedProd zum Erstellen ihrer Websites.

4. Optimieren Sie Ihre Bilder und Videos

Es ist wichtig zu klären, wie Bilder mit der DOM-Größe zusammenhängen. Die Dateigröße eines Bildes (in KB oder MB) beeinflusst nicht die Anzahl der DOM-Knoten. Ein <img>-Tag ist ein einzelner Knoten, unabhängig davon, wie groß die Bilddatei ist.

Die Art und Weise, wie Bilder angezeigt werden, kann jedoch die DOM-Größe erhöhen. Einige Themes und Galerie-Plugins umschließen jedes Bild für Styling, Lightboxes oder Bildunterschriften mit mehreren <div>-Containern. Diese zusätzlichen Wrapper-Elemente erhöhen die DOM-Anzahl, nicht das Bild selbst.

Während die Optimierung von Bildern durch Komprimierung für die Seitengeschwindigkeit entscheidend ist, sollten Sie auch Galerie-Plugins wählen, die sauberen Code generieren. Ein Plugin wie Optimole kann bei der Bildkomprimierung und dem Lazy Loading helfen.

Für Videos empfehlen wir, sie niemals direkt auf WordPress hochzuladen.

Hosten Sie sie stattdessen auf Diensten wie YouTube oder Vimeo und binden Sie sie ein. Dies reduziert die Belastung Ihres Servers und hält Ihre DOM sauberer.

5. Lazy Loading einrichten

Lazy Loading ist eine Technik, die das Laden nicht kritischer Elemente wie Bilder und Videos verzögert, bis sie sich im Viewport des Benutzers befinden. Dies ermöglicht es dem Browser, den anfänglichen, sichtbaren Teil der Seite viel schneller zu rendern.

Indem nicht alles auf einmal geladen wird, reduziert Lazy Loading die anfängliche Verarbeitungsarbeit für den Browser und sorgt für eine wesentlich reibungslosere Benutzererfahrung.

Das Einrichten von Lazy Loading ist mit einem Plugin wie WP Rocket einfach. Navigieren Sie in Ihrem WordPress-Dashboard zu Einstellungen » WP Rocket und öffnen Sie den Tab „Medien“. Hier können Sie Lazy Loading für Bilder, Videos und Iframes mit einem einzigen Klick aktivieren.

Für Galerien empfehlen wir die Verwendung eines Galerie-Plugins mit integriertem Lazy Loading, wie z. B. Envira Gallery.

Sie können sogar Ihren Kommentarbereich mit Lazy Loading laden, indem Sie ein Plugin wie Thrive Comments verwenden, um die Leistung weiter zu verbessern.

6. Kommentare oder Beiträge mit viel Inhalt paginieren

Sehr lange Beiträge oder Kommentarbereiche können die DOM-Größe erheblich erhöhen und die Ladezeiten verlangsamen. Paginierung löst dies, indem diese Inhalte in mehrere kleinere Seiten aufgeteilt werden.

Dies macht den Inhalt für den Browser und den Leser besser handhabbar. Sie können lange Beiträge leicht aufteilen, indem Sie den Block „Seitenumbruch“ im WordPress-Editor hinzufügen. Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Aufteilen von WordPress-Beiträgen in mehrere Seiten.

Ähnlich können Sie Ihre Kommentare paginieren. Gehen Sie in Ihrem WordPress-Adminbereich zu Einstellungen » Diskussion, aktivieren Sie das Kontrollkästchen neben 'Kommentare in Seiten aufteilen' und legen Sie die Anzahl der Kommentare pro Seite fest.

Sie können mehr in unserem Leitfaden unter zur Paginierung von Kommentaren in WordPress lesen.

Wir empfehlen, Infinite Scroll zu vermeiden, da es kontinuierlich neue Elemente zum DOM hinzufügt, was zu Leistungsproblemen führen kann.

7. CSS- und JavaScript-Dateien minimieren

Während diese Technik die Anzahl der DOM-Knoten nicht direkt reduziert, verbessert sie die Leistung erheblich und verringert die negativen Auswirkungen eines großen DOMs.

Minifizierung entfernt unnötige Zeichen wie Kommentare, Leerzeichen und Zeilenumbrüche aus Ihren CSS- und JavaScript-Dateien. Dies reduziert ihre Dateigröße, sodass sie vom Browser schneller heruntergeladen und verarbeitet werden können.

Ein Plugin wie WP Rocket macht dies einfach. Gehen Sie zu Einstellungen » WP Rocket, wechseln Sie zum Tab „Dateisoptimierung“ und aktivieren Sie die Funktionen zum Minifizieren von CSS- und JavaScript-Dateien. Weitere Details finden Sie in unserem Leitfaden zum Minifizieren von CSS- und JavaScript-Dateien.

Vor der Minifizierung empfehlen wir, ein Backup Ihrer Website zu erstellen. In seltenen Fällen kann die Minifizierung Probleme mit bestimmten Themes oder Plugins verursachen.

8. Blockierendes JavaScript und CSS reduzieren

Dies ist eine weitere Technik, die DOM-Knoten nicht direkt reduziert, aber die wahrgenommene Leistung erheblich verbessert, indem die Art und Weise, wie Dateien geladen werden, geändert wird.

Stellen Sie sich vor, ein Browser, der Ihre Seite lädt, malt ein Bild. Render-blocking-Ressourcen zwingen den Browser, das Malen der Webseite zu stoppen, bis sie vollständig geladen sind. Das Aufschieben ermöglicht es, zuerst den Hauptinhalt zu malen, sodass der Benutzer Ihre Seite schneller sieht.

WP Rocket bietet Funktionen, um dies zu beheben. Es kann Dateien kombinieren, um HTTP-Anfragen zu reduzieren und das Laden nicht kritischer JavaScript-Dateien zu verzögern. Das bedeutet, dass Benutzer Ihre Inhalte schneller sehen, auch wenn Hintergrundskripte noch nicht vollständig geladen sind.

Mehr erfahren Sie in unserem Artikel zur Behebung von Render-Blocking-Ressourcen in WordPress.

9. WordPress-Caching aktivieren

Während Caching die Anzahl der DOM-Knoten nicht direkt reduziert, beschleunigt es die Seitenladezeiten dramatisch, insbesondere für wiederkehrende Besucher. Dadurch wird die DOM-Anzeige und -Ladegeschwindigkeit erheblich verbessert.

Caching speichert eine statische Version Ihrer Website. Wenn ein Benutzer die Seite erneut besucht, kann sein Browser diese gespeicherte Version laden, anstatt die Seite von Grund auf neu zu erstellen, was viel schneller ist. Dies reduziert auch die Belastung Ihres Servers und gibt ihm mehr Kapazität, den DOM schneller zu verarbeiten.

Das Einrichten von Caching ist mit einem Plugin wie WP Rocket einfach, das nach der Aktivierung automatisch optimale Caching-Einstellungen aktiviert. Sie können mehr über seine Caching-Funktionen in unserem WP Rocket Installationsleitfaden erfahren.

10. Verwenden Sie ein WordPress CDN

Ein CDN (Content Delivery Network) hilft auch dabei, die Auswirkungen eines großen DOM zu mildern, ohne es direkt zu ändern. Ein CDN ist ein globales Netzwerk von Servern, das Kopien der statischen Dateien Ihrer Website (Bilder, CSS, JavaScript) speichert.

Wenn ein Benutzer Ihre Website besucht, liefert das CDN diese Dateien vom Server, der seinem physischen Standort am nächsten liegt. Dies reduziert die Downloadzeiten drastisch und ermöglicht es dem Browser, die DOM-Verarbeitung viel schneller zu starten.

Wir verwenden Cloudflare's CDN auf WPBeginner. Warum wir uns dafür entschieden haben, erfahren Sie in unserem Beitrag über den Wechsel von Sucuri zu Cloudflare.

Weitere Optionen finden Sie in unserer Liste der besten WordPress CDN-Dienste.

11. Optimieren Sie Ihre WordPress-Datenbank

Dies ist eine weitere indirekte Optimierung. Obwohl Ihre Datenbank nicht Teil des DOM ist, kann eine aufgeblähte Datenbank die Antwortzeit Ihres Servers verlangsamen. Diese Verzögerung führt dazu, dass Ihre Website länger zum Laden benötigt, was ein großes DOM noch langsamer erscheinen lassen kann.

Im Laufe der Zeit kann Ihre Datenbank mit unnötigen Daten wie Beitragsrevisionen, Spam-Kommentaren und alten Plugin-Daten gefüllt werden. Das Ausmisten hilft Ihrer Website, effizienter zu laufen.

Unser Leitfaden zur Optimierung Ihrer WordPress-Datenbank zeigt Ihnen, wie Sie ein Plugin verwenden, um Ihre Datenbank sicher und schnell zu bereinigen.

Konzentrieren Sie sich auf die Gesamtleistung von WordPress, nicht nur auf die DOM-Größe

Während die Behebung der Warnung 'Vermeiden Sie eine übermäßige DOM-Größe' in WordPress für die Website-Geschwindigkeit wichtig ist, ist dies nicht der einzige zu berücksichtigende Faktor.

Eine Website mit vielen Funktionen oder einzigartigen Formatierungen kann von Natur aus eine größere DOM haben, und das ist in Ordnung. Der Schlüssel liegt darin, die richtige Balance zwischen Website-Leistung und Funktionen zu finden.

Daher sollten Sie neben der DOM-Größe auch andere Metriken wie Core Web Vitals beachten. Dies sind spezifische Metriken, die Google zur Messung des Benutzererlebnisses einer Website verwendet.

Häufig gestellte Fragen zur übermäßigen DOM-Größe

Hier sind Antworten auf einige der häufigsten Fragen, die uns zu Behebung von DOM-Größenproblemen in WordPress gestellt werden.

Was ist eine gute DOM-Größe für eine Webseite?

Laut Googles Richtlinien ist ein gutes Ziel, die DOM-Größe unter 1.500 Gesamtknoten zu halten, mit einer maximalen Verschachtelungstiefe von 32 Ebenen und keinem einzelnen Element mit mehr als 60 Kindern.

Erhöht die Verwendung eines Seitenerstellers immer die DOM-Größe?

Nicht unbedingt. Moderne, auf Leistung ausgerichtete Page Builder wie SeedProd sind darauf ausgelegt, sauberen und effizienten Code zu generieren. Einige ältere oder schlecht programmierte Page Builder können jedoch viele unnötige Wrapper-Elemente hinzufügen, die die DOM-Größe erhöhen.

Wie kann ich die DOM-Größe meiner Website kostenlos überprüfen?

Sie können kostenlose Online-Tools wie Google PageSpeed Insights oder GTmetrix verwenden. Sie können dies auch direkt in Ihrem Browser überprüfen. Klicken Sie in Google Chrome mit der rechten Maustaste auf Ihre Seite, wählen Sie „Untersuchen“, gehen Sie zum Tab „Konsole“ und geben Sie den Befehl document.querySelectorAll('*').length ein, dann drücken Sie Enter.

Zusätzliche Ressourcen für WordPress-Performance

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie die übermäßige DOM-Größe in WordPress beheben können.

Möglicherweise möchten Sie auch diese verwandten Anleitungen zur Verbesserung der Leistung Ihrer Website lesen:

• Der ultimative Leitfaden zur Steigerung von WordPress-Geschwindigkeit & Leistung
• So beschleunigen Sie die WooCommerce-Leistung
• Bewährte Methoden zur Reduzierung der Absprungrate und Steigerung der Konversionen

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.