Render Blocking Resources Test
About Render Blocking Resources Test
In order to pass this test, you have to reduce the impact of render-blocking resources.
First, you have to identify what's critical and what's not. You can use the Chrome DevTools (Coverage tab) to identify non-critical CSS and JS.
Once you've identified critical code, you can try the below methods to eliminate render-blocking resources:
- inline critical JS within a script tag in your HTML document
- inline critical CSS required for the first paint inside a style block in the head of the HTML document
- move the script and link tags at the end of the HTML document
- add async or defer attributes to non-critical script or link tags
- split CSS styles into different files, organized by media query
- compress and minify your text-based resources