Optimierung des DOM

Eine große und ineffiziente Seitenstruktur (Document Object Model, also DOM) kann Ihre Website erheblich verlangsamen und die Metriken der Core Web Vitals negativ beeinflussen. Ihre Struktur auf eine vernünftige Größe zu reduzieren und sie maximal effizient zu gestalten, ist absolut entscheidend für die gesamte technische Leistung Ihres Projekts und wird sich auf die Reaktionsgeschwindigkeit von Interaktionen (INP-Metrik) auswirken.

In diesem Text teile ich die Erkenntnisse, die ich in meiner langjährigen Praxis als Berater über das DOM gesammelt habe. Sie werden erfahren, warum seine Gesamtgröße von Bedeutung ist, wie man sie leicht messen kann und wie man die HTML-Struktur für schnelleres Rendering optimiert.

Größe ist entscheidend#

Das DOM, also die Baumstruktur der Komponenten, wächst im realen Leben einer Website immer schnell. Elemente hinzuzufügen und sie zu verschachteln ist in HTML einfach. Daher ist es wichtig, bewusst zu bremsen.

Das DOM wird als zu groß angesehen, wenn es viele Elemente oder tiefe Verschachtelungen hat. Google empfiehlt als Maximum 1.400 Elemente.

Das ist ziemlich streng, besonders bei größeren Websites wie E-Commerce oder Anwendungen. Nach unserer Erfahrung kann ein Browser mit 2.500 DOM-Elementen immer noch recht flott umgehen.

Sobald die Anzahl der DOM-Elemente diese Grenze überschreitet, wird alles schnell kompliziert. Natürlich, je kleiner und effizienter es ist, desto besser.

Warum muss das DOM effizient sein?#

Es ist wichtig zu verstehen, dass HTML in der ersten Phase der Vorbereitung durch den Browser lediglich eine Zeichenkette strukturierter Text ist. Diese wird idealerweise auf dem Server zuerst zusammengesetzt, anschließend in den Browser heruntergeladen und vom Browser in eine dynamische Baumstruktur umgewandelt. Dies geschieht im Rahmen des „Parsen“.

Schema des Rendering-Prozesses. Aus HTML wird durch Parsen das DOM. Nach der Verbindung mit CSS erfolgt die Berechnung des Layouts und die Darstellung auf dem Bildschirm.

Das ist bei weitem nicht alles. Die Erstellung des DOM erfolgt im Rendering-Prozess am Anfang. Der Rendering-Prozess hat mehrere Schritte, und so wirkt sich die Ineffizienz des DOMs überall negativ aus.

1. Auf dem Server
   Je komplexer das DOM, desto mehr Daten und Datenbankabfragen. HTML wird länger zusammengesetzt, was die TTFB-Metrik verlangsamt.

2. Übertragung von HTML in den Browser
   Mehr Daten werden länger über das Netzwerk übertragen und verlangsamen Metriken wie FCP oder LCP, also die Ladegeschwindigkeit.

3. Parsen der HTML-Zeichenkette und Aufbau des DOM
   Mehr Elemente werden vom Browser länger in die Baumstruktur umgewandelt.

4. Anwendung von Styles und Layout-Berechnung
   CSS-Selektoren werden auf mehr Elemente angewendet und verlängern auch die Berechnung ihres Layouts.

5. Darstellung auf dem Bildschirm
   Diese Phase optimiert der Browser ziemlich gut, aber auch hier können aufgrund eines großen DOMs Probleme auftreten. Es hängt davon ab, wie mit CSS gearbeitet wird.

6. Bei jeder Interaktion
   Das DOM ist lebendig und reagiert auf Benutzereingaben und JavaScript. Ein großes DOM benötigt mehr Zeit, um Änderungen auf dem Bildschirm anzuzeigen.

Ein effizientes DOM verringert den Druck auf den gesamten Rendering-Prozess und nicht nur das. Auch auf der Serverseite wird es Einsparungen geben.

Info: Das Verständnis des Renderings ist der Schlüssel für eine schnelle Website. In unseren Schulungen zeigen wir Ihnen, wie dieser faszinierende Mechanismus Schritt für Schritt funktioniert.

Wie testet man die Komplexität des DOM?#

Es gibt mehrere Methoden, um herauszufinden, wie es um Sie steht:

Lighthouse-Bericht#

Einer der Berichte des Lighthouse-Tools gibt die Gesamtanzahl der DOM-Elemente auf der Seite, die maximale DOM-Tiefe und die maximale Anzahl verschachtelter Elemente an.

Die Ausgabe des Lighthouse-Tools sehen Sie beispielsweise in unserem Detailbericht des Testlaufs.

DevTools-Konsole im Browser#

Eine weitere Methode ist die DevTools-Konsole. Bei einer geladenen Seite genügt es, das folgende Stück Code auszuführen.

