Diese Meldung zur Verbesserung deiner Webseite hast du möglicherweise schon einmal in einer Software wie dem Google Lighthouse Test, GTmetrix oder einem anderen Programm als Empfehlung bekommen.
GTmetrix schreibt z. B. als Hinweis zu dieser Meldung:
A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows.
Zu Deutsch: Ein großes DOM erhöht den Speicherverbrauch, führt zu längeren Stilberechnungen und verursacht kostspielige Layout-Neuanordnungen.
Vereinfacht: je mehr DOM Elemente (d)eine Webseite hat, desto mehr muss gerechnet werden, um sie (korrekt) anzuzeigen.
Und rechnen braucht Zeit, kostet Geld und lässt den Besucher eventuell unnötig lange warten, bis er mit der Seite endlich etwas anfangen kann.
Was sind DOM Elemente?
- DOM steht für Document Object Model
- es handelt sich um eine Programmierschnittstelle
- es ist ein plattform- und sprachenunabhängiges Bindeglied
- und wurde vom W3C entwickelt
Die DOM Struktur ist die „Baum-Struktur“ einer Webseite. Man kann sich jedes Element einer Webseite als Knotenpunkt in dieser Baumdarstellung vorstellen.
Also jede Überschrift, jedes Bild, jedes Element in einer Liste, die Liste selbst, jedes umschließende Element (Wrapper) stellt ein Element dar.
Man kann sich das so vorstellen:
- du öffnest eine Webseite
- von hier aus werden die DOM Elemente geladen, z. B. der Header der Seite
- in diesem Header sind das Logo, die Navigation mit den einzelnen Menüpunkten und Unterpunkten, eventuell weitere Elemente wie Telefonnummer o. ä.
- außerdem wird der Body, der Seiteninhalt geladen
- auch hier gibt es Bereiche (Sektionen) mit ihren vielfältigen Elementen, die alle korrekt aufgeführt, aufgeschlüsselt und geladen werden müssen
- zum Schluß geschieht dasselbe mit dem Footer
Jeder Bereich ist für sich schon ein Knotenpunkt und verzweigt sich weiter, je nachdem, welche und wie viele Elemente in ihm vorhanden sind.
Wenn es dir leichter fällt, kannst du dir das wie eine MindMap vorstellen, die von einem zentralen Punkt aus wichtige, grobe Themen anspricht und dann in feinere und kleinere Elemente zerfällt. Das ist kein identischer Vergleich, aber nützlich.
Was hat es mit den DOM Elementen auf sich?
Wenn du dir vorstellst, dass alle Bereiche einer Webseite und alle kleineren Einzelteile, also jeder Textabsatz, jedes Icon, jedes Bild etc. sich wie ein Baum oder eine MindMap darstellt, wenn man sie aufzeichnen würde, dann werden einige Dinge klar:
- je kleiner dieser Baum ist, desto einfacher ist er zu erfassen
- so einen kleinen Baum aus Elementen kann ein Browser schneller berechnen
- kleine DOM Bäume lassen sich damit schneller anzeigen / die Webseite ist schneller fertig geladen (Faktoren wie DNS, Hosting, Preload, Prefetch, Caching etc. lassen wir gerade außen vor, da eine geringe DOM Größe immer sinnvoll ist)
- das spart Ressourcen, denn die Rechenleistung muss ja erledigt werden
- je größer so ein DOM Baum ist (viele verschachtelte Elemente, nicht korrekte Verwendung der Standards und Best Practices etc.), desto länger dauert also die Berechnung und die Anzeige, bis eine Seite geladen ist
- je länger es dauert, bis die Seite geladen ist und mit ihr interagiert werden kann, misst man als den Wert „Time to Interactive“ und dieser sollte so niedrig wie möglich sein, um Nutzer zufrieden zu stellen
Aus all diesen Punkten – und es gibt noch weitere – erschließt sich, dass eine kleine DOM Größe vorzuziehen ist.
Ein realitätsnahes Beispiel
Stell dir vor, du hast Geburtstag.
Und deine Freunde erlauben sich den alten Spaß, dass sie dein Geschenk einpacken. Mehrfach.
Also ist dein Geschenk – ein Kugelschreiber oder ein Überraschungsei – in einem Karton in einem Karton in einem Karton in einem Karton in einem Karton in einem Karton in einem Karton. (allein das zu lesen ist schon lästig)
Das ist für ein Geschenk sicherlich einmal ein großer Spaß; du bekommst einen großen Karton, packst ihn freudig aus, bis du den nächsten Karton in der Hand hast und immer so weiter machst, bis du endlich nach vielen vielen Schachteln das eigentlich wichtige Element, dein Geschenk, in der Hand hältst.
Was einmal sicherlich witzig ist, wird sehr lästig, wenn alle deine Geschenke so eingepackt sind. Vielleicht verlierst du auch die Lust, jetzt alles auszupacken, weil es dich zu viel Zeit und Nerven kostet.
Exakt so geht es der Suchmaschine
Die Suchmaschine kommt auf deine Webseite.
Sie entdeckt deine Inhalte, die in Schachteln (Sections, Divs, Flex Div etc. / Containern) untergebracht sind.
Wenn du eine gute Webseite hast, benötigst du nur das Minimum an Schachteln. Deckel auf: Geschenk drin. Freude. Alles super einfach und man kann schnell weiter gehen zum nächsten Geschenk.
Häufig werden Webseiten allerdings mehr zusammengebastelt, als ordentlich erstellt. Die Schuld liegt aber nicht allein an den Menschen, die das dann als Ergebnis abliefern, sondern auch an den „Pagebuildern“ mit denen sie das tun, weil diese häufig ihre Bausteine versaubeuteln und ein ordentliches Arbeiten damit kaum möglich ist.
Am häufigsten sieht man leider bei Webseiten, dass Elemente wie Überschriften, Text, Bilder etc. mehrfach verschachtelt / eingepackt sind und es das überhaupt nicht braucht.
Stell dir also mal vor, die Suchmaschine, die deine Seite gerade besucht, muss für sehr viele Bereiche ganz viele Schachteln öffnen. So wie du beim Öffnen der mehrfach eingepackten Geschenke.
Eine Suchmaschine nutzt ihre eigenen Ressourcen, Strom und Rechenleistung, um deine Webseite zu verstehen und zu interpretieren, worum es geht, um sie für relevante Suchanfragen anzuzeigen.
Wie viel Lust hat so eine Suchmaschine, ständig alle Schachteln zu öffnen? Es geht ja schließlich um ihr Geld, was Suchmaschinenbetreiber ausgeben, wenn sie deine Seite crawlen und indexieren.
Die letzte mir bekannte Information ist, dass Google nach 1.500 DOM Elementen je Seite aufhört, sich den Rest anzuschauen.
Angenommen, dein Pagebuilder verschachtelt jede Überschrift insgesamt 5x, jedes Textelement ebenfalls, Bilder 6x und Aufzählungslisten 3x, dann erreicht man diese Anzahl schon recht früh.
Diese Seite, die du gerade liest, hat 342 DOM Elemente. Weil das System dahinter zu den besseren gehört und auf unnötige Schachteln verzichtet wird.
Und trotzdem haben wir
- nur 1 Bild
- 9 Überschriften
- 47 Absätze
- 1 Zitat
- 5 Aufzählungslisten
- einen Header und
- einen Footer
Besseres SEO durch bessere Grundlagen
Du siehst also anhand dieser Beispiele, dass eine Seite, die sauber programmiert ist, schneller und einfacher verarbeitet werden kann und damit dem Webbrowser, der Suchmaschine und deinen Nutzern entgegen kommt.
Gerade bei der Suchmaschinenoptimierung kannst du also einen schlechten technischen Aufbau nicht einfach lösen, außer du setzt auf ein System, was von Haus aus die Möglichkeit bietet, sauber zu arbeiten.
Natürlich muss dein Dienstleister dann auch mit dem System umgehen können, denn das beste System nützt nichts, wenn der Anwender nicht weiß, was zu tun ist.
Aber wenn du einen guten Dienstleister hast, der auch noch das richtige System verwendet – dann baust du eine Basis auf, die andere nicht schlagen können.
Was ist ein gutes System?
Wenn du mit WordPress arbeitest, gibt es genau eine Antwort:
Etch liefert die Möglichkeit, besser als mit jedem anderen System semantisch korrekte und sauber programmierte Webseiten zu erstellen.
Der typische Pagebuilder Benutzer, der Elementor, Divi, WPBakery, Thrive etc. gewohnt ist, wird damit kaum klarkommen, weil seine gewohnte Arbeitsweise hier nicht bedient wird.
Etch ist für Menschen und Agenturen, die ihren Kunden das bestmögliche Ergebnis liefern wollen.
Ich selbst werde zukünftig auch mehr und mehr mit Etch arbeiten, bis es meine gewohnten Systeme ersetzt.
Die Plätze zwei und drei
Die Plätze zwei und drei kann man an diese beiden Systeme geben:
- Bricksbuilder, wenn man einen Pagebuilder möchte
- GenerateONE (Generatepress und Generateblocks), wenn man mit einem Gutenberg Editor arbeiten möchte
Nutzerfreundlicher, aber im Rahmen dieses Artikels technisch schlechter, ist KadenceWP. Insgesamt auch sehr gut, sehr sauber und ein starker zweiter Platz, wenn es um Gutenberg Editoren geht.
Aber danach wird es dünn. Egal, ob Pagebuilder oder Gutenberg Systeme. Und Vanilla Gutenberg ist ebenfalls kein empfehlenswertes System.
Heben wir einen letzten Deckel
Wer das Problem mit einer exzessiven DOM Größe lösen will, muss die Struktur seiner Webseite grundlegend überdenken und darf keine Systeme verwenden, die alles zigfach verschachteln.
Es bringt auch nicht viel, den Inhalt von Webseiten zu kürzen, damit eine Suchmaschine wieder alles crawlt und indexiert, wenn das Problem ein von Haus aus technisch schlechter Unterbau ist.
Wer nicht in den alten Systemen feststecken möchte und (wieder) mit WordPress arbeite, dem bleibt nur eine Wahl: Etch.
Kein anderes System ermöglicht derzeit ein so sauberes, korrektes und granulares Arbeiten.
Und wer Etch* mit ACSS* kombiniert, lebt nicht nur leichter, sondern spart sich Geld und Zeit. Und beides wird immer knapper, je älter man wird. Deshalb lieber nicht auf schöne Marketingversprechen hören, sondern unter die Haube schauen.
