Den Critical Rendering Path verstehen

Der Critical Rendering Path beschreibt die schrittweise Verarbeitung eines Browsers von HTML-, CSS- und JavaScript-Elementen zu gerenderten Pixeln auf dem Bildschirm des Nutzers. Also das, was im Hintergrund geschieht, wenn ein Nutzer eine Website aufruft.

Das Verst√§ndnis des Critical Rendering Paths ist wichtig f√ľr die Optimierung von Ladezeiten (bzw. der Render Performance). Denn jenachdem, wie sich eine Website zusammenbaut entstehen unterschiedliche Vor- oder Nachteile bei der Bewertung der Ladezeit.

Weitere Informationen zum Thema:

michael-hammer-bild-f√ľr-autorenbox

Autor: Michael Hammer
Position: SEO Berater
Aktualisiert:

Inhaltsverzeichnis:

Den Critical Rendering Path verstehen

Critical Rendering Path: Defintion

Der Critical Rendering Path beschreibt die schrittweise Verarbeitung eines Browsers von HTML-, CSS- und JavaScript-Elementen zu gerenderten Pixeln auf dem Bildschirm des Nutzers. Also das, was im Hintergrund geschieht, wenn ein Nutzer eine Website aufruft.

Das Verst√§ndnis des Critical Rendering Paths ist wichtig f√ľr die Optimierung von Ladezeiten (bzw. der Render Performance). Denn jenachdem, wie sich eine Website zusammenbaut entstehen unterschiedliche Vor- oder Nachteile bei der Bewertung der Ladezeit. F√ľr Interessierte gibt es weitere Informationen dazu, warum die Ladezeit einer Website enorm wichtig ist und wie man als Websitebetreiber einzelne Metriken der Core Web Vitals ordentlich misst und optimiert.

michael-hammer-bild-f√ľr-autorenbox

Autor: Michael Hammer
Position: SEO Berater
Aktualisiert:

Bestandteile des Critical Rendering Path

Bevor nachstehend die einzelnen Schritte des Critical Rendering Path dargestellt werden ist es zunächst wichtig zu verstehen, was beim Aufruf einer Website im Internet geschieht:

  • Initial Request: Ganz zu Beginn steht der HTML Request. Er beschreibt den initialen Aufruf einer Website
    • Der Browser schickt eine Anfrage an den Web Server der Website & der Web Server antwortet mit einem Header und HTML
  • Parsing: Daraufhin beginnt der Browser mit der Verarbeitung des bereitgestellten HTML Markups
    • Jedes Mal, wenn der Browser bei der Verarbeitung auf einen Link oder eine externe Ressource sto√üt (Stylesheets, Skripte, etc.), startet er einen neuen Request zur Abfrage der externen Ressource
  • Document Object Model (DOM): Bei der Verarbeitung des HTML Markups baut der Browser das Document Object Model (DOM) auf
  • CSS Object Model (CSSOM): Anschlie√üend beginnt der Browser mit dem Aufbau des CSS Object Model (CSSOM)
    • Dies geschieht durch die Verarbeitung von zuvor abgerufenem CSS Markup, welches als Link oder externe Ressource im HTML Quellcode hinterlegt ist
  • Render Tree: Sobald beide Object Models (DOM & CSSOM) verarbeitet sind, beginnt der Aufbau des Render Trees
    • Der Render Tree stellt einen Bezug zwischen DOM und CSSOM her, damit jedem HTML Element das korrekte Styling zugeordnet werden kann
  • Layout: Zuletzt wird das Layout umgesetzt
    • Es erfolgt eine Berechnung des Render Trees zur korrekten Darstellung der Position und Gr√∂√üe einzelner HTML Elemente im ViewPort des Browsers

Die 4 Bestandteile des Critical Rendering Path

  1. Das HTML Markup wird verarbeitet zu Document Object Model (DOM)
  2. Das Stylesheet Markup wird verarbeitet zu CSS Object Model (CSSOM)
  3. Der Render Tree kombiniert den DOM und das CSS und stellt so einen Bezug zwischen den beiden her
  4. Das Layout zur korrekten Position und Größe der HTML Elemente wird berechnet

Critical Rendering Path: Document Object Model (DOM)

Sobald man eine Website im Internet aufruft sendet der Browser eine Anfrage (engl. Request) an den Webserver der jeweiligen Seite. Man spricht hierbei vom „Initial Request“, also dem initialen Request beim Besuch der Website (navigiert man anschlie√üend von bspw. der Startseite auf eine andere Seite der Website, wird ein neuer Request an den Webserver gesendet und der Critical Rendering Path beginnt von vorne). Auf den Initial Request antwortet der Webserver (engl. Response) der Website mit HTML, und zwar einem HTML Header und HTML Data. Diese Antwort muss der Browser nun verarbeiten. Dabei spielt der Header Response eine untergeordnete Rolle, er enth√§lt bspw. Informationen zum Statuscode (200, wenn die Seite erreichbar ist). HTML Data hingegen beinhaltet das HTML Markup, also das Grundger√ľst einer Website. Der Browser beginnt das HTML zu verarbeiten (engl. parsing) und transformiert dieses Markup zum Document Object Model (DOM). Das DOM kann man sich als Baumdiagramm des HTML Markups vorstellen, wie im nachstehenden Screenshot dargestellt.

