Einer der Aspekte, die eine gute SEO-Positionierung einer Webseite beeinflussen, ist ihre Ladeleistung. Und das ist ein Thema, bei dem die DOM-Größe einer Seite eine Schlüsselrolle spielt.

Deshalb werden wir erklären, wie ein DOM als übermäßig groß angesehen werden kann und wie man es verkleinern kann. Aber zuerst beginnen wir mit den Grundlagen und erklären, was das DOM ist und was es bedeutet, seine Größe zu reduzieren.

Fangen wir an!

 

Was ist das DOM?

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

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

Mit anderen Worten: Wenn der Browser eine Seite für die Anzeige vorbereitet, baut er auf der Grundlage der HTML-Struktur einen Objektbaum auf, der aus allen Elementen einer Seite besteht.

Jedes Mal, wenn der Browser ein HTML-Dokument empfängt, 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 verändern.

 

Wie wirkt sich die Größe des DOM auf Ihre Web-Performance aus?

In der Tat wirkt sich die Größe des DOM auf die Leistung einer Seite aus. Ein übermäßig großes DOM kann die Geschwindigkeit der Website verlangsamen, da es die folgenden Auswirkungen hat:

• Netzwerkeffizienz und Ladeleistung. Wenn das DOM übermäßig groß ist, enthält es oft HTML-Elemente, die beim ersten Laden der Seite 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 die Größe des DOM technisch reduziert werden?

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

Anstatt diesen Code zu verwenden;

<div id = ”navigation-main”>

    <ul>

            etc ..

    </ul>

</div>

Es wäre besser, diesen anderen zu verwenden;

<ul id = ”navigation-main”>

    etc ..

</ul>

Was die Baumstruktur betrifft, so müssen wir die folgenden Begriffe kennen:

• Knoten: Alle HTML-Elemente des DOM. Sie werden auch als die "Blätter" des Baums bezeichnet.
• Sekundärknoten: Die Knoten, die keine weiteren Verzweigungen haben.

Das Beste daran ist, dass die Tiefe des Baumes durch die Formgebung bestimmt wird:

• Weniger als 32 Knoten.
• Weniger als 60 Sekundärknoten pro Knoten.

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

 

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

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

Große Seiten in mehrere Seiten segmentieren

Haben Sie eine einzige Seite, die verschiedene Arten von Inhalten Ihrer Website anzeigt? Zum Beispiel Kontaktformulare, Blog-Einträge, Produkte usw.

In diesem Fall ist es besser, all diese Elemente in verschiedene Seiten aufzuteilen und sie über die Navigationsleiste zu verknüpfen.

Aktivieren Sie das Lazy-Load-Plugin und teilen Sie alle möglichen Elemente in Seiten

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 Höchstzahl von Beiträgen wäre 10 pro Seite. Diese Praxis gilt auch für die Anzahl der Produkte, die auf jeder Seite erscheinen sollten.

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

Wir empfehlen auch, die Anzahl der verwandten Publikationen auf eine maximale Anzahl von drei oder vier zu beschränken.

Entfernen unnötiger Elemente, die im Standard-Arbeitsplatzthema enthalten sind

In einigen Fällen kann es notwendig sein, bestimmte Elemente zu entfernen, die standardmäßig in Ihrem WordPress-Theme enthalten sind, z. B. die Schaltfläche "In den Warenkorb" auf Produktseiten, das Veröffentlichungsdatum, Autoreninformationen usw.

Überprüfen Sie die Konfiguration des WordPress-Themas, 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 kodierte Themen oder Seitenersteller

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

Seitenersteller fügen oft auch 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 die Benutzer verwenden und was bei ihnen nicht funktioniert. Die Durchführung einer genauen Analyse ist grundlegend, um die richtige DOM-Größe zu erhalten.

Schlussbemerkungen

Eine übermäßige Dom-Größe beeinträchtigt die Leistung Ihrer Website und verlangsamt die Ladezeit der Seite. Halten Sie Ihre

Einfache HTML-Struktur ohne unnötige Elemente. Überprüfen Sie Ihren DOM-Baum und entfernen Sie die Knoten, die keinen Mehrwert für Ihre Website darstellen. Sie werden nicht nur Ihre Website beschleunigen, sondern auch eine bessere Benutzerfreundlichkeit bieten.

Google wird die Größe des DOM zweifelsohne in der Aktualisierung der Page Experience berücksichtigen, die in den kommenden Monaten veröffentlicht wird. Stellen Sie sicher, dass Sie eine angemessene Größe haben, damit Ihre Web-Performance nicht beeinträchtigt wird.

Zuletzt aktualisiert am 18. Oktober 2022 von Hannah Dango