Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Eliminate render-blocking resources

Overview

Render-blocking resources are scripts, stylesheets, and HTML imports that block or delay the browser from rendering page content to the screen.

These resources delay the First Paint - the time at which your browser renders something (i.e., background colours, borders, text or images) for the first time.

Eliminating render-blocking resources can help your page load significantly faster and improve the website experience for your visitors.

How does your site score on this audit?

How does eliminating render-blocking resources affect page performance?

Every time a browser loads a page, it parses through the page's HTML code line-by-line.

How render-blocking resources work - Browser
Scripts and tags in the <head> of the HTML will be processed first before the browser continues.

In doing so, it may come across various scripts and tags that, unless specified otherwise, will be downloaded, parsed, and executed before moving onto the rest of the HTML code.

Render-blocking resources delay the browser from starting the render process, extending your page's First Paint.

Multiple render-blocking resources could mean that your visitor waits for a long time before seeing anything meaningful on your page (like a blank or sparsely populated page).

This gives visitors the impression that the page is taking too long to load, causing them to refresh, hit the back button, or exit entirely.

How render-blocking resources - Visitor
Visitors will see a blank screen while render-blocking resources are processed.

Scripts and tags placed at the beginning of the page need to be deferred/asynchronously loaded or eliminated altogether as the quicker your visitors see something load on your page, the better the performance (or in many cases, perception of performance).

Minimizing render-blocking resources, as much as possible, can facilitate progressive loading, allowing First Paints to occur sooner, and enabling your visitors to perceive that your site is doing something.

Progessive vs Non-Progressive Loading
Progressively loading websites are perceived to be faster than websites where you see nothing at first, then everything at once.

In many cases, progressive loading provides visual feedback that can help keep visitors on your page.

How does GTmetrix trigger this audit?

GTmetrix will flag a resource as render-blocking and trigger this audit, if it comes across the following on your page:

  • A <script> tag that appears in the <head> of the document and doesn't have a defer or async attribute.
  • A <link rel="stylesheet"> tag that does not have a disabled or media attribute.
  • A <link rel="import"> tag that does not have an async attribute.

Clicking the audit reveals the flagged resources on your page.

Expanded view of the Eliminate render-blocking resources audit
Clicking this audit reveals the render-blocking resources on your page.

Note that resources with download time of less than 50 ms are ignored.

GTmetrix also estimates the amount of time that can be saved by eliminating render-blocking behaviour.

How to eliminate render-blocking resources?

We've written an extensive article on strategies to eliminate render-blocking resources.

Read our blog article to learn how to eliminate render-blocking resources on your page.