Im digitalen Bereich zählt jede Sekunde. Daher ist die Leistung einer Website entscheidend für die Zufriedenheit und das Engagement der Nutzer. Eine Leistungssteigerung kann die Wahrscheinlichkeit erhöhen, Ihre Website-Ziele zu erreichen.

Eine Website mit einer großen DOM-Ausgabe erhöht die Größe des HTML, was die Leistung der Website beeinträchtigen kann. Es gibt jedoch Techniken, um die DOM-Größe Ihrer Website zu verringern. Dieser Beitrag wird darauf eingehen, wie Sie Elementor-Websites durch verschiedene Strategien zur Minimierung der HTML-Größe verbessern können.

Das Problem der „umfangreichen DOM-Größe“ verstehen

Das DOM (Document Object Model) stellt die Struktur einer Webseite dar. Eine umfangreiche DOM-Größe weist in der Regel auf eine komplexe DOM-Struktur hin, die oft durch die Verwendung von übermäßigen HTML-Elementen, verschachtelten Knoten oder dynamischen Inhaltseinschüben verursacht wird. Seiten mit einer großen Anzahl von HTML-Elementen neigen dazu, langsam zu laden und können Animationen und andere Benutzerinteraktionen beeinträchtigen.

Auswirkungen der DOM-Größe auf die Seitenleistung

Eine große DOM-Größe kann die Renderzeit erhöhen, was zu verzögertem Seitenrendering und langsameren Ladezeiten führt. Dies liegt daran, dass Browser jeden Knoten analysieren und rendern müssen. Darüber hinaus benötigt jeder DOM-Knoten Speicher im Browser, was zu einer Erschöpfung der Systemressourcen und einem erhöhten Speicherverbrauch führen kann. Dies kann zu Leistungseinbußen führen, insbesondere auf Geräten mit niedriger Leistung.

Darüber hinaus kann eine übermäßige DOM-Größe zu trägen Benutzerinteraktionen und einer verringerten Reaktionsfähigkeit während der Nutzung der Website führen. Eine hohe Anzahl von DOM-Elementen umfasst oft viele Ereignislistener, die zusätzlichen Overhead verursachen und Benutzerinteraktionen verlangsamen. Wir werden nicht alle Gründe erwähnen, aber die Faustregel lautet: Je größer die HTML-Größe, desto langsamer die Seite.

Wie misst man die DOM-Größe mit externen Tools?

Um die Auswirkungen der DOM-Größe auf die Website-Leistung zu messen, können Sie die folgenden Tools verwenden:

Google Chrome DevTools – Gehen Sie zum „Elements“-Panel, um DOM-Elemente und deren Verschachtelungstiefe zu überprüfen. Verwenden Sie die Registerkarte „Performance“, um die Rendering-Leistung zu bewerten und potenzielle Engpässe durch DOM-Manipulationen zu erkennen.

Lighthouse – Lighthouse-Audits bieten Einblicke in DOM-Größenmetriken wie „DOM Size“, „DOM Depth“ und „Maximum DOM Depth“ und weisen auf Verbesserungsbereiche hin.

WebPageTest – Bewerten Sie DOM-Größenmetriken in Wasserfalldiagrammen und Leistungsberichten, um das Verhältnis zwischen DOM-Komplexität und Ladezeiten der Seite zu verstehen.

Was gilt als große DOM-Größe?

Lighthouse markiert Seiten mit DOM-Bäumen wie folgt:

  • Warnt, wenn das <body>-Element mehr als 818 Knoten hat.
  • Fehler, wenn das <body>-Element mehr als 1.400 Knoten hat.

Diese Metriken können sich jedoch in Zukunft ändern. Darüber hinaus können verschiedene Tools unterschiedliche Schwellenwerte festlegen, um auf eine umfangreiche DOM-Größe hinzuweisen.

image 64 Elementor Performance-Tipp - Reduzieren Sie Ihre DOM-Größe, um Ihre Website schneller zu machen 1

