Render-blocking on purpose
Render blocking is something you usually want to avoid. Enter the term into Google and you’ll be met with a great many articles about eliminating render-blocking. Perhaps somewhat surprisingly then, there’s a new HTML blocking attribute to purposefully block rendering until a particular resource is downloaded.
A regular <script> tag, when lacking an async or defer attribute, will pause the parsing of HTML and block rendering until the script is downloaded, parsed, and executed.
The blocking attribute can be added to <script>, <link> and <style> elements in the <head>. As of today, the only thing that can be blocked is rendering (we might be able to block more operations using this attribute in the future).
blocking="render" is a way to mark a resource as required before anything is visually shown to the user. Not a single pixel will be painted in the viewport until the resource has loaded.
The browser should assign a high priority to any render-blocking resource by default. As not all browsers support the blocking attribute, its worth adding fetchpriority="high":
