Wie erstellt ein Browser eine Webseite?

Als technischer SEO ist es wichtig zu verstehen, wie ein Browser eine Webseite erstellt. Dies kann später unter anderem dabei helfen, den Unterschied zwischen der menschlichen und der Suchmaschinen-Bot-Interpretation einer Seite zu verstehen oder Probleme mit der Seitengeschwindigkeit zu diagnostizieren. Ich werde es mit Blick auf die Verbesserung der Seitengeschwindigkeit betrachten.

Dies ist der erste dieser Serie von 4 Artikeln über die Phasen der Browsererstellung beim Erstellen einer Seite und deren Auswirkungen auf Pagespeed.

Um Inhalte anzuzeigen, muss jeder Browser die DOM- und CSSOM-Prozesse abschließen, bevor er den Rendering-Baum zum Erstellen einer Webseite erstellt.

DOM oder Document Object Model wird aus HTML-Markup erstellt. Das DOM ist eine Datendarstellung der Elemente, aus denen die Struktur und der Inhalt der Webseite bestehen. Diese Darstellung wird von verschiedenen Programmen wie JavaScript-Skripten verwendet, die entweder die Struktur, den Inhalt oder beides ändern können.

CSSOM wird durch CSS MarkUp wie Animation, Keyframe, Medienabfragen zusammen mit Selektoren, Eigenschaften und Werten semantisch parallel zum DOM erstellt.

Dies ist ein Screenshot des ersten Webbrowsers der Geschichte. Es kann kein Javascript rendern und hat nicht viele CSS-Eigenschaften. Es kann auch keine modernen HTML-Regeln verwenden. Das Ausprobieren dieser Art von primitiven Webbrowsern (wie Lynx) kann Ihnen helfen, Browser-Engines und ihre Natur in Bezug auf die Webleistung zu verstehen. Sie können diese Seite besuchen!

Wie wird das DOM von einem Browser erstellt?

Kein Browser sieht Inhalte oder Quellcode auf einer Seite so wie Menschen. Zunächst wird alles auf dem preDOM in Bytes angezeigt. Anschließend konvertiert es die Bytes in bestimmte Zeichen und löst, was sie bedeuten, um die Seitenstruktur als Hierarchie zu bilden.

Hinweis: preDOM ist die Version des DOM, die im Quellcode erscheint und noch nicht vom Browser gelesen und verarbeitet wurde. Das preDOM wird dann vom Browser gelesen und interpretiert:

1. Unter Verwendung des 'charset'-Codes Ihrer Datei konvertiert der Browser die Bytes in Zeichen.
2. Der "Tokenisierungs"-Prozess wird eingeleitet, um sinnvolle Befehle für benachbarte Zeichen zu erstellen.
3. Generierte Token werden in Objekte umgewandelt und erhalten Regeln und Eigenschaften gemäß HTML5-Standards. (Mit anderen Worten, es konvertiert sie in Knoten.)
4. Der DOM-Konstruktionsprozess wird gestartet. Jedes HTML-Tag wird ineinander platziert, bildet eine Hierarchie und erstellt die Struktur der Webseite.

Verbesserung der DOM-Leistung: Warum ist sie so wichtig?

Bevor ich Ihnen einige Tipps gebe, müssen Sie die DOM Load Event-Typen und ihre Bedeutung verstehen.

Hier sind einige der DOM-Ereignistypen bei der Webseitenerstellung

• domLoading : Ausgangspunkt des DOM-Prozesses.
• domInteractive : Ende des DOM-Prozesses.
• domContentLoaded : Ende der DOM- und CSSOM-Prozesse. An diesem Punkt ist der Browser bereit, den Rendering-Baum zu erstellen. Außerdem sollte die JavaScript-Ausführung normalerweise an dieser Stelle beginnen.
• domComplete : Das Herunterladen aller Ressourcen der Seite ist abgeschlossen.
• loadEvent : Nachdem das Herunterladen von Ressourcen abgeschlossen und die Seitenstruktur erstellt wurde, werden alle vorhandenen „onload“-JS-Ereignisse ausgelöst.

