Kritischer Rendering-Pfad: Was es ist und wie man es optimiert

Wenn wir darüber sprechen, Benutzern ein ultraschnelles Weberlebnis zu bieten, konzentrieren wir uns oft nur darauf, was wir als Websitebesitzer und Webentwickler tun sollten.

Aber die Wahrheit ist:

Die Bereitstellung eines schnellen Weberlebnisses erfordert auch viel Arbeit des Browsers.

Es empfängt unsere HTML-, CSS- und JavaScript-Dateien und unternimmt bestimmte Schritte, um sie in Pixel auf dem Bildschirm umzuwandeln.

Das Geheimnis zur Beschleunigung Ihrer Leistung liegt darin, zu verstehen, was zwischen dem Empfang der Ressourcen und ihrer Verarbeitung passiert, um sie in gerenderte Pixel umzuwandeln.

Dieser Vorgang wird auch als Critical Rendering Path (CRP) bezeichnet.

Und in diesem Artikel erfahren Sie alles, was Sie über CRP wissen müssen und wie Sie es für schnelleres Rendern optimieren können.

• Was ist der kritische Rendering-Pfad?
• Die Critical Rendering Path-Sequenz erklärt
• So optimieren Sie den kritischen Rendering-Pfad Ihrer Website
• 3 WordPress-Plugins zur Optimierung Ihres CRP
• Checkliste zur CRP-Optimierung

Lass uns anfangen!

Was ist der kritische Rendering-Pfad?

Der Critical Rendering Path bezieht sich auf die Abfolge von Schritten, die ein Webbrowser ausführt, um HTML-, CSS- und JavaScript-Code in eine visuelle Darstellung auf dem Bildschirm eines Benutzers umzuwandeln.

Es umfasst eine Reihe von Prozessen, wie z. B. das Erstellen des Dokumentobjektmodells (DOM), das Generieren des CSS-Objektmodells (CSSOM) und das Kombinieren beider zur Erstellung des Render-Baums. Der Render-Baum wird dann verwendet, um das Layout zu berechnen und die Pixel auf dem Bildschirm des Benutzers zu malen.

Die Optimierung des kritischen Rendering-Pfads hingegen bezieht sich auf die Reduzierung der Zeit, die der Webbrowser für die Ausführung jedes Schritts der Sequenz aufwendet, während der Inhalt priorisiert wird, der für die aktuelle Aktion des Benutzers relevant ist.

Um sicherzustellen, dass Ihre Optimierungsbemühungen den Nagel auf den Kopf treffen, müssen Sie jeden Schritt der Sequenz genau verstehen. Daher sind die nächsten paar Absätze unerlässlich, und wir empfehlen dringend, sie zu lesen, bevor Sie Maßnahmen ergreifen.

Die kritische Rendering-Pfadsequenz erklärt

Hier ist ein kurzer Überblick über die Schritte, die der Browser beim Rendern einer Seite ausführt:

1. Der Browser lädt das HTML-Markup herunter, analysiert es und erstellt das DOM.
2. Als Nächstes lädt es das CSS-Markup herunter, verarbeitet es und erstellt das CSS-Objektmodell (CSSOM).
3. Dann kombiniert es die notwendigen Knoten aus DOM und CSSOM, um den Render-Baum zu erstellen, eine Baumstruktur aller sichtbaren Knoten, die zum Rendern der Seite erforderlich sind.
4. Es berechnet die Abmessungen und die Position jedes Elements auf der Seite durch den Layoutprozess.
5. Schließlich malt der Browser die Pixel auf dem Bildschirm.

Lassen Sie uns nun auf jeden Schritt eingehen.

Der Dom

Das Document Object Model (DOM) ist die interne Darstellung des HTML-Dokuments im Browser.

Wenn eine Webseite geladen wird, analysiert der Browser den HTML-Code und erstellt eine baumartige Struktur von Knoten, die die Elemente im Dokument darstellen. Jeder Knoten entspricht einem HTML-Element und hat Eigenschaften, die seine Attribute, seinen Inhalt und seine Position im Baum beschreiben.

Wichtig: Der Browser baut das DOM schrittweise auf, sodass wir die Darstellung der Seite optimieren können, indem wir eine effiziente Struktur erstellen und übermäßige DOM-Größen vermeiden.

Das CSSOM

Während das DOM den gesamten Inhalt der Seite enthält, enthält das CSSOM alle Informationen zum Stil des DOM.

Ein weiterer Unterschied zwischen DOM und CSSOM ist folgender:

