Große DOM-Größen wirken sich stärker auf die Interaktivität aus, als Sie vielleicht denken. In diesem Leitfaden erfahren Sie, warum das so ist und was Sie dagegen tun können.
Das lässt sich einfach vermeiden: Wenn Sie eine Webseite erstellen, hat diese Seite ein Document Object Model (DOM). Das DOM stellt die Struktur des HTML-Codes Ihrer Seite dar und gewährt JavaScript und CSS Zugriff auf die Struktur und den Inhalt einer Seite.
Das Problem besteht jedoch darin, dass die Größe des DOMs Einfluss darauf hat, ob ein Browser eine Seite schnell und effizient rendern kann. Generell gilt: Je größer ein DOM ist, desto teurer ist es, diese Seite anfänglich zu rendern und ihr Rendering später im Lebenszyklus der Seite zu aktualisieren.
Dies wird auf Seiten mit sehr großen DOMs problematisch, wenn Interaktionen, die das DOM ändern oder aktualisieren, teure Layoutarbeiten auslösen, die die Reaktionsfähigkeit der Seite beeinträchtigen. Teure Layoutarbeiten können die Interaction to Next Paint (INP) einer Seite beeinträchtigen. Wenn Sie möchten, dass eine Seite schnell auf Nutzerinteraktionen reagiert, ist es wichtig, dass Ihre DOM-Größen so groß wie nötig sind.
Wann ist das DOM einer Seite zu groß?
Laut Lighthouse ist die DOM-Größe einer Seite zu groß, wenn sie 1.400 Knoten überschreitet. Lighthouse wird ab sofort Warnungen ausgeben, wenn das DOM einer Seite 800 Knoten überschreitet. Nehmen wir den folgenden HTML-Code als Beispiel:
<ul>
<li>List item one.</li>
<li>List item two.</li>
<li>List item three.</li>
</ul>
Der Code oben enthält vier DOM-Elemente: das <ul>-Element und seine drei untergeordneten <li>-Elemente. Ihre Webseite wird mit ziemlicher Sicherheit sehr viel mehr Knoten haben. Daher ist es wichtig zu wissen, was Sie tun können, um die DOM-Größen unter Kontrolle zu halten, sowie über andere Strategien zur Optimierung der Rendering-Arbeit, sobald Sie das DOM einer Seite so klein wie möglich erhalten haben.
Wie wirken sich große DOMs auf die Seitenleistung aus?
Große DOMs wirken sich auf unterschiedliche Weise auf die Seitenleistung aus:
- Beim ersten Rendern der Seite. Beim Anwenden von CSS auf eine Seite wird eine Struktur ähnlich dem DOM erstellt, das als CSS-Objektmodell (CSSOM) bezeichnet wird. Mit zunehmender Spezifität von CSS-Selektoren wird das CSSOM immer komplexer und es wird mehr Zeit für die Ausführung der erforderlichen Layout-, Stil-, Compositing- und Paint-Arbeiten benötigt, um die Webseite auf dem Bildschirm darzustellen. Dadurch erhöht sich die Interaktionslatenz für Interaktionen, die zu Beginn des Seitenaufbaus auftreten.
- Wenn Interaktionen das DOM ändern, entweder durch Einfügen oder Löschen von Elementen oder durch Ändern von DOM-Inhalten und -Stilen, kann der erforderliche Aufwand zum Rendern dieser Aktualisierung zu sehr kostspieligen Layouts, Stilen, Zusammensetzungen und Paint-Arbeiten führen. Wie beim anfänglichen Rendering der Seite kann eine höhere Genauigkeit der CSS-Selektoren das Rendering weiter erhöhen, wenn HTML-Elemente als Ergebnis einer Interaktion in das DOM eingefügt werden.
- Wenn JavaScript das DOM abfragt, werden Verweise auf DOM-Elemente im Arbeitsspeicher gespeichert. Wenn Sie beispielsweise
document.querySelectorAllaufrufen, um alle<div>-Elemente auf einer Seite auszuwählen, können die Speicherkosten beträchtlich sein, wenn das Ergebnis eine große Anzahl von DOM-Elementen zurückgibt.
All dies kann sich auf die Interaktivität auswirken, aber der zweite Punkt in der obigen Liste ist von besonderer Bedeutung. Wenn eine Interaktion zu einer Änderung am DOM führt, kann dies viel Arbeit verursachen, was zu einem schlechten INP auf einer Seite führen kann.
Wie messe ich die DOM-Größe?
Es gibt mehrere Möglichkeiten, die DOM-Größe zu messen. Bei der ersten Methode wird Lighthouse verwendet. Wenn Sie eine Prüfung durchführen, werden Statistiken zum DOM der aktuellen Seite im Abschnitt „Übermäßige DOM-Größe vermeiden“ angezeigt. auf der Seite „Diagnose“ . In diesem Abschnitt sehen Sie die Gesamtzahl der DOM-Elemente, das DOM-Element mit den meisten untergeordneten Elementen sowie das tiefste DOM-Element.
Eine einfachere Methode ist die Verwendung der JavaScript-Konsole in den Entwicklertools in einem beliebigen größeren Browser. Um die Gesamtzahl der HTML-Elemente im DOM zu ermitteln, können Sie den folgenden Code in der Konsole verwenden, nachdem die Seite geladen wurde:
document.querySelectorAll('*').length;
Wenn Sie die Aktualisierung der DOM-Größe in Echtzeit sehen möchten, können Sie auch die Leistungsüberwachung verwenden. Mit diesem Tool können Sie Layout- und Stilvorgänge (und andere Leistungsaspekte) mit der aktuellen DOM-Größe korrelieren.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Wenn die DOM-Größe den Warnschwellenwert der Lighthouse-DOM-Größe erreicht oder insgesamt fehlschlägt, müssen Sie als Nächstes überlegen, wie Sie die DOM-Größe reduzieren können, um die Reaktionsfähigkeit Ihrer Seite auf Nutzerinteraktionen zu verbessern und den INP-Wert Ihrer Website zu verbessern.
Wie kann ich die Anzahl der DOM-Elemente messen, die von einer Interaktion betroffen sind?
Wenn Sie ein Profil für eine langsame Interaktion im Labor erstellen, von der Sie vermuten, dass sie etwas mit der Größe des DOM der Seite zu tun hat, können Sie herausfinden, wie viele DOM-Elemente betroffen sind, indem Sie eine beliebige Aktivität im Profiler mit der Bezeichnung "Stil neu berechnen" auswählen. und die kontextbezogenen Daten im unteren Bereich beobachten.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Beachten Sie im obigen Screenshot, dass die Stil-Neuberechnung der Arbeit, sofern ausgewählt, die Anzahl der betroffenen Elemente anzeigt. Der Screenshot oben zeigt einen Extremfall der Auswirkung der DOM-Größe auf das Rendern einer Seite mit vielen DOM-Elementen. Diese Diagnoseinformationen sind jedoch in jedem Fall nützlich, um festzustellen, ob die DOM-Größe ein einschränkender Faktor dafür ist, wie lange es dauert, bis der nächste Frame als Reaktion auf eine Interaktion dargestellt wird.
Wie kann ich die DOM-Größe reduzieren?
Neben der Prüfung des HTML-Codes Ihrer Website auf unnötiges Markup können Sie die DOM-Größe hauptsächlich reduzieren, indem Sie die DOM-Tiefe reduzieren. Ein Signal dafür, dass Ihr DOM möglicherweise unnötig tief ist, ist, wenn Sie auf dem Tab Elemente der Entwicklertools Ihres Browsers Markup sehen, das in etwa so aussieht:
<div>
<div>
<div>
<div>
<!-- Contents -->
</div>
</div>
</div>
</div>
Wenn Sie Muster wie dieses sehen, können Sie sie wahrscheinlich vereinfachen, indem Sie Ihre DOM-Struktur vereinfachen. Dadurch wird die Anzahl der DOM-Elemente reduziert und Sie haben wahrscheinlich die Möglichkeit, Seitenstile zu vereinfachen.
Die DOM-Tiefe kann auch ein Symptom der von Ihnen verwendeten Frameworks sein. Insbesondere bei komponentenbasierten Frameworks, z. B. solchen, die auf JSX basieren, müssen mehrere Komponenten in einem übergeordneten Container verschachteln werden.
Bei vielen Frameworks können Sie jedoch das Verschachteln von Komponenten vermeiden, indem Sie sogenannte Fragmente verwenden. Zu den komponentenbasierten Frameworks, die Fragmente als Funktion anbieten, gehören unter anderem die folgenden:
Durch die Verwendung von Fragmenten im Framework Ihrer Wahl können Sie die DOM-Tiefe reduzieren. Wenn Sie Bedenken haben, welche Auswirkungen die vereinfachte DOM-Struktur auf die Gestaltung hat, können Sie moderne (und schnellere) Layoutmodi wie Flexbox oder Raster verwenden.
Weitere mögliche Strategien
Auch wenn Sie sich die Mühe machen, Ihren DOM-Baum zu vereinfachen und unnötige HTML-Elemente zu entfernen, um Ihr DOM so klein wie möglich zu halten, kann er dennoch sehr groß sein und viel Rendering-Aufwand anstoßen, da er sich als Reaktion auf Nutzerinteraktionen ändert. Wenn Sie sich in dieser Position befinden, gibt es einige andere Strategien, die Sie in Betracht ziehen können, um die Renderingarbeit einzuschränken.
Einen additiven Ansatz in Betracht ziehen
Möglicherweise sind große Teile Ihrer Seite für den Nutzer beim ersten Rendern anfangs nicht sichtbar. In diesem Fall könnte ein Lazy Loading für HTML genutzt werden, indem diese Teile des DOM beim Start weggelassen werden, aber hinzugefügt werden, wenn der Nutzer mit den Teilen der Seite interagiert, die die anfangs verborgenen Aspekte der Seite erfordern.
Dieser Ansatz ist sowohl während des anfänglichen Ladevorgangs als auch möglicherweise sogar danach nützlich. Beim erstmaligen Laden der Seite entfällt das Rendering im Voraus. Das bedeutet, dass die anfängliche HTML-Nutzlast kleiner ist und schneller gerendert wird. Dadurch erhalten Interaktionen in diesem entscheidenden Zeitraum mehr Möglichkeiten, mit weniger Wettbewerb um die Aufmerksamkeit des Hauptthreads zu laufen.
Wenn viele Teile der Seite beim Laden anfänglich ausgeblendet sind, können auch andere Interaktionen beschleunigt werden, die das erneute Rendern auslösen. Wenn das DOM jedoch durch andere Interaktionen erweitert wird, nimmt der Arbeitsaufwand für das Rendering zu, während das DOM während des gesamten Lebenszyklus der Seite größer wird.
Das Hinzufügen zum DOM im Laufe der Zeit kann schwierig sein und hat seine eigenen Vor- und Nachteile. In diesem Fall stellen Sie wahrscheinlich Netzwerkanfragen, um Daten für den HTML-Code abzurufen, den Sie als Reaktion auf eine Nutzerinteraktion der Seite hinzufügen möchten. Während laufende Netzwerkanfragen nicht auf die INP angerechnet werden, kann dies die wahrgenommene Latenz erhöhen. Wenn möglich, wird ein rotierendes Ladesymbol oder ein anderer Hinweis angezeigt, dass Daten abgerufen werden, damit Nutzer erkennen, dass etwas passiert.
Komplexität von CSS-Selektoren begrenzen
Wenn der Browser Selektoren in Ihrem CSS parst, muss er den DOM-Baum durchlaufen, um zu verstehen, wie und ob diese Selektoren auf das aktuelle Layout angewendet werden. Je komplexer diese Selektoren sind, desto mehr Arbeit muss der Browser ausführen, um sowohl das erste Rendern der Seite durchzuführen als auch den Stil und das Layout zu optimieren, falls sich die Seite infolge einer Interaktion ändert.
Das Attribut content-visibility verwenden
CSS bietet die Eigenschaft content-visibility, mit der sich DOM-Elemente außerhalb des Bildschirms verzögert rendern lassen. Wenn sich die Elemente dem Darstellungsbereich nähern, werden sie on demand gerendert. Durch die Vorteile von content-visibility wird nicht nur der Rendering-Aufwand beim ersten Rendern der Seite reduziert, sondern auch der Rendering-Aufwand für Elemente außerhalb des sichtbaren Bereichs verringert, wenn das Seiten-DOM als Ergebnis einer Nutzerinteraktion geändert wird.
Fazit
Sie können den INP-Wert Ihrer Website gut optimieren, indem Sie die DOM-Größe auf das Notwendige reduzieren. Auf diese Weise können Sie die Zeit reduzieren, die der Browser benötigt, um Layout- und Renderingarbeiten durchzuführen, wenn das DOM aktualisiert wird. Auch wenn sich die DOM-Größe nicht sinnvoll reduzieren lässt, gibt es verschiedene Techniken, mit denen Sie Rendering-Arbeiten in einer DOM-Unterstruktur isolieren können, z. B. die CSS-Begrenzung und die CSS-Eigenschaft content-visibility.
Unabhängig davon, wie Sie vorgehen, eine Umgebung zu schaffen, in der die Rendering-Arbeit minimiert und der Arbeitsaufwand für das Rendering Ihrer Seite als Reaktion auf Interaktionen verringert wird, führt dies dazu, dass Ihre Website auf Nutzer reagiert, wenn diese mit ihnen interagieren. Das bedeutet, dass der INP-Wert für Ihre Website niedriger ist, was zu einer besseren Nutzererfahrung führt.
Hero-Image von Unsplash von Louis Reed