[...document.querySelectorAll('*')].length;

In Google Chrome sieht es so aus:

Das Bild zeigt das Ergebnis der Ausführung des Skripts. Auf der Seite befinden sich 932 Elemente.

Anzahl der DOM-Elemente im „Technischen“ Bericht#

In unserem Monitoring PLUS erfassen wir die Anzahl der DOM-Elemente für jede gemessene Seite. Im Diagramm ist dann zu sehen, wie sich die Website im Laufe der Zeit entwickelt hat.

Diagramm aus dem Technischen Bericht, das die Entwicklung der Anzahl der DOM-Elemente im Laufe der Zeit zeigt. Es ist auch zu sehen, wie das Monitoring einen Fehler auf der Homepage erkennt, bei dem der Inhalt nicht korrekt gerendert wurde.

Optimierung des DOM#

Unsere Empfehlungen werden Ihre Sichtweise auf die HTML- und DOM-Struktur von heute verändern. Sie werden anfangs vielleicht sogar etwas schockieren. Wenn es darauf ankommt, muss das DOM nicht einmal bei wirklich komplexen Seiten groß sein.

Löschen Sie alles, was nicht im Code sein muss, wenn die Seite geladen wird#

Am effektivsten ist es, alles zu löschen und lazy zu laden, was nicht im Code sein muss. Wie erkennt man, was gelöscht werden kann? Stellen Sie sich einfach diese Fragen:

1. Hat die Komponente einen signifikanten Informationswert?
   Roboter können mit einigen Komponenten überhaupt nicht umgehen, beispielsweise mit Formularen und Filtern. Es ist also nicht notwendig, sie in ihrem gesamten Umfang im Standardcode zu haben.

2. Handelt es sich um ein rein visuelles Element?
   Visuelle Elemente müssen auch textuell im Code erklärt werden, um einen maschinellen Informationswert zu haben. Beispiele sind dynamische Diagramme, Karten.

3. Welchen Mehrwert hat die Komponente für den Hauptinhalt?
   Oft überladen wir Websites mit verschiedenen Zusatzinformationen. Beispiele sind Chats, seitliche Kontaktboxen, oft ganze Sidebars oder Fußzeilen. Diese müssen oft auch nicht im Standard-DOM sein.

4. Ist es spezifisch nur für einen bestimmten Benutzer?
   Wenn Sie solchen Inhalt löschen, erhöhen Sie erheblich auch die Wahrscheinlichkeit der Cachebarkeit. Beispiele sind Boxen für Benutzerprofile und Warenkorb, zuletzt besuchte Produkte.

5. Wird der Inhalt in irgendeiner Komponente dupliziert?
   Solche Komponenten blähen das DOM nur unnötig auf. Technisch war die Duplizierung für Entwickler einst die einzige richtige Möglichkeit. Das ist heute mit modernem CSS nicht mehr der Fall. Oder duplizierte Komponenten können generiert und mit JavaScript gerendert werden, wenn sie benötigt werden. Ein typisches Beispiel ist das Hauptmenü, das oft zweimal im Code vorhanden ist. Einmal für Mobilgeräte und einmal für Desktops.

Beispiel für eine korrekte Lösung auf alza.cz. Das Benutzermenü erscheint im DOM erst, nachdem auf das Dropdown geklickt wurde. Beim Schließen wird es wieder entfernt.

Vereinfachen Sie Komponenten, solange sie nicht sichtbar sind#

Auch wenn eine Komponente oder ihr Inhalt für SEO oder Zugänglichkeit wichtig ist, bedeutet das nicht, dass sie beim ersten Rendering in voller visueller Qualität vorhanden sein muss. Besonders wenn die Komponente nicht im ersten Viewport sichtbar ist.

Wie viele Komponenten sieht der Benutzer tatsächlich? Einige von ihnen sind hinter einer Interaktion versteckt, z. B. Megamenüs, andere Komponenten sieht er erst beim Scrollen. Benötigen Sie wirklich alle Komponenten in HTML in ihrer endgültigen Form?

Die Optimierung durch Aufteilung in einfache und reichhaltige Komponenten ist besonders effektiv bei Elementen, die mehrfach auf der Seite wiederholt werden. Das sind typischerweise Navigationsseiten, Produktauflistungen oder andere Angebote, wie Sie auf dem Bild sehen:

Ein anschaulicheres Beispiel ist der folgende Code, der zeigt, wie man mit Intersection Observer eine reichhaltigere Version der Komponente lädt:

import React from 'react';
import { useInView } from 'react-intersection-observer';

