What is a website render blocking resource?

Back to learning

When a browser displays a website page to a user it has to load resources referred to by the page, these resources could be media files like images, CSS stylesheets, Javascript files, Fonts etc.

By default, the browser considers the last three, ie CSS, Javascript, and Fonts to be part of the critical rendering path as they modify how a page is laid out and how it looks. The browser therefore blocks displaying any content to the user until these files are downloaded, and parsed, to prevent having to redraw the page again and again as the look of the page is modified by these files.

There are various website optimisation techniques to tell the browser that certain files are not render blocking which can greatly improve page load times, they might however cause content to 'reflow', ie shift around the screen, as the browser parses and applies newly discovered information.