When a webpage contains CSS or JavaScript that hinders the immediate loading of the page, it's said to contain render blocking resources.
Why is this important?
As webpages increasingly depend on JavaScript, the size of JavaScript files can greatly slow down site performance. 'Render blocking resources' refer to JS or CSS that the browser needs to process before it can show the first content of your page.
Basically, this means your site's load time is delayed by the time taken to get, unpack, and use code that isn't even needed for the first thing users see.
What does the Optimization check?
This Optimization will fire if it detects render blocking code in an internal URL:
<script> tags inside the <head>, not marked with 'defer' or 'async'.<link rel="stylesheet"> tags, not marked with 'disabled' or not tailored to the user's device via the 'media' attribute.
How do you resolve this issue?
To limit the effect of render-blocking content, consider these solutions:
- Embed vital resources directly- Defer loading non-essential resources- Exclude unused code components
Addressing this effectively requires a developer to understand the codebase and utilize evaluation tools such as Lighthouse to identify which files can be enhanced.
The following resources offer further guidance: