Das DOM (Document Object Model) ist eine Programmierschnittstelle für HTML- und XML-Dokumente und die Bezeichnung für die Struktur eines HTML-Dokuments, die aus Verzweigungen und Knoten mit Objekten besteht.
Die Geschichte des Document Object Model geht auf die so genannten"Browserkriege" der späten 1990er Jahre zwischen Netscape Navigator und Microsoft Internet Explorer sowie JavaScript und JScript zurück, die ersten Skriptsprachen, die in den JavaScript-Engines von Webbrowsern in großem Umfang implementiert wurden.
DOM-Struktur in WordPress: Baum, Zweige und Knoten
Das DOM in WordPress unterscheidet sich nicht wesentlich von dem jeder anderen Website.
<html> <-- Árbol (nodo raíz)
│
├── <head> <-- Rama
│ ├── <title> <-- Nodo (hoja)
│ └── <meta> <-- Nodo (hoja)
│
└── <body> <-- Rama
├── <header> <-- Rama
│ └── <h1> <-- Nodo (hoja)
│
├── <div> <-- Rama
│ ├── <p> <-- Nodo (interno)
│ └── <img> <-- Nodo (hoja)
│
└── <footer> <-- Rama
└── <a> <-- Nodo (hoja)
- Baum: Die gesamte Seite wird als Baum mit einem Wurzelknoten
(<html>)
und seinen untergeordneten Elementen dargestellt. - Zweige: Jedes Element innerhalb eines
<div>,
<header>,
<footer>
usw. stellt einen Zweig des Baums dar. - Knoten: Alle HTML-Elemente, wie
<p>,
<img>
oder<a>,
sind Knoten, die an Zweigen hängen. Diese Knoten können intern (sie enthalten andere Knoten) oder extern (die "Blätter" des Baums, die keine anderen Kinder haben) sein.
Die Dichte der Verzweigungen hängt also von der Art und Anzahl der Elemente ab, aus denen sie bestehen. Zum Beispiel kann ein komplexes Navigationsmenü in WordPress aufgrund der Anzahl der Links und Untermenüs mehrere Ebenen von Verzweigungen und Dutzende von Knoten erzeugen.
Man kann sich die Knoten als alle HTML-Elemente auf einer Seite vorstellen. Je mehr Elemente Sie haben, desto länger dauert es normalerweise, was zu einer höheren Gesamtblockzeit(TBT) führt.
Die Optimierung in WordPress kann sich als schwierig erweisen, da man die DOM-Elemente, die die Struktur einer Seite bilden, nicht einfach entfernen kann. Wir können diese Elemente jedoch selektiv anzeigen und eine Reihe von Objekten unterhalb des Falzes laden, wodurch die Gesamtgröße des DOM reduziert wird.
Warum sollte die Größe des DOM reduziert werden?
Ein umfangreicher DOM-Baum kann die Ladezeit Ihrer Website in mehrfacher Hinsicht verlangsamen, die Speichernutzung durch längere und langsamere Stilberechnungen erhöhen und unnötige Datenkosten für die Benutzer verursachen.
Zu diesen verschiedenen Szenarien gehören das unnötige Laden von Knoten, die beim ersten Laden der Seite nicht sichtbar sind, die ständige Wiederholung von Berechnungen der Knotenposition und des Stils sowie die Speicherung einer übermäßigen Anzahl von Verweisen auf Knoten, die den Speicher der Geräte der Benutzer überlasten.
Die kurz- und langfristigen Vorteile der Optimierung der Seitenladegeschwindigkeit wurden bereits in Tausendundeinem Artikel erläutert. Kurz gesagt: Kurzfristig verhindern Sie, dass die Besucher Ihre Website gelangweilt verlassen, und wahrscheinlich werden sie mehr Zeit auf ihr verbringen. Die Ladegeschwindigkeit ist einer der Faktoren, die von Google bei der SEO-Positionierung anerkannt werden, und ich gehe davon aus, dass dies auch für die anderen Suchmaschinen gilt, so dass auf lange Sicht der wertvolle organische Verkehr zunehmen wird.
Wodurch wird das DOM vergrößert?
Die endgültige Größe des DOM wird von vielen Faktoren beeinflusst, z. B. von der Vorlage selbst, von den verschiedenen Plugins, die Sie verwenden, und von der Art der Inhalte, die Sie hinzufügen, wie z. B. komplexe Blöcke oder die schändlichen "Slider" von Bildern usw. . Auch der Code, der zum Beispiel von den sogenannten "Buildern" generiert wird.
Zum Beispiel, bis 2022, dem Jahr, in dem ich Elementor aufgegeben habe, weil es sich der Optimierung widersetzt hat und es selten war, dass es nicht bei fast jedem Update etwas kaputt gemacht hat, plus ein paar schlechte Erfahrungen mit dem technischen Support, hat dieser Builder den Webcode in eine echte Buchstabensuppe und einen Alptraum mit Tausenden von
Im April desselben Jahres integrierte Elementor den Flexbox "Container" als eine sehr neue und revolutionäre Neuerung, obwohl der Container bereits seit Jahren die Grundlage von GenerateBlocks war.
Wie kann man DOM messen?
Für die Messung habe ich einen Beitrag gewählt, der noch nicht sehr optimiert ist, etwas lang ist und verschiedene Arten von Elementen enthält.
Beginnen wir mit dem bekanntesten und beliebtesten: PageSpeed Insights . Google markiert dort eine Warnung(in Orange), wenn das Body-Element mehr als 800 Knoten hat, und eine Fehlerwarnung(in Rot), wenn das Body-Element mehr als 1.400 Knoten hat, sowie eine Meldung mit folgender Empfehlung:"Vermeiden Sie übermäßige DOM-Größe".
Je nach Inhalt und Struktur jeder Seite, die Sie analysieren, finden Sie mehr oder weniger Anhaltspunkte dafür, welche Elemente Sie angreifen können. Der Vorteil ist, dass in der Regel ein Bild angezeigt wird, das auf das betreffende Element verweist.
Ich möchte Sie noch einmal daran erinnern, dass es sich bei all diesen Warnungen nur um Empfehlungen handelt und dass Sie nicht in Panik verfallen oder sich von diesen Metriken besessen machen sollten. Es gibt Seiten, die ein gutes Nutzererlebnis und eine gute wahrgenommene Geschwindigkeit mit niedrigen PageSpeed-Werten bieten.
Mit GTmetrix erhalten wir im Allgemeinen die gleichen Ergebnisse auf dem DOM.
Hier ist sein "Wasserfall"-Diagramm der Anfragen jedoch sehr nützlich, um auf einen Blick alle Elemente nach Typ und Ladezeit sortiert zu sehen.
Der einfachste und schnellste Weg ist jedoch über einen beliebigen Browser. Öffnen Sie die zu analysierende Seite und klicken Sie mit der rechten Maustaste auf "Prüfen". Auf der Registerkarte "Netzwerk" finden Sie einen viel detaillierteren Wasserfall , denn Sie können ihn durch Scrollen der Seite vervollständigen und alle darin enthaltenen Dateien werden hinzugefügt. Sie können sie dann nach Gewicht, Typ, Zeit usw. sortieren.
Unterhalb dieses Fensters finden Sie eine Zusammenfassung der Ergebnisse. Auf der linken Seite die Anzahl der Anfragen. Rechts, in blau, der Zeitpunkt des Ereignisses DOMContentLoaded und in rot die Ladezeit dieser Seite.
Reduzieren Sie die DOM-Größe mit Perfmatters' "Lazy Elements".
Perfmatters, das unentbehrliche Plugin, das ich immer wieder gerne empfehle, hat in seiner Version 2.3.3 vom 28. August 2024 eine Option namens Lazy Elements hinzugefügt, die zwar noch in der Beta-Phase ist, aber sehr gut funktioniert, um die Aufgabe der Entlastung des DOM zu erleichtern.
Diese Funktion ermöglicht das Hinzufügen der fälschlicherweise als"Lazy Load" bezeichneten Funktion zu bestimmten Elementen und ihren Nachkommen (Kindern), indem ein beliebiger Teil eines Attributstrings (class="example") eines Elterncontainers hinzugefügt wird.
In der von Perfmatters zur Verfügung gestellten Dokumentation zu dieser neuen Funktionalität wird davor gewarnt , "Lazy Load" auf Elemente anzuwenden, die sich oberhalb der Falz befinden. Das heißt, was auf dem Bildschirm geladen wird und das erste ist, was der Nutzer sieht, ohne nach unten zu scrollen.
Wenn Sie sehen, dass etwas visuell kaputt ist, stellen Sie sicher, dass Sie einen eindeutigen String auf der Seite verwendet haben, der nicht mit anderen Elementen geteilt wird.
Wie bei langsam ladenden Bildern wird der Inhalt innerhalb einer . Das bedeutet, dass alles, was langsam lädt, technisch gesehen immer noch von Google gecrawlt und indiziert werden kann. Sie können jedoch nicht mit Sicherheit sagen, wie Google Elemente mit Lazy Load in einem String behandeln wird. Aus SEO-Sicht wird daher empfohlen, zunächst zu testen.
Es wird auch davor gewarnt, Lazy Load auf Elemente anzuwenden, die Bilder enthalten, die eine "Lightbox" starten. Und so ist es, ich konnte überprüfen, dass die native WordPress-Lightbox-Funktion nicht mehr funktioniert, wenn die Klasse eines Elements, das sie implementiert, zur Liste hinzugefügt wird.
Ansonsten funktioniert "Lazy Elements" perfekt. Dank dieser Funktion habe ich eine Menge Zeit gespart Ausdünnung des DOM mit guten Ergebnissen. Ich hoffe, Perfmatters wird seine Entwicklung fortsetzen, um seine Optionen zu verbessern und zu erweitern.