Wenn Sie nur die DOM-Prozesszeit berechnen möchten, sollten Sie sich auf das domInteractive-Ereignis konzentrieren. Dieses Ereignis wird jedoch nicht in den devTools von Chrome angezeigt. Sie können Ihr IT-Team für die PerformanceNavigationTiming-API verwenden oder konsultieren, die alle diese Ereignisse sowie zusätzliche Unterereignisse wie domContentLoadedEventStart berechnen kann.

Sie können sich auch die domInteractive-Einstellungen in Google Analytics > Verhalten > Website-Geschwindigkeit > Seiten-Timings > DOM ansehen. Allerdings sind die Informationen hier nicht besonders stabil und zuverlässig. Dennoch kann es Ihnen einen Anfangspunkt geben.

Sie können das interaktive DOM-Timing auch mit DevTools berechnen, jedoch nur mit Konsolencodes. Es ist eine etwas langsame Methode, aber Sie können die Codebibliothek „performance.timing“ ausprobieren. Oben sehen Sie auf der linken Seite performance.timing, das die meisten Leistungsmetriken anzeigt. Hier sind nur die letzten drei oder vier Ziffern wichtig. Wenn Sie eine benutzerdefinierte Metrik sehen möchten, z. B. DOMInteractive, können Sie performance.timing.domInteractive – performance.timing.responseStart schreiben. Auf der rechten Seite werden jeweils DOMInteractive, DOMComplete und die Gesamtseitenladezeit angegeben.
Das Beispiel stammt von derselben Nachrichtenseite.

In diesem Artikel reichen das domContentLoaded-Ereignis und DevTools für unsere Zwecke aus.

Beachten Sie, dass sich die Zeiten von domInteractive und domContentLoaded nicht so stark voneinander unterscheiden, wenn Ressourcen korrekt organisiert und geladen sind. Denn die eigentliche Herausforderung besteht darin, JS-Dateien und CSS-Dateien voneinander zu trennen, ohne das HTML-Parsing zu unterbrechen oder einen Flaschenhals im Haupt-Thread zu erzeugen. Wenn Sie dies erfolgreich tun können, werden wahrscheinlich sowohl das DOM als auch das CSSOM (domContentLoaded Event) am schnellsten ausgelöst.

Ein Beispiel-DOM aus einem HTML-Dokument

DOM Prozessoptimierung und Tipps

Wenn wir 2019 und davor wären, würde ich sagen, dass Sie als technischer SEO-Experte nicht wissen müssen, wie man codiert.

Aber im Jahr 2020 und darüber hinaus müssen Sie tatsächlich etwas Programmieren auf Anfängerniveau beherrschen. Um zu verstehen, wie ein Dokumentobjektmodell oder eine HTML-Knotenstruktur optimiert wird, müssen Sie es mit genügend Erfahrung untersuchen, um eine neue Codestruktur zu erstellen.

Hier sind einige Tipps zur Optimierung der DOM-Größe:

1. Untersuchen Sie den vorhandenen DOM-Knotenbaum und versuchen Sie, unnötige HTML-Knoten zu finden . Wenn Sie beispielsweise irgendwelche oder mit der Klasse „display: none“ sehen, sollten Sie sie entfernen.
2. Sie können Ihrem IT-Team raten, mehr ::before- und ::after-Pseudoelemente zu verwenden, anstatt neue HTML-Knoten zu erstellen.
3. Versuchen Sie, sich auf große übergeordnete HTML-Elemente mit vielen untergeordneten Elementen zu konzentrieren. Steuern Sie Ihre CSS-Klassen und ihre Effekte, um kürzere HTML-Knoten zu erstellen, während Sie daran arbeiten, HTML-Elemente zu vereinheitlichen.
4. Wenn Sie Ihre HTML-Knotenstruktur mit JavaScript aufrufen, können Sie auch DOM-Änderungshaltepunkte für Teilbaumänderungen verwenden oder Ihrem IT-Team empfehlen, um festzustellen, welche Knoten welchen Initiator ändern.
5. Wenn Sie die HTML-Knotengröße nicht verkleinern können, sollten Sie vielleicht über die Verwendung von Shadow DOM nachdenken oder, je nach Ihrer JS-Bibliothek und Ihren Rendering-Technologien, vielleicht an Virtual DOM interessiert sein.
6. Sie sollten auch die serverseitigen Komprimierungstechnologien gzip, brotli oder deflate in Betracht ziehen .
7. Sie können Ihre HTML-Dokumentation komprimieren, indem Sie Leerzeichen für eine bessere und schnellere Unterstützung der Browsergeschwindigkeit entfernen.

