Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Kritischer Rendering-Pfad

Die Optimierung des kritischen Rendering-Pfads ist für die Verbesserung der Leistung unserer Seiten entscheidend: Unser Ziel ist es, die Inhalte zu priorisieren und darzustellen, die sich auf die primäre Aktion beziehen, die der Nutzer auf einer Seite durchführen möchte.

Für die Bereitstellung einer schnellen Weberfahrung muss der Browser eine Menge leisten. Diese Arbeit bleibt uns als Webentwicklern weitgehend verborgen: Wir schreiben das Markup und eine hübsche Seite erscheint auf dem Bildschirm. Aber wie genau verarbeitet der Browser unsere HTML-, CSS- und JavaScript-Elemente zu gerenderten Pixeln auf dem Bildschirm?

Die Leistungsoptimierung setzt das Verstehen der Vorgänge zwischen dem Empfang der HTML-, CSS- und JavaScript-Bytes und deren Verarbeitung in gerenderte Pixel voraus - das ist der kritische Rendering-Pfad.

Progressives Seitenrendering

Über die Optimierung des kritischen Rendering-Pfads können wir die benötigte Zeit für das erste Rendering unserer Seiten erheblich verkürzen. Darüber hinaus ist das Verständnis des Rendering-Pfads auch eine Voraussetzung für die Erstellung leistungsfähiger interaktiver Anwendungen. Der Prozess für die Verarbeitung interaktiver Updates ist tatsächlich identisch, er wird nur in einer Dauerschleife und idealerweise mit 60 Frames pro Sekunde durchgeführt! Aber wir wollen hier nicht vorgreifen. Zunächst wollen wir uns einen grundsätzlichen Überblick darüber verschaffen, wie im Browser eine einfache Seite dargestellt wird.

Critical Rendering Path

You will learn how to optimize any website for speed by diving into the details of how mobile and desktop browsers render pages.

You’ll learn about the Critical Rendering Path, or the set of steps browsers must take to convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance and simple strategies to deliver the first pixels to the screen as early as possible. You’ll learn how to dive into recommendations from PageSpeed Insights and the Timeline view of Google Chrome’s Developer Tools to find the data you need to achieve immediate performance boosts!

This is a free course offered through Udacity

Take Course