Software Architect's Handbook

Optimizing the critical rendering path

An important step in reducing the amount of time that it takes for a page to render is to optimize the critical rendering path (CRP). The critical rendering path is the set of steps in between a browser receiving bytes from a server (for example, HTML, CSS, and JavaScript files) and the processing involved to render pixels on the device's screen.

Before a page can be rendered by a browser, it must construct both the Document Object Model (DOM) and the CSS Object Model (CSSOM). The HTML and CSS markup for the page are needed for this process. The DOM and the CSSOM are then combined to form a render tree, which has both the content as well as the style information for what will be visible on the screen. ...