Critical Render Path
The Critical Rendering Path is the process, made up of several steps, that all browsers and user agents use to build and render web pages from an HTML stream.
It encapsulates all the activities undertaken between the user clicking a mouse, or tapping a link on a smartphone and the browser compositing (painting) the web page and displaying it to the viewport. These processes can be deconstructed into constituent components to offer insight into the performance of how the web page is built.
Once the CSSOM is complete and sufficient tokens in the DOM have been created the Render tree can begin construction. With elements of the Render Tree built, the browser can then begin to layout the web page and then paint it. When the first pixel of the web page is painted the First Paint (FP) or render start timing points are established.
These processes are fluid and are iterated as more of the DOM is built and until the DOM is completed, all resources have been loaded and the web page has been completely built.
The critical rendering path is a key concept used in analyzing web pages in order to improve their speed of download, overall performance and enhance user experience. Consequently, a fundamental understanding of how the tasks of this process interact with each other is needed in order to conduct analysis and develop resolutions for observed performance bottlenecks on web pages.