The first step to optimize the critical rendering path is to:
minimize number of critical resources: eliminate them, defer their download, mark them as async, and so on
analyze and characterize your critical path: number of resources, bytes, length
optimize the order in which the remaining critical resources are loaded: download all critical assets as early as possible to shorten the critical path length
optimize the number of critical bytes to reduce the download time (number of roundtrips)
Explanation:
The general sequence of steps to optimize the critical rendering path is:
- Analyze and characterize your critical path: number of resources, bytes, length.
- Minimize number of critical resources: eliminate them, defer their download, mark them as async, and so on.
- Optimize the number of critical bytes to reduce the download time (number of roundtrips).
- Optimize the order in which the remaining critical resources are loaded: download all critical assets as early as possible to shorten the critical path length.
Read more here: https://support.google.com/partners/answer/7336280
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?
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.
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.
https://www.youtube.com/watch?v=-VB4iIJARCs