const Offer = ({ images, title }) => {
  const { ref, inView, entry } = useInView();

  return (
    <article className="offer" ref={ref}>
      <div className="gallery">
        {!inView ? <Image data={images[0]} /> : <ImagesCarousel data={images} />}
        <h3>{title}</h3>
      </div>
    </article>
  );
};

In Übereinstimmung mit dem wichtigen Inhalt und dem resultierenden HTML werden Sie feststellen, dass das Grundgerüst des DOMs ziemlich einfach sein kann. Die visuelle Fülle kann während des Benutzerbesuchs im Frontend ergänzt werden.

Optimieren Sie lange Listen und Tabellen#

Lange Listen oder große Tabellen wird der Browser immer lange rendern. Der Inhalt muss in einer vernünftigen Länge gehalten werden. Eine Liste mit 100 Produkten nützt niemandem.

Der Inhalt muss immer paginiert werden, und wenn Sie unendliches Scrollen verwenden möchten, verwenden Sie das virtuelle Scrollen, um DOM-Elemente wiederzuverwenden, oder entfernen Sie nicht mehr sichtbare Elemente aus dem DOM und reservieren Sie Platz für sie.

Vereinfachen Sie die Struktur der Komponenten#

Im UI werden oft viele Komponenten erstellt. Mit den heutigen modernen Möglichkeiten von HTML und CSS benötigen wir immer weniger umhüllende Elemente, die nur eine Layoutaufgabe erfüllen.

Ein typisches Beispiel für Verschwendung ist die Sternewertung und die unnötige Erweiterung des DOMs mit einzelnen „Sternen“:

// Schlecht
<StarRating>
  <SVGStar />
  <SVGStar />
  <SVGStar />
  <SVGStar />
  <SVGStar />
</StarRating>

Eine ähnliche Sache könnte mit einem einzigen Element gelöst werden, dem eine Breite und ein sich wiederholender Hintergrund zugewiesen werden.

Optimierung des DOM: Praxisbeispiele#

Als Geschwindigkeitsberater haben wir zahlreiche erfolgreiche DOM-Optimierungen durchgeführt.

DOM kann nahezu in jedem Projekt optimiert werden, da es oft nicht unter direkter Aufsicht steht. Schauen wir uns zwei Optimierungen an, die sehr geholfen haben und einen positiven Einfluss auf die INP-Metrik hatten.

Optimierung des Megamenüs#

Bei Benu.cz haben wir nach Konsultationen mit SEO-Experten mit der Optimierung des Megamenüs begonnen, das auf jeder Seite fast 3.000 Elemente hatte.

Die Optimierung konzentrierte sich auf die Reduzierung verschachtelter Unterkategorien. Weniger wichtige Kategorien werden lazy geladen, wenn der Benutzer sie benötigt.

Was sehen Sie auf dem Bild?

1. Die Auswirkungen der Optimierung sind auf bestimmten Seiten sichtbar.
2. Auf der gesamten Domain ändert sich die Verteilung der INP-Metrik seit der Implementierung der Optimierung.

Platzhalter für vereinfachte Komponenten#

Megaubytovanie.sk ist ein inhaltlich ziemlich umfangreiches Projekt. Es handelt sich um eine Art „tschechoslowakisches Booking“. Die Website ist auf dem React-Framework aufgebaut und enthält eine große Anzahl von Navigationsblöcken mit Angeboten.

Wir haben vorgeschlagen, vereinfachte Komponenten zu verwenden, die beim Laden der Seite nur für SEO wichtige Daten bereitstellen. Dieser Zustand ist dem Benutzer visuell verborgen. Die „reichhaltige Variante“ wird aktiviert, wenn die Komponente im Viewport angezeigt wird.

Auswirkung der DOM-Optimierung auf die INP-Metrik für eine Seite mit Angebotsauflistungen.

Vorsicht bei CLS#

Bei der Optimierung des DOMs achten Sie auf die Stabilität des Layouts, damit die Beschleunigung des Renderings keine Probleme mit der CLS-Metrik verursacht.

Vergessen Sie nicht, für lazy geladene und vereinfachte Komponenten immer Platz im Layout mit Platzhaltern zu reservieren. Besondere Aufmerksamkeit sollten Sie der Entfernung von Komponenten während des Scrollens widmen.

Scrollen wird bei der CLS-Metrik nicht als Benutzeraktion angesehen, und so wäre eine Layoutverschiebung in diesem Moment stark bestraft.

Fazit#

Das DOM ist das Gerüst, das DOM ist alles.

Nirgendwo sonst können Sie auf einmal so viel optimieren wie hier. Daher sollten Sie ihm genügend Aufmerksamkeit schenken, es wird sich definitiv lohnen.

Ein effizientes DOM erhöht die Relevanz des Inhalts, durch TTFB erhöhen Sie die Indexierungschancen, und beschleunigen Ihr Produkt. All dies wird zu höheren Konversionen führen.