Critical rendering path
Google Developers Logo

Progressive Web App Road Show 2016

Stopping in New York, Chicago, Austin, Toronto, Mountain View and Seattle. Learn more and sign up now.

Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.

Delivering a fast web experience requires a lot of work by the browser. Most of this work is hidden from us as web developers: we write the markup, and a nice looking page comes out on the screen. But how exactly does the browser go from consuming our HTML, CSS, and JavaScript to rendered pixels on the screen?

Website Performance Optimization

Interested in taking a deep dive into the Critical Rendering Path? Check out our companion course and learn how the browser converts HTML, CSS, and JavaScript to pixels on the screen, how to use DevTools to measure performance, and how to optimize the Critical Rendering Path of your pages.

Optimizing for performance is all about understanding what happens in these intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels - that’s the critical rendering path.

progressive page rendering

By optimizing the critical rendering path we can significantly improve the time to first render of our pages. Further, understanding the critical rendering path will also serve as a foundation for building well performing interactive applications. It turns out, the process for processing interactive updates is the same, just done in a continuous loop and ideally at 60 frames per second! However, let’s not get ahead of ourselves just yet. First, let’s take a quick, ground-up overview of how the browser goes about displaying a simple page.

Profile photo of Ilya Grigorik

Ilya is a Developer Advocate and Web Perf Guru