DOM-Größe

Schlüssel zur Reduzierung der DOM-Größe einer Website

Victor Perez Vas

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

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

Fangen wir an!

 

Was ist das DOM?

Einfach gesagt, wenn wir über das DOM sprechen, meinen wir damit die Struktur der Objekte, die der Browser jedes Mal erzeugt, wenn er eine Seite lädt. Sie verdankt ihren Namen dem Akronym Document Object Model.

Dokument-Objektmodell
Bildquelle: Wikipedia

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 das Hauptobjekt gibt, von dem andere Nebenobjekte abhängen. Das DOM repräsentiert die HTML-Struktur der Seite als Baumdie 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.

Eenn 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?

Web-Performance

Die Wahrheit ist, dass die Größe des DOM die Leistung einer Seite beeinflusst. Ein übermäßig großes DOM kann die Geschwindigkeit der Websiteverlangsamen.da sie folgende Auswirkungen hat:

  • Netzwerkeffizienz und Lastverhalten. Wenn das DOM übermäßig groß ist, enthält es oft HTML-Elemente, die beim ersten Laden der Seite durch den Benutzer nicht sichtbar sind, wodurch der Datenverbrauch unnötig erhöht und das Laden der Seite verlangsamt wird.
  • Laufzeit-Performance. 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?

Reduzierung der DOM-Größe, so dass sie sich nicht negativ auf die Web-Performance auswirktmüssen Sie alle HTML-Elemente entfernen, die nicht erforderlich sind.. Wie wir gesehen haben, gibt es mehrere Gründe, warum es die Seite verlangsamen würde, 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, 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 sind auch als die 'Blätter' des Baumes bekannt.
  • Sekundäre Knoten: Die Knoten, die keine Verzweigungen mehr haben.

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

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

Google empfiehlt bei der Entwicklung von Websites, dass die Seiten Folgendes enthalten weniger als 1.500 DOM-KnotenDas bedeutet, dass die Entwürfe 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 auf verschiedenen Seiten klassifizieren und verlinken sie über die Navigationsleiste.

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

Sie können ein faules Lademodul aktivieren in allen Elementen, die dies erlauben. Sie können dies mit Videos von YouTube, mit Youtube Lite oder Lazy Load von WordPress WP-Rocket tun.

Außerdem ist es wichtig die Anzahl der Beiträge pro Blog-Seite begrenzen. Eine vernünftige Höchstzahl von Stellen 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 um bestimmte Elemente zu entfernen, die standardmäßig mit Ihrem WordPress-Thema geliefert werdenwie z.B. die Schaltfläche "In den Warenkorb" auf den Produktseiten, Publikationsdatum, 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-Themas wirkt sich direkt auf die Größe des DOM aus. Daher ist es ratsam, gut kodierte Themen wie Astra oder GeneratePress zu verwenden.

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 schadet Ihrer Web-Performance und verlangsamt die Ladezeit der Seite. Behalten Sie Ihre Einfache HTML-Struktur ohne unnötige Elemente. Überprüfen Sie Ihren DOM-Baum und entfernen Sie die Knoten, die Ihrer Website keinen Mehrwert bringen. Sie werden nicht nur Ihre Website schneller machen, sondern auch ein besseres UX anbieten.

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. 

Verbreite die Liebe

Weitere großartige Artikel

@johnmu startet seine Präsentation auf der Google Webmasters Conference Tel Aviv

Wichtige Ankündigungen von der Google Webmaster-Konferenz Tel Aviv 2019

Am 4. Dezember hatten wir die großartige Gelegenheit, an der Google-Webmaster-Konferenz in Tel Aviv, Israel, teilzunehmen. Diese Konferenzen...

Geschichte lesen

Tag eins nach einer Standortmigration: Wie überwachen Sie Ihre neue Website effektiv?

Es gibt viele Gründe, Ihre Website zu migrieren, von der Änderung des Designs, des Backends, der Navigation oder der Struktur bis hin zum Umzug...

Geschichte lesen
Protokollanalyse

Das Was, Warum und Wie der Protokollanalyse

Wissen Sie, wie die Log-Analyse Ihre SEO verbessern kann? Lernen Sie die Vorteile der Analyse Ihrer Log-Dateien kennen und wie...

Geschichte lesen
Pfeil nach oben

Bevor Sie gehen...

Wenn Sie keine Tipps und Updates von FandangoSEO mehr verpassen wollen, abonnieren Sie unseren Newsletter.

+5000 SEO vertrauen Sie uns, treten Sie der Gemeinschaft bei