Optimizing the critical rendering path refers to prioritizing the display of content that relates to the current user action.
Website Performance Optimization
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.
- Constructing the Object Model
- Render-tree construction, layout, and paint
- Render blocking CSS
- Measuring the critical rendering path with Navigation Timing
- Analyzing critical rendering path performance
- Optimizing the critical rendering path
- PageSpeed rules and recommendations