Bei der Optimierung des kritischen Rendering-Pfads geht es darum, die Anzeige von Inhalten zu priorisieren, die sich auf die aktuelle Nutzeraktion beziehen.
Ein schnelles Web erfordert viel Arbeit durch den Browser. Der Großteil dieser Arbeit bleibt uns als Webentwickler verborgen: Wir schreiben das Markup und eine schöne Seite erscheint auf dem Bildschirm. Aber wie genau wird der Browser von der Verarbeitung unserer HTML-, CSS- und JavaScript-Elemente bis zum Rendern der Pixel auf dem Bildschirm?
Bei der Leistungsoptimierung geht es darum zu verstehen, was in diesen Zwischenschritten zwischen dem Empfang der HTML-, CSS- und JavaScript-Byte und der erforderlichen Verarbeitung zur Umwandlung in gerenderte Pixel geschieht. Dies ist der kritische Rendering-Pfad.
Durch die Optimierung des kritischen Rendering-Pfads können wir die Zeit bis zum ersten Rendern unserer Seiten erheblich verkürzen. Das Verständnis des kritischen Rendering-Pfads dient auch als Grundlage für die Entwicklung leistungsstarker interaktiver Anwendungen. Der interaktive Updateprozess ist derselbe, nur in einer Dauerschleife und idealerweise mit 60 Bildern pro Sekunde. Zunächst jedoch ein Überblick darüber, wie eine einfache Seite im Browser angezeigt wird.
Kritischer Rendering-Pfad
Sie erfahren, wie Sie die Geschwindigkeit jeder Website optimieren können, indem Sie sich mit den Details zum Rendern von Seiten in mobilen und Desktop-Browsern befassen. Sie erfahren mehr über den kritischen Rendering-Pfad bzw. die Schritte, die Browser ausführen müssen, um HTML, CSS und JavaScript in lebendige, atemberaubende Websites zu konvertieren. Anschließend können Sie mit Tools zur Leistungsmessung und einfachen Strategien experimentieren, um so früh wie möglich die ersten Pixel auf dem Bildschirm zu präsentieren. Du erfährst, wie du die Empfehlungen von PageSpeed Insights und die Zeitachsenansicht der Entwicklertools von Google Chrome erhältst, um die Daten zu finden, die du für sofortige Leistungssteigerungen benötigst.
Dieser Kurs ist kostenlos und wird über Udacity angeboten.
Weitere Ressourcen
- Objektmodell erstellen
- Konstruktion, Layout und Paint eines Renderingbaums
- CSS blockieren, die das Rendering blockiert
- Mehr Interaktionen dank JavaScript
- Den kritischen Rendering-Pfad messen
- Leistung kritischer Rendering-Pfade analysieren
- Den kritischen Rendering-Pfad optimieren
- PageSpeed-Regeln und -Empfehlungen