Render Blocking Resources

Search Console

There are three types of render-blocking URLs: scripts, stylesheets, and HTML imports. These URLs block the first paint of your page. Your goal should be to reduce the impact of these render-blocking URLs by inlining critical resources, deferring non-critical resources, and removing anything unused.

images/webmaster/render-blocking-resources.jpg

1. Script

A <script> tag that:

  • Is in the <head> of the document.
  • Does not have a defer attribute.
  • Does not have an async attribute.

Move the critical code from the render-blocking URL to an inline script tag in your HTML page. When the page loads, it will have what it needs to handle the page's core functionality. If there is code in a render-blocking URL that's not critical, you can keep it in the URL, and then mark the URL with async or defer attributes.

The defer attribute is a boolean attribute. It specifies that the script is executed when the page has finished parsing. The async attribute is also a boolean attribute. It specifies that the script is executed asynchronously as soon as it is available.

2. Style Sheets

A <link rel="stylesheet"> tag that:

  • Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet.
  • Does not have a media attribute that matches the user's device.

3. HTML Imports

A <link rel="import"> tag that:

  • Does not have an async attribute.

For non-critical HTML imports, mark them with the async attribute.

Execution of External Scripts

The <script> element has two attributes, async and defer, that can give you more control over how and when external files are fetched and executed. There are three ways an external script can be executed:

  1. If async is present: The script is executed asynchronously with the rest of the page. The script is executed while the page continues the parsing.

  2. If async is not present and defer is present: The script is executed when the page has finished parsing.

  3. If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page.

For example,

<script src="/script.js"></script>

Whenever the HTML parser finds this line, a request will be made to fetch the script, and the script is executed. Once this process is done, the parsing resumes, and the rest of the HTML is analyzed. This operation can have a huge impact on the loading time of the page.

A common solution is to put the script tag at the bottom of the page, just before the closing </body> tag. Now, the script is loaded and executed after all the page is already parsed and loaded.

With the async and defer attributes:

<script async src="/script.js"></script>
<script defer src="/script.js"></script>

These attributes only make sense when using the script in the head portion of the page.