Verwenden von Virtual DOM

Sie können verschiedene DOM-Typen für eine bessere Seitengeschwindigkeit, UX und ein besseres Crawl-Budget verwenden. Ein Beispiel ist Virtual DOM.

Virtual DOM lädt nur die Teile des DOM, die sich ändern, wenn eine neue Seite geöffnet wird, anstatt alle DOM-Elemente neu zu laden. Dies schafft eine schnellere und leichtere Seitendarstellung für den Benutzer oder Suchmaschinen-Bot.

Virtual DOM funktioniert gut mit den JavaScript-Bibliotheken Vue oder React.

Warum ist die DOM-Leistung für technisches SEO wichtig?

Die DOM-Größe steht in direktem Zusammenhang mit der Seitengeschwindigkeit und dem ersten Kontakt mit dem Benutzer.

Wenn Sie eine große DOM-Größe haben und kein Shadow DOM oder ähnliche vorbeugende Methoden verwenden, um das Laden und Gestalten aller HTML-Knoten zu vermeiden, die während des anfänglichen Ladens der Seite nicht sichtbar sind, werden Sie wahrscheinlich Ihren Geschwindigkeitsindex und die anfängliche Kontaktgeschwindigkeit für verzögern Benutzer.

Ein kurzer Vergleich zwischen Browsern für Reflow-Prozesse.

Wenn Ihr DOM groß ist, werden Sie wahrscheinlich unter einem Browser -Reflow leiden.

Reflow bezieht sich auf die Größenänderung, das Styling oder das Malen und Positionieren eines HTML-Elements im Re-Rendering-Prozess. Wenn sich ein übergeordnetes HTML-Element ändert, sind auch die untergeordneten Elemente betroffen. Die Länge und Anzahl dieser Art von HTML-Elementketten kann Ihre Seitengeschwindigkeit beeinträchtigen.

Reflow-Schleifen können Ihr Crawl-Budget beeinträchtigen, die Belastung des Servers und des Netzwerks erhöhen. Dies kann sich folglich auf die Conversion-Rate und sogar auf das Ranking auswirken.

Google hat tatsächlich ein nettes und kurzes Präsentationsvideo zu diesem Thema veröffentlicht:

Wie erstellt ein Browser das CSSOM und die Rendering-Struktur?

Browser neigen dazu, den CSSOM-Prozess nach Abschluss des DOM-Prozesses zu starten.

Da moderne Browser wissen, dass das DOM keinen Sinn macht, bis CSSOM abgeschlossen ist, werden einige HTML-Elemente vom Browser erst angezeigt, wenn er die Style-Codes gelesen hat. Ein gutes Beispiel hierfür wäre das CSS-Hintergrundbild.

Oben ist ein Beispiel für ein CSS-Code-Snippet, das umgestaltet werden muss. Die Eigenschaft „Zoom“ wird mehr als 19 Mal für verschiedene Selektoren verwendet. Sie können vereinheitlicht werden.

Wie wird der CSSOM-Prozess von modernen Browsern gestartet und abgeschlossen?

