Eliminate render blocking resources
This means that the URL in question contains JavaScript or CSS that blocks the initial render of the page.
Why is this important?
Websites are becoming more heavily reliant on JavaScript, but delivering large JavaScript payloads can impact the speed of your site significantly. 'Render blocking resources' are JS or CSS files that are not critical for the first paint of your page, yet still need to be processed before this first render can occur.
Essentially, this means you are forcing the browser to spend extra time on network transmission, decompressing, parsing and compiling code that is not actually necessary for the initial render.
What does the Hint check?
This Hint will trigger for any internal URL that contains render blocking scripts or stylesheets;
A <script> tag that:
- Is in the <head> of the document.
- Does not have a defer attribute.
- Does not have an async attribute.
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.
How do you resolve this issue?
The goal here is to reduce the impact of render-blocking resources, which can be done by:
- Inlining critical resources
- Deferring non-critical resources
- Removing anything that is not actually used
This requires a developer working closely with the code, and a diagnostic tool like Lighthouse, to assess which resources can be optimized in this way. The links below provide some examples and workflows.
Further Reading
- Eliminate render-blocking resources (Lighthouse documentation)
- Reduce JavaScript payloads with code splitting
- 5 tricks to eliminate render blocking resources
