Loading Assets & The Critical Rendering Path

In web terminology, the critical rendering path describes the actions performed by the browser during the initial load of a new web page. This path starts with an initial HTTP GET request, like we saw in the example in the previous section. The content of the initial HTML document in the response to this request determines the actions that the browser will take next. It will potentially make several subsequent requests for other resources that are needed in order to render the page. Most commonly, these resources include stylesheets, scripts, and various media such as images or video.

Modern browsers have developer tooling that shows a timeline of the network activity that takes place on a given page. In this section, we will examine screenshots of the Network Activity panel in Google Chrome.