Back

Render-blocking resources

What is a render-blocking resource ?

Render-blocking resources are CSS styles or JavaScript scripts that need to be fully loaded to perform the first rendering of the page.

Why is it important ?

Depending on their position in the HTML code of your site, these render- blocking resources can considerably slow down the loading time of your page.
The HTML code of a web page is read from top to bottom by browsers. If your JavaScript script is located at the beginning of the page for example, the reading by the browser of your HTML code will "pause" to process your Javascript script. Thus, the rest of your HTML content will not be displayed during the processing of this element, which is penalizing for the loading time of your site, for the user experience and therefore for your referencing.
The resources that block the rendering of a web page are generally derived from JavaScript and CSS.

How can I solve this problem ?

Place JavaScript scripts at the bottom of the page or defer their loading thanks to the "defer" attribute :

<head>
    <script src="/script.js" defer></script>
</head>
... ou ...
    <script src="/script.js"></script>
</body>
</html>

Specify the relevant media for stylesheets :

<head>
    <link rel="stylesheet" href="print.css" media="print">
</head>