Eliminate render blocking resources
Why is this important?
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.