1. Der Browser folgt der Schleife für Bytes, Zeichen, Token und Standardregeln (Knoten), die generiert wird, wenn das DOM erstellt wird.
2. Der Browser gleicht jedes DOM-Element mit dem CSS-Element ab, das es beeinflusst. Dieser Vorgang wird „Stil“ genannt.
3. Nach dem Mapping bestimmt der Browser die Abmessungen jedes DOM-Elements nach CSS-Regeln in einer hierarchischen Struktur. Da sich die Größe des übergeordneten Elements auch auf die untergeordneten Elemente auswirkt, sind hierarchisch codierte CSS-Dateien für die Seitengeschwindigkeit nützlich. Dieser Vorgang wird „Layout“ genannt.
4. Der Visual DOM-Prozess wird gestartet. Alle Bilder, Rahmen und Farben werden nach CSS-Regeln gemalt. Dieser Prozess wird in verschiedenen Schichten durchgeführt.
5. Composite ist die letzte Stufe von CSSOM. Der Browser fasst alle Maloperationen in verschiedenen Ebenen zusammen.

Sie können CSS-Eigenschaften und ihre Kosten für die Browser-Engine über CSS-Trigger in Bezug auf verschiedene Browser-Engines überprüfen.

So optimieren Sie den CSSOM-Prozess

1. Als technischer SEO sollten Sie sich zunächst auf komplexe CSS-Selektoren und gemeinsame Eigenschaften konzentrieren. Mit anderen Worten, wenn ein CSS-Selektor mehr als 3 untergeordnete Elemente hat, sollten Sie versuchen, ihn zu kürzen, oder Sie sollten ihn Ihrem IT-Team zur CSS-Refaktorierung melden. Gegenseitige Eigenschaften bedeuten, dass Ihr IT-Team möglicherweise dieselben CSS-Eigenschaften für verschiedene Klassen und IDs verwendet. Sie sollten versuchen, sie für eine kleinere CSS-Dateigröße zu vereinheitlichen.
2. Finden Sie heraus, ob Ihr IT-Team CSS-Dateien komprimiert oder nicht.
3. Versuchen Sie für jede Kategorie und jeden Abschnitt Ihrer Website , häufig verwendeten CSS-Code und häufig ungenutzten CSS-Code zu finden . Empfehlen Sie Ihrem IT-Team, CSS-Dateien für eine bessere Ressourceneffizienz aufzuteilen.
4. Suchen Sie nach wichtigen Codes in Ihren CSS-Dateien. Sie machen wahrscheinlich einen nachfolgenden Code unnötig.
5. Versuchen Sie festzustellen, ob Ihre CSS-Dateien eine parallele hierarchische Struktur in Bezug auf Ihre HTML-Knoten haben. Wenn sie parallel sind, ist Ihr Rendering-Baum für Browser einfacher zu konstruieren.
6. Versuchen Sie, die Anzahl der HTML-Elemente zu reduzieren, die neu gestaltet oder in der Größe geändert werden müssen . Bilder sind ein gutes Beispiel dafür.
7. Sie können Ihrem IT-Team raten , die Funktionen und Eigenschaften „Contain“, „Will-change“, „CSS Scope“ für eine bessere Browserleistung zu verwenden.
   Die Eigenschaft „Contain“ bestimmt den Umfang des HTML-Elements und die CSS-Effekte, die es erhält. Auf diese Weise wird der Rest von DOM nicht beeinflusst. Die Eigenschaft „Will-change“ teilt dem Browser mit, welche Elemente sich auf welche Weise ändern, damit der Browser bereits vor Beginn des Prozesses Optimierungen vornehmen kann.