Weitere Informationen zum DOM

Critical Rendering Path: CSS Object Model (CSSOM)

Hat der Browser das HTML Markup in einen DOM umgewandelt, kann er die Inhalt verarbeiten. Doch zu diesem Zeitpunkt w√ľrde das Dokument sehr einheitlich aussehen – alle √úberschriften, Paragraphen, Links und sonstige HTML Elemente haben n√§mlich noch kein zugewiesenes Styling. Hier kommt das CSS Object Model (CSSOM) ins Spiel. Beim Parsen des HTML Markups sto√üt der Browser n√§mlich aller Wahrscheinlichkeit nach auf einen Link zum Stylesheet mit CSS Markup. Daher beginnt nach erfolgreichem Aufbau des DOM der Aufbau des CSSOM. In diesem Schritt werden beim DOM Aufbau abgerufene Stylesheet Markups verarbeitet und ebenfalls zu einem Baumdiagramm zusammengef√ľgt. Dieses Mal jedoch nicht f√ľr das HTML, sondern f√ľr das CSS. Auf diese Weise verarbeitet der Browser das vordefinierte Styling der Website – verschiedene Gr√∂√üen von HTML Elementen (z.B. gro√üe und kleine √úberschriften, unterschiedliche Textfarben, usw.). Doch der Aufbau des CSSOM √ľbersetzt das CSS Markup der Stylesheets lediglich in das Baumdiagramm von Object Models. Der Bezug zwischen DOM und CSSOM ist noch nicht hergestellt, das geschieht erst im n√§chsten Schritt.

Weitere Informationen zum CSSOM

Critical Rendering Path: Render Tree

Der Render Tree kombiniert DOM und CSSOM und stellt so den Bezug zwischen HTLM Element und Styling her. Auch hier geht der Browser ganz logisch vor: Er beginnt beim obersten DOM Element des Baumdiagramms und sucht nach passenden¬† Stylings im CSSOM. Dies wiederholt er immer wieder bis er am letzten DOM Element angekommen ist. An diesem Punkt ist der Render Tree abgeschlossen und der Bezug zwischen HTML Elementen und Styling hergestellt. √úberschriften haben die gew√ľnschte Gr√∂√üe, Texte die gew√ľnschte Farbe, die Abst√§nde zwischen HTML Elementen sind geregelt, … . Man k√∂nnte meinen der Aufbau der Seite ist abgeschlossen. Nicht ganz. Denn es fehlt noch der Bezug zur Position und Gr√∂√üe der einzelnen Elemente bei der Darstellung im ViewPort des Browsers. Hierf√ľr ist eine Kalkulation notwendig, die im n√§chsten Schritt erledigt wird.

Weitere Informationen zum Render Tree

Critical Rendering Path: Layout

Damit gestylte HTML Elemente ordentlich auf unterschiedlichen Bildschirmen dargestellt werden, muss das Layout berechnet werden. Erst dann k√∂nnen eizelne Pixel in der korrekten Skalierung auf dem Bildschirm verschiedener Endger√§te dargestellt werden. Ausgehend vom Render Tree wird beim Layout ein sogenanntes „Box Model“ berechnet, welches die noch fehlende Gr√∂√üe und Position aller Elemente erfasst. Dabei k√∂nnen die Ma√üe einzelner Elemente theoretisch in absoluten Zahlen angegeben werden und als die meisten Nutzer im Internet mit Computern und Bildschirmen gesurft hat auch weit verbreitet. Zu diesen Zeiten w√§re die Berechnung des Layouts an diesem Punkt bereits abgeschlossen. Aufgrund der steigenden Vielfalt an Ger√§ten mit denen Nutzer im Internet surfen werden Websites allerdings responsive gebaut, sodass sie sich unterschiedlichen ViewPorts anpassen k√∂nnen. Die Ma√üe werden daher relativ angegeben. Ein HTML Element soll bspw. 50% der breite des ViewPorts einnehmen – egal, wie gro√ü der ViewPort ist. Daher werden nach der Berechnung des Box Models nun die relativen Ma√üe in absolute Pixel auf dem Bildschirm des Endger√§ts umgewandelt. Dieser Schritt wird auch als „painting“ oder „rastering“ bezeichnet.

Weitere Informationen zum Layout

Weitere Informationen

Artikel zum Thema Ladezeiten

0 Kommentare

Dein Kommentar

An der Diskussion beteiligen?
Einfach einen Kommentar schreiben
Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.