Wondering How to Eliminate render-blocking resources? then keep reading, While running your site through Google PageSpeed Insights you must have come across a suggestion by PageSpeed to eliminate render blocking resources on your WordPress site.
When you land on a page, your browser reads the site’s code from top to bottom.
When the browser encounters a render blocking resource,
it stops downloading the rest of the resources until these important files are processed.
During this time, the entire rendering process is put on hold,
This slows down the loading of your website’s content.
Why is it important to eliminate render-blocking resources?
If you reduce the number of render blocking resources, you can shorten the critical rendering path, which is the sequence of steps the browser has to go through before loading your website.
This will reduce the page load time and improve the user experience and SEO of the site.
Types of render-blocking resources
Fonts added from a Content Delivery Network (CDN) or local server are also render-blocking resources.
Images and media files are non-render blocking resources.
How to eliminate render-blocking resources?
If you are a non-techie person and feel sick when you look at codes, do not worry we have two amazing methods in which you can use plugins that help you eliminate render-blocking resources.
After you have installed both the plugins, follow these steps:
- Step 3: Choose either Apply Sync or Apply to Defer in the settings box at the middle of the screen
- Step 4: Go to Settings and Open Autoptimize
- Step 6: Check the box next to Optimize CSS Code
Eliminate render-blocking resources using WP Rocket
You can follow these steps with WP Rocket Plugin to eliminate render blocking resources:
- Step 1: Install and Activate WP Rocket
- Step 2: Go to Settings and Open File Optimization
- Step 4: Check the box next to Optimize CSS Delivery