Erhalten Sie Warnungen von Google PageSpeed Insights oder Lighthouse zur Leistung Ihrer WordPress-Website?
Dies ist ein häufiges Problem vieler WordPress-Site-Betreiber, und es ist wichtig, es schnell zu beheben.
Vielleicht wissen Sie es nicht, aber eine große DOM-Größe kann die Anzeige von Inhalten und Bildern auf Ihrer Website verlangsamen. Sie verbraucht außerdem mehr Speicher, lässt Interaktionen träge wirken und verlangsamt Skripte, was die Performance und das Nutzererlebnis Ihrer Website beeinträchtigt.
Um Ihre WordPress-Website zu beschleunigen und das Nutzererlebnis zu verbessern, müssen Sie das Problem der großen DOM-Größe angehen. Sehen wir uns an, wie Sie dieses Problem lösen.
Contents
Das DOM verstehen
Das DOM, oder Document Object Model, repräsentiert die Struktur und den Inhalt einer WordPress-Website. Es organisiert Elemente wie Überschriften, Inhalte, visuelle Elemente und Schaltflächen in einer bestimmten Reihenfolge und macht sie so leichter zugänglich und veränderbar mit Programmiersprachen wie HTML, CSS und JavaScript.
Stellen Sie sich das DOM wie einen Stammbaum vor. Wie ein Stammbaum mit Eltern, Kindern und Verwandten hat eine WordPress-Website verschiedene Elemente (Knoten) mit unterschiedlichen Ebenen (Tiefe). Diese Hierarchie setzt sich fort, bis das letzte Element (Kindknoten) erreicht ist. Ein DOM mit zu vielen Knoten wird als „Excessive DOM Size" bezeichnet.
Schlüsselbegriffe:
- Knoten: Auch als HTML-Tags bekannt, sind dies die wesentlichen Elemente des DOM.
- Tiefe: Bezieht sich darauf, wie tief ein Zweig im DOM-Baum reicht.
- Kindelement: Ein Element, das unter einem anderen Element gelistet ist und sich zwischen öffnenden und schließenden HTML-Tags befindet. Zum Beispiel: Hello World
Nun verstehen Sie das DOM.
Woher kommt eine übermäßige DOM-Größe?
Eine große DOM-Größe entsteht, wenn Ihre Webseite zu viele HTML-Tags hat oder diese zu tief verschachtelt sind. Dies zwingt den Browser des Nutzers zu mehr Arbeit, verlangsamt die Ladezeiten und verschlechtert Ihre Page-Speed-Werte.
Langsame JavaScript- und CSS-Ausführung wird oft dadurch verursacht, dass der Browser mehr Knoten verarbeiten muss, was das Rendern der Seite verzögert.
Ein umfangreiches DOM erhöht den Speicherverbrauch, verzögert die Stilverarbeitung und verursacht teure Layout-Reflows. Durch Ändern von DOM-Objekten können Sie steuern, welche Seitenelemente dem Nutzer angezeigt werden. Sie finden dies in den DevTools oder den Inspect-Element-Ansichten Ihres Browsers:
Wenn Sie jedoch ein Tool wie Google Lighthouse verwenden, sehen Sie möglicherweise eine Leistungswarnung dazu.
Die Botschaft ist eindeutig: Sie sollten „Avoid an excessive DOM size" befolgen. Google Lighthouse meldet diese Warnung in drei Bereichen:
- Gesamtanzahl der Elemente: Wenn Ihre Seite mehr als 800 Elemente im DOM-Baum hat, sehen Sie eine Warnung.
- Maximale DOM-Tiefe: Dieser Wert zeigt den Codeabschnitt mit den am tiefsten verschachtelten Elementen.
- Elternknoten mit vielen Kindknoten: Lighthouse markiert jeden Elternknoten mit mehr als 60 Kindknoten.
Obwohl dies eine „Diagnose" in Lighthouse ist, verbessert eine kleine DOM-Größe die Performance und das Nutzererlebnis der Website und steigert Ihren Core Web Vitals-Score.
Gründe für eine übermäßige DOM-Größe
Eine große DOM-Größe kann Ihre Webseiten erheblich verlangsamen. Hier sind die wichtigsten Faktoren, die zu diesem Problem beitragen:
- Überladene Seiten: Eine Webseite mit zu vielen Elementen aufgrund komplexer Designs oder redundantem Code führt zu einem überladenen DOM-Baum. Dies verlangsamt nicht nur die Seite, sondern verschlechtert auch das Nutzererlebnis.
- Übermäßige Verschachtelung: Tief verschachtelte HTML-Strukturen erzeugen einen komplexen DOM-Baum, der es Browsern erschwert, die Seite effizient zu rendern. Dies führt zu langsamerer CSS- und JavaScript-Verarbeitung.
- Überladene Themes und Plugins: Themes und Plugins fügen oft unnötige Elemente wie JavaScript oder CSS hinzu. Viele Themes bringen Standardfunktionen mit, die das DOM aufblähen, während Plugins zusätzliche Skripte und Styles einführen können, die die Ladezeit erhöhen, selbst wenn diese Funktionen nicht genutzt werden.
Übermäßige DOM-Größe identifizieren: Tools und Techniken
Das Verständnis und die Verwaltung der DOM-Größe Ihrer Website sind entscheidend für optimale Performance. Hier sind einige Tools und Techniken, die Ihnen helfen, dieses Problem zu identifizieren und zu beheben:
1. Google Lighthouse
Google Lighthouse ist ein kostenloses Open-Source-Tool, das hilft, Performance-Probleme von Websites zu identifizieren, einschließlich übermäßiger DOM-Größe. So verwenden Sie es:
- Öffnen Sie Chrome und navigieren Sie zu Ihrer Webseite.
- Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Untersuchen", um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab „Lighthouse" und dann auf „Analyze page load."
2. Chrome DevTools
Chrome DevTools bietet eine detaillierte Ansicht des DOM Ihrer Webseite. Sie helfen, DOM-Knoten zu zählen und Elemente zu identifizieren, die zu einer großen DOM-Größe beitragen. Folgen Sie diesen Schritten:
- Öffnen Sie Ihre Webseite in Chrome.
- Klicken Sie mit der rechten Maustaste und wählen Sie „Untersuchen", um die DevTools zu öffnen.
- Sehen Sie sich den DOM-Baum im Tab „Elements" an und zählen Sie die Knoten.
3. WebPageTest
WebPageTest ist ein Online-Tool, das eine detaillierte Analyse der Performance Ihrer Webseite bietet, einschließlich einer Aufschlüsselung der DOM-Elemente. So verwenden Sie es:
- Besuchen Sie WebPageTest.org.
- Geben Sie Ihre Webseiten-URL ein.
- Klicken Sie auf „Start Test".
4. GTmetrix
GTmetrix ist ein weiteres wertvolles Tool, das die Performance Ihrer Webseite analysiert, einschließlich der DOM-Größe. So verwenden Sie es:
- Gehen Sie zu GTmetrix.com.
- Geben Sie die URL Ihrer Webseite ein.
- Klicken Sie auf „Test your site" und prüfen Sie den detaillierten Bericht mit Fokus auf DOM-bezogene Kennzahlen.
5. PageSpeed Insights
PageSpeed Insights von Google bietet Einblicke in die Performance Ihrer Webseite, einschließlich Problemen mit der DOM-Größe. So verwenden Sie es:
- Besuchen Sie PageSpeed Insights.
- Geben Sie Ihre Webseiten-URL ein.
- Klicken Sie auf „Analyze" für einen detaillierten Bericht zur Performance Ihrer Webseite mit konkreten Empfehlungen zur Optimierung der DOM-Größe.
Mit diesen Tools können Sie die DOM-Größe Ihrer Website effektiv diagnostizieren und für bessere Performance optimieren.
Das Problem einer übermäßigen DOM-Größe beheben: Tipps und Tricks
Bevor Sie die Warnung „Avoid excessive-DOM size" beheben können, müssen Sie ihre Ursachen identifizieren.
Verwenden Sie zunächst Google Lighthouse, um die maximale DOM-Tiefe und die maximalen Kindelemente zu ermitteln. Verwenden Sie dann den DOM-Inspektor Ihres Webbrowsers, um das DOM zu überprüfen.
Ihr Ziel ist es, herauszufinden, was die übermäßige Anzahl von DOM-Knoten verursacht.
1. Schlecht codierte Plugins und Themes vermeiden
Die Verwendung eines Plugins wie einer Timeline, eines Kalenders oder eines Sliders, das zu viele DOM-Knoten erzeugt, kann Ihre Website verlangsamen. Um die Leistung zu verbessern, ersetzen Sie es durch ein effizienteres Plugin.
Ebenso können schlecht codierte Themes und Vorlagen die Geschwindigkeit Ihrer Website beeinträchtigen. Sie können Ihre Website verbessern, indem Sie unnötigen Code mit einem schlanken Editor entfernen oder Ihre Vorlage anpassen.
2. JavaScript-DOM-Knoten reduzieren
JavaScript kann manchmal zu viele DOM-Knoten zu einer Seite hinzufügen und die Website verlangsamen. Zum Beispiel kann ein Chat-Widget eine übermäßige Anzahl von Knoten erzeugen.
Erwägen Sie, die problematische JavaScript-Datei zu entfernen oder zu einem effizienteren Widget zu wechseln. Diese einfache Änderung kann die Performance und Geschwindigkeit Ihrer Website erheblich verbessern.
3. Page Builder vermeiden, die übermäßiges HTML erzeugen
Page Builder wie WP Bakery, Elementor und Gutenberg können manchmal zu viele DOM-Knoten erzeugen und Ihre Website verlangsamen. Diese Tools sind hilfreich, können aber sperrigen und ineffizienten Code erzeugen.
Um dies zu beheben, bereinigen Sie den überschüssigen Code und optimieren Sie Ihren Workflow. Die Entwickler von Elementor haben kürzlich Verbesserungen vorgenommen, um Bloat zu reduzieren und die Effizienz zu steigern. Umgekehrt neigt Gutenberg dazu, saubereres HTML zu erzeugen, was zu einer schlankeren Struktur beiträgt.
Überprüfen und vereinfachen Sie Ihr HTML regelmäßig, um Ihre Website schnell und benutzerfreundlich zu halten. Dies sorgt für schnellere Ladezeiten und ein besseres Erlebnis für Ihre Besucher.
4. Das HTML Ihrer WordPress-Website optimieren
Um die Organisation des HTML Ihrer WordPress-Website zu optimieren, können Sie Folgendes tun:
Wählen Sie ein einfaches Theme wie Hello Elementor oder Elementor, das Ihre Seiten ohne unnötige Elemente sauber hält.
Überprüfen Sie Ihre Seiten und Beiträge im WordPress-Editor. Entfernen Sie nicht verwendete Shortcodes, zusätzliche div-Tags oder leere Elemente.
Klicken Sie mit der rechten Maustaste auf Ihre WordPress-Website und wählen Sie „View Page Source" oder drücken Sie „STRG + U". Suchen Sie nach sich wiederholenden Codeabschnitten, etwa mehreren div-Tags mit derselben Klasse oder denselben Stilattributen.
Navigieren Sie im WordPress-Dashboard zu „Design" → „Theme-Editor." Hier können Sie die PHP-Dateien Ihres Themes bearbeiten.
Entfernen Sie unnötig verschachtelten Code.
Nachdem Sie Änderungen vorgenommen haben, speichern Sie die Datei und testen Sie Ihre Website, um sicherzustellen, dass alles korrekt funktioniert.
Klicken Sie mit der rechten Maustaste auf Ihre Website und wählen Sie „Untersuchen". Gehen Sie zum Tab Lighthouse und klicken Sie auf „Analyze page load", um einen Bericht zu erstellen. Dieser prüft auf Warnungen zu „Avoid an Excessive DOM Size".
5. Website-Last durch Skript-Management reduzieren
Um die DOM-Größe Ihrer Website effektiv zu reduzieren, ist es wichtig, die verwendeten Skripte und Plugins sorgfältig zu verwalten. Hier ist eine Schritt-für-Schritt-Vorgehensweise:
Plugins prüfen: Überprüfen Sie alle auf Ihrer Website installierten Plugins. Identifizieren Sie, welche essenziell sind und welche nicht verwendet werden. Plugins, die nicht genutzt werden oder Ihre Website erheblich verlangsamen, sollten deaktiviert oder vollständig entfernt werden, um die Performance Ihrer Website zu optimieren.
Skripte optimieren: Erwägen Sie Plugins wie WP Rocket oder Asset CleanUp. Diese Tools helfen, indem sie Skripte minimieren und kombinieren. Minimieren entfernt unnötige Zeichen aus dem Code, ohne dessen Funktion zu ändern.
Im Gegensatz dazu reduziert das Kombinieren von Skripten die Gesamtzahl der Dateien, die der Browser eines Nutzers herunterladen muss, wodurch Anfragen reduziert und die DOM-Größe minimiert werden.
Tipps zur Reduzierung der DOM-Größe für bessere Performance
Sind Sie neugierig, wie Sie die DOM-Größe Ihrer Website reduzieren können? Hier sind einige praktische Tipps:
- Lazy Loading und Infinite Scroll verwenden – Lazy Loading verzögert das Laden bestimmter Teile Ihrer Website, wie Bilder auf Kategorieseiten, bis sie benötigt werden. Die Begrenzung der Anzahl von Blogbeiträgen oder Artikeln auf Produktseiten auf etwa zehn kann ebenfalls die Ladezeiten beschleunigen.
- Lange Seiten in mehrere Seiten aufteilen – Anstatt eine lange Seite mit vielen Inhalten (wie Blogs, Kontaktformulare und Produkte) zu haben, erstellen Sie separate Seiten für jedes Element. Verwenden Sie eine Navigationsleiste, um sie zu verknüpfen.
- Seitenrendering mit CSS verbessern – Versuchen Sie die CSS-Eigenschaft ‚content-visibility‘. Sie veranlasst den Browser, das Rendern von Elementen zu überspringen, bis sie benötigt werden, was die Performance verbessern kann.
- CSS und JavaScript vereinfachen – Vermeiden Sie komplexe CSS-Stile und schweren JavaScript-Code. Sie können die DOM-Größe erhöhen und Ihre Website verlangsamen. Eine Vereinfachung kann einen großen Unterschied machen.
Fazit
So gehen Sie die Warnung „Avoid Excessive DOM Size" in WordPress an! Sie haben das Problem kennengelernt und Möglichkeiten zu seiner Lösung erkundet, sodass Ihre Website schlanker und reaktionsfähiger wird.
Jede Optimierung macht Ihre Website schneller, effizienter und einfacher zu nutzen. Behalten Sie diese Tipps im Hinterkopf, während Sie Ihre Webkenntnisse weiterentwickeln.
Verwandte Artikel
- So beheben Sie den WordPress-Fehler „Sidebar wird nicht angezeigt"
- Warum ist WordPress langsam + So beheben Sie es
- Warum sind Datensicherung und Notfallwiederherstellung für WordPress notwendig?
- So reparieren und optimieren Sie die WordPress-Datenbank
- So machen Sie Änderungen in WordPress rückgängig (Revisionen, Autosaves, Snapshots)