8. Versuchen Sie, kritischen CSS -Code einzubetten, bevor Sie blockierende CSS-Dateien rendern.
9. Versuchen Sie, dem IT-Team zu raten , keine Stilcodes in HTML-Tags zu verwenden . Dies betrifft sowohl DOM/CSSOM-Prozesse als auch das Crawl-Budget.
10. Fügen Sie Ihre Bildquelladressen nicht in die CSS-Dateien ein . Dies verstößt gegen die Indizierungsrichtlinien von Google (Chrome DevSummit 2019, How to Make Your Content Shine on Google Search, Martin Splitt).
11. Verwenden Sie die @import-Funktion nicht in CSS-Dateien . Dadurch wird eine verschachtelte zweite CSS-Anforderung erstellt.
12. Versuchen Sie, weniger externe CSS-Dateien zu verwenden, um CSSOM zu verkürzen, oder versuchen Sie, sie zu bündeln, um die DNS-Such- und Ressourcenverbindungszeiten zu verkürzen.
13. Sie können auch Ihre langen Selektoren und ihre Spezifität überprüfen. Wenn sie zu lang sind, müssen Sie sie Ihrem IT-Team melden oder Sie können versuchen, sie selbst als technischer SEO zu verbessern. Lange Selektoren und sich wiederholende unnötige CSS-Eigenschaften mit denselben Werten sind eine große Belastung für Browser und Telefon-CPUs.
    

Denken Sie daran, dass das CSSOM genau wie das DOM einen hierarchischen Baum hat. Es wendet die aktuellen Regeln zuerst auf das größte Element an, und die untergeordneten Elemente bleiben betroffen, bis der Browser den speziell für sie geschriebenen Code liest.

In CSSOM werden alle CSS-ID-, Class- und Properties- und Value-Elemente gemäß der semantischen Struktur der HTML-DOM-Elemente aufgelistet. CSSOM stammt aus demselben HTML-Dokument wie das DOM. Der Hauptgrund, warum ich in CSSOM keine HTML-Knoten angegeben habe, ist, die Aufmerksamkeit auf die hierarchische Struktur von CSS-Codes zu lenken.

Wie rendern Browser eine Seite?

Das Ausführen des CSSOM ist nicht dasselbe wie das Rendern. Wenn das DOM und das CSSOM in derselben Hierarchie gelesen werden, ist das Rendern der Prozess des Verbindens dieser beiden Codebäume von oben nach unten im Ansichtsfenster.

Während des Renderns werden einige Codeausschnitte, die während der DOM- und CSSOM-Verarbeitung vorhanden sind, möglicherweise deaktiviert. Der Hauptgrund dafür ist, dass sie nicht sichtbar sind oder durch einen anderen Code deaktiviert werden. Daher ist die Optimierung von Code, der nicht in der Rendering-Struktur enthalten ist, aber im DOM und im CSSOM angezeigt wird, für die Seitengeschwindigkeit nützlich.

Oben zeigen die DOMContentLoaded-Daten in den DevTools von Chrome die Zeit, die zum Laden und Analysieren der HTML- und CSS-Dokumente benötigt wird.

Daher führt die Konsistenz zwischen dem Performance-Haupt-Thread und den Aufrufbaumabschnitten zu engen Ergebnissen. Alle Beispiele stammen von derselben Website.

Wenn Sie nur DOM berechnen möchten, müssen Sie die domInteractive-Zeit überprüfen, die von DevTools nicht angezeigt wird, aber mit der Navigation Timing API gemessen werden kann.

Nach dem DomContentLoaded-Ereignis startet Ihr Browser den Rendering-Baum und Sie werden sehen, dass Pixel Ihrer Bildschirme mit aussagekräftigen Informationen und Design gefärbt sind. Während dieser Zeit wird auch das Javascript-Rendering ins Spiel kommen und den Rendering-Baum sofort aufteilen, ändern und neu zeichnen.

Was kommt als nächstes?

Eine richtig strukturierte Ressourcenreihenfolge, die Anzahl der Ressourcenanforderungen und die Rendering-Baum- und Javascript-Rendering-Beziehung reduzieren die Kosten in Bezug auf die Seitengeschwindigkeit.

Im nächsten Artikel dieser Reihe wird untersucht, wie dies mit erweiterten Seitengeschwindigkeitsmetriken zusammenhängt und wie Google die Seitengeschwindigkeit wahrnimmt.