Render Blocking Resources Test
What is it?
This test will check if any of the webpage's JavaScript or CSS resources is blocking the render process. When the browser encounters a render blocking resource, it stops downloading the rest of the resources until these critical files are processed. In the meantime, the entire rendering process is put on hold. Aim to reduce the impact of these render-blocking URLs by inlining critical resources, deferring non-critical resources, and removing anything unused. This can greatly improve page load times and the user experience (factors which Google uses in its ranking algorithms).
Pass rate:
- Top 100 websites: 10%
- All websites: 10%
| 2021 | 29% |
|---|---|
| 2022 | 14% |
| 2023 | 10% |
100
75
50
25
0
How do I fix it ?
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
Check your website's SEO for free right now!
Product
- Pricing
- Free Tools
- Articles
- Login
- Free 7-Day Trial
© SEO Site Checkup 2020-2024 • All rights reserved