Oder in GTmetrix "Reduzieren Sie die Anzahl der DOM-Elemente":
Was ist DOM?
Wenn Ihr Browser ein HTML-Dokument empfängt, muss es in eine Baumstruktur umgewandelt werden, die zum Rendern und Zeichnen mit CSS und JavaScript verwendet wird.
Diese Baumstruktur wird DOM oder Document Object Model genannt.
- Knoten Alle HTML-Elemente im DOM werden Knoten genannt. (auch bekannt als "Blätter" am Baum).
- Tiefe – Wie lange ein „Ast“ in einen Baum hineinreicht, wird als Tiefe bezeichnet. Im obigen Diagramm hat das img-Tag beispielsweise eine Tiefe von 3. (HTML -> body -> div -> img).
- Untergeordnete Elemente – Alle Kindknoten eines Knotens (ohne weitere Verzweigung) sind Kinder.
Lighthouse und Google PageSpeed Insights beginnen mit dem Markieren von Seiten, wenn eine der folgenden Bedingungen erfüllt ist:
- Insgesamt mehr als 1500 Knoten haben.
- Haben Sie eine Tiefe von mehr als 32 Knoten.
- Der übergeordnete Knoten hat mehr als 60 untergeordnete Knoten.
Wie wirkt sich die DOM-Größe auf die Leistung aus?
Eine übermäßige DOM-Größe kann die Leistung auf unterschiedliche Weise beeinträchtigen.
- Höhere Parse- und Renderzeit (FCP) . Ein großer DOM-Baum und komplexe Stilregeln leisten dem Browser hervorragende Arbeit. Der Browser muss den HTML-Code analysieren, den Renderbaum erstellen usw. Jedes Mal, wenn der Benutzer interagiert oder sich etwas im HTML-Code ändert, muss der Browser dies erneut berechnen.
- Erhöht die Speichernutzung - Ihr JavaScript-Code verfügt möglicherweise über Funktionen zum Zugriff auf DOM-Elemente. Ein größerer DOM-Baum zwingt JavaScript, mehr Speicher zu verwenden, um sie zu verarbeiten. Ein Beispiel wäre ein Abfrageselektor, in
document.querySelectorAll('img')die alle Bilder auflistet, die üblicherweise von Lazy-Loading-Bibliotheken verwendet werden. - Erhöht TTFB – Je größer das DOM wird, desto größer wird das HTML-Dokument (in KB). Da mehr Daten über das Netzwerk übertragen werden müssen, erhöht sich die TTFB.
Wie kann man die DOM-Größe technisch reduzieren?
Zum Beispiel ist es technisch einfach, die Größe des DOM zu reduzieren:
Verwendung:
<ul id="navigation-main">etc..</ul>anstatt:
<div id="navigation-main"><ul>etc..</ul></div>Entfernen Sie grundsätzlich alle möglichen HTML-Elemente. Sie können auch Flexbox oder Grid verwenden, um die DOM-Größe weiter zu reduzieren.
Aber da Sie WordPress verwenden, wird Ihnen das nicht viel helfen!
Wie kann man die DOM-Größe in WordPress reduzieren?
Teilen Sie große Seiten in mehrere Seiten auf
Haben Sie eine Seite mit allem auf der Website? Wie Dienstleistungen, Kontaktformulare, Produkte, Blogbeiträge, Erfahrungsberichte usw.?
Versuchen Sie, sie auf mehrere Seiten aufzuteilen und über die Kopfzeile/Navigationsleiste darauf zu verlinken.
Faules Laden und Paginieren von allem Möglichen
Lazy Loading aller Arten von Elementen. Hier sind einige Beispiele:
- YouTube-Video lädt langsam - Verwenden Sie WP YouTube Lyte oder Lazy Load von WP Rocket.
- Begrenzen Sie die Anzahl der Blogbeiträge/Produkte pro Seite – Normalerweise versuche ich, maximal 10 Blogbeiträge pro Seite zu behalten und den Rest zu paginieren.
- Lazy Loading Blog-Posts/Produkte – Fügen Sie eine Schaltfläche „Mehr laden“ oder eine unendliche Bildlaufleiste hinzu, um weitere Blog-Posts oder Produkte zu laden.
- Lazy Loading Kommentare - Ich verwende das bedingte Laden von Disqus, da ich Disqus verwende. Wenn Sie Ihre eigenen Kommentare verwenden, verwenden Sie Plugins wie Lazy Load for Comments .
- Paginierung von Kommentaren - Wenn Sie Hunderte von Kommentaren haben, kann dies auch die DOM-Größe beeinflussen. Um Kommentare zu paginieren, gehen Sie zu Einstellungen -> Diskussion -> Kommentare paginieren.
- Begrenzen Sie die Anzahl verwandter Beiträge – Versuchen Sie, die Anzahl verwandter Beiträge auf 3 oder 4 zu begrenzen.
Hinweis: Lazy Loading-Bilder reduzieren die Größe des DOM nicht
Verstecken Sie keine unerwünschten Elemente mit CSS
Manchmal müssen Sie möglicherweise Elemente entfernen, die von einem Design/Designer eingeführt wurden. Fügen Sie beispielsweise auf den Produktseiten einen Button zum Warenkorb hinzu, einen Bewertungsbutton, Autoreninformationen, Veröffentlichungsdatum usw.
Eine schnelle Lösung besteht darin, sie mit CSS auszublenden:
.cart-button {display:none;}Auch wenn diese Lösung einfach aussieht, setzen Sie Benutzer unerwünschtem Code aus (der sowohl HTML-Markup als auch CSS-Styling enthält).
Überprüfen Sie Ihre Design-/Plugin-Einstellungen, um festzustellen, ob es eine Option zum Entfernen gibt. Suchen Sie andernfalls den relevanten PHP-Code und entfernen/kommentieren Sie ihn aus.
Verwenden Sie gut geschriebene Themen und Seitenersteller
Ein gutes Thema spielt eine wichtige Rolle bei der DOM-Größe. Verwenden Sie gut geschriebene Themen wiePresse erzeugen oderAstra .
Seitenersteller führen auch zu viele Divs ein. Verwenden Sie Konstruktoren wieSauerstoff, die keine unerwünschten div-Blöcke einführen und mehr Kontrolle über die HTML-Struktur haben.
Fazit
Möglicherweise gibt es weitere Plugins oder Designeinstellungen, die zu viele Divs einführen. Ein Beispiel wären "Mega-Menü"-Plugins wie UberMenu.
Manchmal sind sie entscheidend für die Benutzererfahrung Ihrer Website. Aber manchmal werden sie nie von Benutzern verwendet.
Vielleicht werden Ihre Footer-Links nie angeklickt, weil die meisten Besucher nur bis zu 75 % scrollen.
Verwenden Sie Tools wie HotJar oder Google Analytics Events, um herauszufinden, was Besucher tatsächlich verwenden und was nicht.Analysieren, messen und wiederholen.