Reduzierung der Elementor-DOM-Größe

Elementor ist ein visueller Drag-and-Drop-Website-Builder, der den Prozess des Hinzufügens von Elementen auf die Seite vereinfacht. Die Verwendung von Elementor beeinträchtigt in der Regel nicht die Leistung Ihrer Website. Es gibt jedoch Schritte, die Sie unternehmen können, um die von Ihnen erstellten Seiten weiter zu optimieren. Dazu gehört die Reduzierung der Anzahl der HTML-Elemente, die die DOM minimieren können, ohne das Design zu beeinträchtigen.

Um effektiv zu optimieren, ist es nützlich, die Struktur der Layout-Elemente von Elementor zu verstehen. Wir konzentrieren uns auf Layout-Elemente, da eine typische Seite Dutzende solcher Elemente enthält, sodass deren Optimierung eine größere Wirkung erzielt.

Es gibt drei empfohlene Techniken zur Optimierung Ihrer Layout-Elemente:

  1. Von Abschnitten/Spalten zu Containern migrieren.
  2. Container mit einzelnen verschachtelten Containern abflachen.
  3. Implementieren Sie, wo möglich, Vollbreiten- statt Boxbreiten-verschachtelte Container.

Lassen Sie uns mehr über die Reduzierung der Elementor-DOM-Größe erfahren.

Elementor-Elementtypen

Elementor hat zwei Arten von Elementen:

  • Widgets – alle regulären Elemente, die Sie zum Erstellen Ihrer Website verwenden, wie Überschrift, Bild, Symbol, Schaltfläche, Trennlinie usw.
  • Layout-Elemente – strukturelle Elemente wie Abschnitt/Spalten und Container. Diese Elemente umschließen die Widgets und gruppieren sie zusammen.

Wir werden uns auf Layout-Elemente konzentrieren, um die DOM-Größe zu reduzieren.

HTML-Struktur von Layout-Elementen

In Elementor besteht jedes strukturelle Element aus zwei <div>-Tags: einem äußeren <div> und einem inneren <div>. Dies ist wichtig zu beachten, da wir sehen werden, wie wir die Anzahl der HTML-Elemente in Ihren strukturellen Layout-Elementen reduzieren können.

HTML-Struktur von Abschnitt/Spalte:

Bei der Verwendung von Abschnitten und Spalten besteht das endgültige HTML aus zwei Layoutebenen, von denen jede zwei <div>-Elemente hat, zwei für Abschnitte und zwei für Spalten. Insgesamt umschließen wir Widgets mit vier <div>-Elementen: 

<div class="elementor-section">
	<div class="elementor-container" >

		<div class="elementor-column">
			<div class="elementor-widget-wrap">

				<!-- widget –>
				<!-- widget –>
				<!-- widget –>

			</div>
		</div>

	</div>
</div>

HTML-Struktur von Container:

Elementor hat Container eingeführt, um Seiten mit einer schlankeren Struktur und DOM zu erstellen.

Beim Wechsel zu Containern besteht das resultierende HTML nur aus zwei <div>-Elementen, nicht vier, was bedeutet, dass Sie dasselbe Design mit der Hälfte der <div>-Elemente erhalten.

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

HTML-Struktur mit Containern abflachen

In der Vergangenheit wurden Abschnitte oder Spalten verwendet, um Websites zu strukturieren. Heutzutage verwenden moderne Websites CSS-Flex und CSS-Grid, um die gleiche visuelle Struktur mit weniger Code zu erreichen. Aus diesem Grund hat Elementor Container eingeführt. Durch die Umwandlung Ihrer Strukturelemente in Container können Sie die HTML-Struktur optimieren und unnötigen Ballast beseitigen.

Während Abschnitte übereinander gestapelt sind, werden Spalten nebeneinander positioniert. Container hingegen können innere Elemente in einer Reihe oder in einer Spalte stapeln. Wir können diese Unterschiede nutzen, um einige Strukturen zu optimieren.

