What Is Render Blocking And Non-render Blocking Javascript And CSS?

When a developer adds Javascript and CSS to your shop they can choose to have it either render blocking or non-render blocking.

Render blocking means that the user's web browser must fully download and load the Javascript and CSS before the webpage is displayed.

Non-render blocking means that the user's web browser can first display the webpage and then load the Javascript and CSS in the background.

Non-render blocking leads to a faster first display of the webpage. However, the Javascript and CSS may contain vital functions and styles for the webpage. If they aren't loaded before the webpage is displayed the page may appear ugly (lacking styles) and non-functional (with parts not able to be clicked etc.).

Therefore the choice is not as simple as having all Javascript and CSS non-render blocking to speed up your shop. The page may display but not be usable if they are all non-render blocking!

The solution is to ask the developer who wrote the theme, app or customisation if some or all of their Javascript and CSS can be made non-render blocking.