Schlüssel zum Reduzieren der DOM-Größe einer Website

Einer der Aspekte, die das Erreichen einer guten SEO-Positionierung auf einer Webseite beeinflussen, ist die Ladeleistung. Und das ist ein Thema, bei dem die DOM-Größe einer Seite eine entscheidende Rolle spielt.

Deshalb werden wir erklären, wie ein DOM als übermäßig groß angesehen werden kann und wie es reduziert werden kann.

Lass uns anfangen!

Was ist das DOM?

Einfach ausgedrückt, wenn wir über das DOM sprechen, beziehen wir uns auf die Struktur der Objekte, die der Browser jedes Mal generiert, wenn er eine Seite lädt . Seinen Namen verdankt es dem Akronym Document Object Model.

Es ist eine hierarchische Struktur, in der es verschiedene Objekte gibt, von denen einige von anderen abhängen. Die Struktur ähnelt einem Baum, da es das Hauptobjekt gibt, von dem andere sekundäre Elemente abhängen. Das DOM stellt die HTML-Struktur der Seite als Baum dar , der aus einer Reihe von Tags besteht.

Mit anderen Worten, wenn der Browser eine Seite vorbereitet, um sie uns anzuzeigen, baut er einen Objektbaum auf, der aus allen Elementen einer Seite basierend auf ihrer HTML-Struktur besteht.

Jedes Mal, wenn der Browser ein HTML-Dokument erhält, muss er es in diese baumartige Struktur umwandeln, die wir DOM oder DOM-Baum nennen. Der JavaScript-Code kann auf dieses DOM zugreifen und es ändern.

Wie wirkt sich die DOM-Größe auf Ihre Webleistung aus?

Die Wahrheit ist, dass die Größe des DOM die Leistung einer Seite beeinflusst. Ein zu großes DOM kann die Geschwindigkeit der Website verlangsamen , da es folgende Auswirkungen hat:

• Netzwerkeffizienz und Lastleistung. Wenn das DOM zu groß ist, enthält es häufig HTML-Elemente, die beim ersten Laden der Seite durch den Benutzer nicht sichtbar sind, was den Datenverbrauch unnötig erhöht und das Laden der Website verlangsamt.
• Laufzeitleistung. Wenn Benutzer und Skripte mit einer Seite interagieren, muss der Browser die Position und den Stil der HTML-Tags ständig neu berechnen.
• Speicherleistung . Wenn der DOM-Baum zu groß ist, benötigt der Browser möglicherweise mehr Speicher, um ihn zu verarbeiten.

Wie kann man die Größe des DOM technisch reduzieren?

Um die DOM-Größe so zu reduzieren, dass sie die Web-Performance nicht negativ beeinflusst , müssen Sie alle nicht benötigten HTML-Elemente entfernen . Wie wir gesehen haben, gibt es mehrere Gründe, warum die Seite verlangsamt wird, wenn wir nicht die erforderlichen Maßnahmen ergreifen.

Anstatt diesen Code zu verwenden;

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

Es wäre besser, dieses andere zu verwenden;

 <ul id = ”navigation-main”>   etc .. </ul>

In Bezug auf die Baumstruktur müssen wir die folgenden Begriffe kennen:

• Knoten : Alle HTML-Elemente des DOM. Sie werden auch als „Blätter“ des Baumes bezeichnet.
• Sekundäre Knoten : Diejenigen Knoten, die keine Zweige mehr haben.

Das Beste ist jedoch, dass die Tiefe des Baums gebildet wird durch :

• Weniger als 32 Knoten.
• Weniger als 60 sekundäre Knoten pro Knoten.

Google empfiehlt, dass bei der Entwicklung von Websites Seiten weniger als 1.500 DOM-Knoten enthalten sollten, was bedeutet, dass die Designs nicht zu komplex sein sollten.

So reduzieren Sie die Größe des DOM in WordPress

Es gibt mehrere Möglichkeiten, die Größe des DOM in WordPress zu reduzieren:

Segmentieren Sie große Seiten in mehrere Seiten

Haben Sie eine einzelne Seite, auf der verschiedene Arten von Inhalten Ihrer Website angezeigt werden? Zum Beispiel Kontaktformulare, Blogbeiträge, Produkte etc.

In diesem Fall ist es besser , all diese Elemente auf verschiedenen Seiten zu klassifizieren und sie über die Navigationsleiste zu verknüpfen.

Aktiviere das Lazy-Load-Plugin und teile alle möglichen Elemente in Seiten auf

Sie können ein Lazy-Loading-Modul in allen Elementen aktivieren, die dies zulassen. Sie können dies mit Videos von YouTube tun, indem Sie Youtube Lite oder Lazy Load von WordPress WP-Rocket verwenden.

Es ist auch wichtig, die Anzahl der Beiträge pro Blogseite zu begrenzen . Eine vernünftige maximale Anzahl von Beiträgen wäre 10 pro Seite. Diese Praxis gilt auch für die Anzahl der Produkte, die auf jeder Seite erscheinen sollen.

Es besteht die Möglichkeit, die Anzahl der Beiträge pro Seite zu ändern. Gehen Sie zum Menü „Einstellungen“ > Untermenü „Lesen“, ändern Sie die Anzeige der Blog-Seiten mit dem höchsten Wert und speichern Sie die Änderungen .

Wir empfehlen außerdem, die Anzahl verwandter Publikationen auf maximal drei oder vier zu beschränken.

Entfernen Sie unnötige Elemente, die im Standard-WP-Design enthalten sind

In einigen Fällen kann es erforderlich sein, bestimmte Elemente zu entfernen, die standardmäßig mit Ihrem WordPress-Theme geliefert werden , wie z. B. die Schaltfläche „In den Warenkorb“ auf Produktseiten, Veröffentlichungsdatum, Autoreninformationen usw.

Überprüfen Sie die Konfiguration des WordPress-Themes, um zu sehen, ob es eine Option zum Entfernen dieser Elemente gibt, und wenn nicht, suchen Sie nach dem entsprechenden PHP-Code, um sie zu entfernen.

Verwenden Sie gut codierte Themen oder Seitenersteller

Die Qualität des WordPress-Themes wirkt sich direkt auf die Größe des DOM aus. Daher ist es ratsam, gut codierte Themes wie Astra oder GeneratePress zu verwenden.

Seitenersteller fügen auch oft zu viele div-Tags ein, daher ist es wichtig, Lösungen wie Oxygen Builders zu verwenden, die keine unerwünschten Elemente einfügen und mehr Kontrolle über die HTML-Struktur ermöglichen.

Mit Tools wie HotJar können Sie sehen, was Benutzer verwenden und was für sie nicht funktioniert. Das Ausführen einer genauen Analyse ist von grundlegender Bedeutung, um die richtige DOM-Größe zu ermitteln.

Abschließende Gedanken

Eine übermäßige Dom-Größe beeinträchtigt Ihre Webleistung und verlangsamt die Ladezeit der Seite. Halten Sie Ihre HTML-Struktur ohne unnötige Elemente einfach . Überprüfen Sie Ihren DOM-Baum und entfernen Sie die Knoten, die Ihrer Website keinen Mehrwert verleihen. Sie beschleunigen nicht nur Ihre Website, sondern bieten auch eine bessere UX.

Google wird die DOM-Größe zweifellos im Page Experience-Update berücksichtigen, das in den kommenden Monaten veröffentlicht wird. Stellen Sie sicher, dass Sie einen angemessenen haben, damit er Ihre Webleistung nicht beeinträchtigt.