Die DOM-Konstruktion erfolgt schrittweise, während dies bei CSSOM nicht der Fall ist.

Wenn eine Website geladen wird, muss der Browser das CSS verarbeiten, um die Stile anzuwenden. Im Gegensatz zu HTML, das Stück für Stück verarbeitet werden kann, muss CSS auf einmal verarbeitet werden. Dies liegt daran, dass einige Stile später in der CSS-Datei möglicherweise von anderen überschrieben werden, sodass der Browser warten muss, bis er die gesamte CSS-Datei gelesen hat, bevor er entscheidet, welche Stile angewendet werden sollen.

Dies geschieht, um zu vermeiden, dass Stile angezeigt werden, die später überschrieben werden und Ressourcen verschwenden.

Einfach gesagt:

Der Browser blockiert den Rendering-Prozess, bis er das gesamte CSS empfängt und analysiert.

Aus diesem Grund wird CSS als Render-Blocking-Ressource betrachtet.

Der Renderbaum

Der Render Tree ist die Kombination aus DOM und CSSOM, die der Browser verwendet, um die visuelle Darstellung der Webseite zu erstellen.

Der Browser verwendet den Render-Baum, um Knotenabmessungen und -position als Eingabe für den Zeichenprozess zu berechnen.

Wichtig: Nur sichtbare Inhalte werden im Renderbaum erfasst. Typischerweise enthält der Kopfteil keine sichtbaren Informationen und wird daher ausgeschlossen. Wenn ein Element außerdem eine display: none- Eigenschaft hat, werden weder das Element noch seine Nachkommen in den Renderbaum aufgenommen.

Layout

Nachdem der Renderbaum erstellt wurde, ist der nächste Schritt das Layout. Das Layout legt die Platzierung und Ausrichtung jedes Elements auf der Seite fest, indem es seine Abmessungen, Position und Beziehungen definiert.

Aber hier ist das Ding:

Die Layoutleistung wird durch das DOM beeinflusst.

Mit anderen Worten:

Je größer die Anzahl der DOM-Knoten, desto länger dauert der Layoutprozess.

Malen

Die letzte Phase besteht darin, die Pixel auf den Bildschirm zu malen, was der Erstellung des Renderbaums und des Layouts folgt.

Beim Ladevorgang wird zunächst der gesamte Bildschirm gezeichnet. Anschließend werden nur die betroffenen Teile des Bildschirms neu gezeichnet, da Browser darauf ausgelegt sind, nur den notwendigen Bereich neu zu malen.

Beachten Sie, dass die Dauer der Malphase von der Art der Aktualisierungen abhängt, die in der Renderstruktur implementiert werden.

Sehen wir uns nun an, welche Optimierungen Sie anwenden können, um dem Browser zu helfen und einige der Prozesse zu beschleunigen.

So optimieren Sie den kritischen Rendering-Pfad Ihrer Website

Die Zeit, die der Browser benötigt, um den gesamten Vorgang zu durchlaufen, kann variieren. Es gibt viele bewegliche Teile, die zur kritischen Pfadlänge beitragen:

• Dokumentgröße
• Anzahl der Anfragen
• Benutzergerät
• Angewandte Stile

Dennoch gibt es drei Techniken, die als erste Wahl gelten, wenn es um die CRP-Optimierung geht:

1. Minimieren Sie die Anzahl kritischer Ressourcen, indem Sie nicht kritische Ressourcen zurückstellen oder ganz eliminieren
2. Optimieren Sie die Anzahl der erforderlichen Anfragen zusammen mit der Dateigröße jeder Anfrage
3. Priorisieren Sie das Herunterladen kritischer Assets und verkürzen Sie so die kritische Pfadlänge

Lassen Sie uns ein wenig tiefer in die Umsetzung jeder der empfohlenen Optimierungsstrategien eintauchen:

Renderblockierende CSS- und JS-Ressourcen optimieren

Sie wissen bereits, dass der Browser, wenn er auf renderblockierende CSS- und JS-Ressourcen trifft, diese herunterladen, parsen und ausführen muss, bevor er irgendetwas anderes tun kann, einschließlich des Renderns.

Wenn es um die Optimierung von CSS geht, können Sie die folgenden Techniken implementieren:

• Kritisches CSS. Es identifiziert den minimalen Satz von CSS-Regeln, die zum Rendern des sichtbaren Teils einer Webseite erforderlich sind, und liefert sie als Inline-CSS an den Browser, anstatt ein vollständiges Stylesheet zu laden. Indem nur das erforderliche CSS für „above the fold“-Inhalte geladen wird, kann der Browser die Seite schneller rendern und die Benutzererfahrung verbessern . Dies liegt daran, dass der Browser nicht warten muss, bis das gesamte Stylesheet geladen ist, bevor die Seite gerendert wird.
  
• Kombinieren Sie CSS-Dateien. CSS-Verkettung ist der Prozess, bei dem mehrere CSS-Dateien zu einer einzigen Datei kombiniert werden. Diese Technik verbessert die Leistung, indem die Anzahl der zum Laden einer Webseite erforderlichen HTTP-Anforderungen reduziert wird , da der Browser nur eine einzige CSS-Datei herunterladen und analysieren muss, anstatt mehrere.

In Bezug auf Ihre JavaScript-Dateien können Sie Folgendes tun:

• JS-Laden verzögern. Das Laden von JS verzögern ist eine Technik, die Ihre Website beschleunigt, indem das Laden von JavaScript-Dateien verzögert wird, bis das HTML-Dokument geladen und geparst wurde . Sie können das Attribut defer für das script- Tag verwenden, das auf die JS-Datei verweist. Es ist wichtig zu beachten, dass das defer-Attribut nur für JS-Dateien verwendet werden sollte, die nicht sofort nach dem Laden ausgeführt werden müssen (z. B. Dateien, die nur auf bestimmten Seiten verwendet werden), da die Ausführungsreihenfolge bei mehreren verzögerten Skripten unvorhersehbar sein kann werden verwendet.
  
• JS asynchron laden. Einige JS-Dateien erfordern möglicherweise die Verwendung des async-Attributs, wodurch die Datei asynchron mit der Analyse des HTML-Dokuments geladen und ausgeführt werden kann.

Es gibt einige Optimierungen, die Sie sowohl auf CSS als auch auf JavaScript anwenden können:

• Minimierung. Bei der Minifizierung werden unnötige Zeichen wie Leerzeichen, Kommentare und Zeilenumbrüche aus CSS- und JavaScript-Dateien entfernt. Dieser Prozess kann die Größe der Dateien erheblich reduzieren, ohne deren Funktionalität oder Aussehen zu beeinträchtigen .
  
• Entfernen Sie unbenutztes CSS und JS. Nicht verwendetes CSS und JS beziehen sich auf bestimmte Regeln, die auf einer bestimmten Seite nicht verwendet werden, aber dennoch geladen werden. Das Entfernen dieser Teile Ihrer Dateien wirkt sich direkt darauf aus, wie schnell der Browser den Renderbaum aufbaut .

Optimieren Sie Ihre Render-Blocking-Ressourcen auf Autopilot. Installieren Sie NitroPack →

Reduzieren Sie die Größe Ihrer Dateien

Um die Datenmenge zu reduzieren, die der Browser herunterladen muss, können wir Techniken wie Minimierung, Komprimierung und Caching von HTML-, CSS- und JavaScript-Ressourcen einsetzen.

Sie wissen bereits, was Minifizierung bedeutet, also konzentrieren wir uns auf die anderen beiden:

• Kompression. Komprimierung ist eine Technik, die Algorithmen anwendet, um den Binärcode der Dateien mit weniger Bits als das Original neu zu schreiben. Infolgedessen sind Ihre Dateien viel kleiner, was die Ladezeiten der Seiten und die Bandbreitennutzung reduziert.
  
• Caching. Caching nutzt den in jedem Browser implementierten HTTP-Cache. Um ein effektives Caching zu gewährleisten, müssen wir sicherstellen, dass jede Serverantwort die richtigen HTTP-Header bereitstellt und den Browser anweist, wann und wie lange er die angeforderten Ressourcen zwischenspeichern soll.

Verlassen Sie sich auf den fortschrittlichsten Caching-Mechanismus. Holen Sie sich noch heute NitroPack →

Priorisieren Sie das Herunterladen kritischer Assets

Im Allgemeinen sind Browser ziemlich gut darin, die wichtigsten Ressourcen zu priorisieren und sie zuerst abzurufen. In einigen Fällen könnten Sie ihnen jedoch helfen, Ihre Website noch schneller zu laden, indem Sie die wichtigsten Ressourcen manuell priorisieren.

Sie können Ressourcenhinweise verwenden, um dem Browser mitzuteilen, wie er mit bestimmten Ressourcen oder Webseiten umgehen soll.

Hier sind die drei wichtigsten:

• Link rel=prefetch. Prefetch ist ein Ressourcenhinweis mit niedriger Priorität, der es dem Browser ermöglicht, möglicherweise später benötigte Ressourcen abzurufen und im Cache des Browsers zu speichern.

• Link rel=preconnect. Die Preconnect-Direktive hilft dem Browser, frühzeitig Verbindungen herzustellen, bevor eine erste Anfrage an den Server gesendet wird.

• Link rel=vorladen. Preload wird verwendet, um den Browser zu zwingen, eine Ressource früher herunterzuladen, als der Browser sie entdecken würde, da dies für die Seite von entscheidender Bedeutung ist.

Wichtig: Prefetch und Preconnect sind Ressourcenhinweise und werden so ausgeführt, wie es der Browser für richtig hält. Die Preload-Direktive ist ein Befehl, der für die Browser obligatorisch ist. Erfahren Sie mehr darüber, wie Sie Ressourcenhinweise implementieren.

Nachdem Sie nun wissen, wie Sie mit der Optimierung des kritischen Rendering-Pfads umgehen, schauen wir uns einige WordPress-Plugins an, die den Prozess automatisieren können.

3 WordPress-Plugins zur Optimierung des kritischen Rendering-Pfads

Alle oben genannten Optimierungen können manuell durchgeführt werden. Einige von ihnen erfordern jedoch technisches Wissen, um sicherzustellen, dass Ihre Website während des Vorgangs nicht beschädigt wird.

Zum Glück für alle WordPress-Benutzer gibt es Plugins, die bei der CRP-Optimierung helfen können. Lassen Sie uns die unserer Meinung nach Top-3-Kandidaten überprüfen:

NitroPack - Die All-in-One-Lösung

NitroPack ist die führende All-in-One-Lösung zur Optimierung der Website-Geschwindigkeit, die mehr als 35+ Web-Performance-Funktionen kombiniert. Wenn es darum geht, Ihren kritischen Rendering-Pfad zu optimieren, übernimmt NitroPack automatisch Optimierungen wie:

• Kritisches CSS
• CSS- und JS-Minifizierung
• CSS- und JS-Komprimierung
• Caching
• JS-Laden verzögern
• Entfernen Sie unbenutztes CSS und JS

Aber die Optimierungsfunktionen enden hier nicht. Außerdem erhalten Sie das komplette Leistungs-Toolkit:

• Eingebautes CDN
• Vollständiger Stack zur Bildoptimierung
• Schriftoptimierung
• E-Commerce-Warenkorb-Caching
• 24/7-Support

Beschleunigen Sie Ihre Website automatisch. Holen Sie sich noch heute NitroPack →

WP Super Cache - Nur-Caching-Plugin

WP Super Cache ist ein Caching-Plug-in, das in erster Linie Caching-Funktionen und HTTP-Komprimierung bietet, aber bei der Ressourcenminimierung und der Optimierung von JavaScript mit Async- und Defer-Attributen zu kurz kommt.

Zu den bemerkenswertesten Merkmalen gehören:

• Caching für alle Besucher aktivieren
• Deaktivieren Sie das Caching für eingeloggte Besucher
• Komprimieren Sie Seiten, damit sie den Besuchern schneller angezeigt werden
• Cache-Neuaufbau

Schnelle Leistung

Swift Performance ist ein weiteres Plugin, das Sie bei Ihrem Streben nach optimiertem CRP nützlich finden könnten. Einige seiner Funktionen umfassen:

• Minimierung von CSS- und JavaScript-Dateien
• Kritisches CSS
• Caching
• Bildoptimierung

Optimierung des kritischen Rendering-Pfads [Checkliste]

Wir haben in diesem Artikel viele Bereiche behandelt, daher finden Sie hier eine praktische Checkliste aller von uns erwähnten Optimierungen:

• Generieren Sie kritisches CSS
• Kombinieren Sie CSS-Dateien
• JavaScript-Laden verzögern
• Laden Sie JavaScript asynchron
• Minimieren Sie CSS und JavaScript
• CSS und JavaScript komprimieren
• Entfernen Sie unbenutztes CSS und JavaScript
• Minimierung anwenden
• Kompression anwenden
• Verwenden Sie Caching
• Link rel=preload implementieren
• Link rel=prefetch implementieren
• Implementieren Sie den Link rel=preconnect

Laden Sie die Checkliste zur CRP-Optimierung herunter →

Und last but not least - vergiss nicht, vor und nach jeder Optimierung zu testen!