Wenn ein Abschnitt mehrere Spalten hat, haben die umgewandelten Strukturen einen einzigen Container in Spaltenrichtung mit mehreren Containern in Reihenrichtung. Wenn ein Abschnitt jedoch nur eine Spalte enthält, können Sie diese Struktur bei der Umwandlung in Container optimieren. Sie können eine Containerebene eliminieren, ohne das Design zu beeinträchtigen. Dies führt zu einer Reduzierung der DOM-Größe um 50 %, von vier <div> Elementen auf nur zwei. Multiplizieren Sie dies nun mit der Anzahl der Layoutelemente, die jede Seite hat, um die Auswirkungen auf Ihre Website zu berechnen.

Es ist erwähnenswert, dass Sie die DOM-Größe bei Abschnitt/Spalten-Elementen, die innere Abschnitte verschachteln, wirklich verringern können. In diesen Fällen verwendet das Element acht Ebenen von <div> Elementen, bevor das Widget angezeigt wird. Durch die Umwandlung in Container kann dies von acht Ebenen von <div> Elementen auf vier Ebenen und in einigen Fällen auf nur zwei Ebenen von <div> Elementen reduziert werden.

Wenn Sie immer noch eine Abschnitt/Spalten-Layoutstruktur verwenden, ist es an der Zeit, auf Container umzusteigen. Die Vorteile überwiegen den Aufwand, den Sie in den Migrationsprozess investieren. Um die Migration zu vereinfachen, bietet Elementor sogar eine praktische „Konvertieren“-Schaltfläche für diesen Zweck.

Boxed vs. Full Width

Eine zusätzliche Methode zur Optimierung der DOM-Größe besteht darin, zwischen Boxed-Containern und Full-Width-Containern zu unterscheiden.

Ein Boxed-Container hat eine maximale Breite, was die Verwendung eines inneren <div> in Elementor erfordert. Ein Full-Width-Container hingegen erstreckt sich zu beiden Seiten und benötigt daher nur ein <div> Element.

Boxed-Struktur:

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

Full-Width-Struktur:

<div class="e-con">

	<!-- widget –>
	<!-- widget –>
	<!-- widget –>

</div>

Optimieren der verschachtelten Containerstruktur

Da wir nun die verschiedenen HTML-Strukturen von Boxed- und Full-Width-Containern verstehen, können wir damit beginnen, die DOM-Ausgabe unserer Website zu optimieren, insbesondere Container, die andere Container verschachteln.

Der nächste Optimierungstipp lautet wie folgt: Wenn Sie einen übergeordneten Container haben, der Boxed-Breite verwendet, können Sie alle verschachtelten Container auf Full-Width setzen. Auf diese Weise erhalten Sie das gleiche Design, aber mit weniger HTML. 

<div class="e-con e-con-parent">
	<div class="e-con-inner">

		<div class="e-con e-con-child">
			…
		</div>

		<div class="e-con e-con-child">
			…
		</div>

	</div>
</div>

Die obige HTML-Struktur hat einen übergeordneten Boxed-Container. Wenn die beiden untergeordneten Container ebenfalls Boxed sind, besteht jeder aus zwei Ebenen von <div> Elementen. Wenn sie jedoch Full-Width sind, wird nur ein <div> verwendet.

Noch einmal, diese Optimierung ist nur gültig, wenn der übergeordnete Container Boxed ist.

Schlussfolgerungen

Wie Sie gesehen haben, gibt es drei einfache Strategien zur Optimierung der DOM-Größe Ihrer Layoutelemente: Ersetzen Sie Abschnitt/Spalten-Layout-Elemente durch Container; Container mit einem einzigen verschachtelten Container können abgeflacht werden; und wenn Sie verschachtelte Container verwenden und der übergeordnete Container Boxed ist, setzen Sie alle inneren Container auf Full-Width. Diese Strategien können dazu beitragen, zahlreiche unnötige <div> Elemente aus dem HTML Ihrer Website zu entfernen und die Gesamtleistung Ihrer Webseite zu verbessern.