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.
Ein schnelles Weberlebnis erfordert viel Arbeit für den Browser. Der Großteil dieser Arbeit ist für uns als Webentwickler nicht sichtbar: Wir schreiben das Markup und eine schöne Seite wird auf dem Bildschirm angezeigt. 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 interaktive Aktualisierungsprozess ist derselbe, nur in einer Endlosschleife und idealerweise mit 60 Bildern pro Sekunde. Aber zuerst ein Überblick darüber, wie der Browser eine einfache Seite darstellt.
Zusätzliche Ressourcen
- Objektmodell erstellen
- Konstruktion, Layout und Farbe eines Renderingbaums
- Renderblockierendes CSS
- Interaktivität mit JavaScript hinzufügen
- Kritischen Rendering-Pfad messen
- Leistung des kritischen Rendering-Pfads analysieren
- Kritischen Rendering-Pfad optimieren
- PageSpeed-Regeln und ‑Empfehlungen