What is render-blocking?

Render-blocking is associated with generating the Render Tree from an HTML document and eventually painting a webpage's pixels on a screen.

Render Tree generation is one of the steps of the Critical Rendering Path. Other steps include DOM Tree generation, CSS Object Model (CSSOM) Tree generation, Layout generation and painting pixels. Render Tree generation depends on two prior steps: DOM Tree generation and CSSOM Tree generation.

Render-blocking is relevant when the browser parses a string of HTML markup and builds a DOM tree as it parses. When the HTML parser is blocked by scripts, or scripts are blocked by external CSS files, the DOM tree generation is blocked. As a result, the Render Tree generation is also blocked --- which in turn blocks layout generation and painting of the web page's pixels to the screen. This is cumulatively called render-blocking.

In addition, since Render Tree generation depends on CSSOM Tree generation, if the CSSOM Tree generation is somehow blocked, Render Tree generation also gets blocked. So, render-blocking can be induced by problems with CSSOM Tree generation as well.

References