Critical Rendering Path
Published: March 31, 2014
Optimizing the critical rendering path refers to prioritizing the display ofcontent that relates to the current user action.
Delivering a fast web experience requires a lot of work by the browser. Most ofthis work is hidden from us as web developers: we write the markup, and a nicelooking page comes out on the screen. But how exactly does the browser go fromconsuming our HTML, CSS, and JavaScript to rendered pixels on the screen?
Optimizing for performance is all about understanding what happens in theseintermediate steps between receiving the HTML, CSS, and JavaScript bytes andthe required processing to turn them into rendered pixels - that'sthecritical rendering path.
By optimizing the critical rendering path we can significantly improve thetime to first render of our pages. Further, understanding the criticalrendering path also serves as a foundation for building well-performinginteractive applications. The interactive updates process is the same, just done in a continuous loop and ideally at 60 frames per second!But first, an overview of how the browser displays a simple page.
Additional resources
- Constructing the Object Model
- Render-tree Construction, Layout, and Paint
- Render Blocking CSS
- Adding Interactivity with JavaScript
- Measuring the Critical Rendering Path
- Analyzing Critical Rendering Path Performance
- Optimizing the Critical Rendering Path
- PageSpeed Rules and Recommendations
Feedback
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2014-03-31 UTC.