Veröffentlicht: 31. März 2014
Die Optimierung des kritischen Rendering-Pfads bezieht sich auf die Priorisierung der Anzeige von Inhalten, die sich auf die aktuelle Nutzeraktion beziehen.
Für eine schnelle Webnutzung muss der Browser viel leisten. Ein Großteil dieser Arbeit bleibt uns als Webentwicklern verborgen: Wir schreiben das Markup und eine schön aussehende Seite erscheint auf dem Bildschirm. Aber wie genau geht der Browser von der Verarbeitung von HTML, CSS und JavaScript zu gerenderten Pixeln auf dem Bildschirm über?
Bei der Leistungsoptimierung geht es darum, zu verstehen, was in diesen Zwischenschritten zwischen dem Empfang der HTML-, CSS- und JavaScript-Bytes und der erforderlichen Verarbeitung zu gerenderten Pixeln passiert. Das ist der kritische Rendering-Pfad.
Durch die Optimierung des kritischen Rendering-Pfads können wir die Zeit bis zum ersten Rendern unserer Seiten erheblich verbessern. Außerdem dient das Verständnis des kritischen Rendering-Pfads als Grundlage für die Entwicklung leistungsstarker interaktiver Anwendungen. Der Prozess für interaktive Updates ist derselbe, wird nur in einem kontinuierlichen Loop und idealerweise mit 60 Frames pro Sekunde ausgeführt. Aber zuerst ein Überblick darüber, wie der Browser eine einfache Seite darstellt.
Zusätzliche Ressourcen
- Objektmodell erstellen
- Renderbaum erstellen, Layout und Paint
- CSS-Code, der das Rendern blockiert
- Interaktivität mit JavaScript hinzufügen
- Kritischen Rendering-Pfad messen
- Leistung des kritischen Rendering-Pfads analysieren
- Kritischen Rendering-Pfad optimieren
- PageSpeed-Regeln und ‑Empfehlungen