Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.
By optimizing the critical rendering path we can significantly improve the time to first render of our pages. Further, understanding the critical rendering path also serves as a foundation for building well-performing interactive 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.
Critical Rendering Path #
This is a free course offered through Udacity.
Additional resources #
- Constructing the Object Model
- Render-tree Construction, Layout, and Paint
- Render Blocking CSS
- Measuring the Critical Rendering Path
- Analyzing Critical Rendering Path Performance
- Optimizing the Critical Rendering Path
- PageSpeed Rules and Recommendations