When you’ve checked your WordPress site details via PageSpeed Insights or GT Matrix, PageSpeed Insights or GT Matrix may have told you that you need to Eliminate render-blocking resources on your WordPress site, Which is delaying the loading of the page. In fact, this is probably the reason why you have come to this page looking for a solution to this problem and are reading this post right now. So let us tell you that in this post we have told you such a safe and easy way to fix render-blocking resources that, you will be surprised, because with only one popular and free plugin you can deal with this problem as well. You can also increase the speed of your WordPress site.
Meaning of “Eliminate render-blocking resources”
Before understanding what render-blocking resources are and why they increase the load time of your site, we need to understand how a browser renders a web page.
When a visitor comes to your site, or opens a webpage on your site, their web browser basically starts reading from the top of your site’s code and goes down. That is, from top to bottom. This initial process is called page rendering and should be completed in a very short time. Since the browser starts displaying the content of the webpage in the rendering process itself.
If the browser encounters a basic, naked, or unprocessed CSS, Stylesheet or JavaScript file between <head> and </head> in the process, it will be asked to “read or render” that file while waiting for it to be downloaded and processed, have to shut down. In such a situation, your website appears to be paused in the user’s device and the content of your website is visible to the user for some time. That’s why PageSpeed Insights or GT Matrix is supposed to remove those resources so that your website can load or open too quickly on the user’s device. However, other factors affect the loading time of a webpage. At the same time, it’s important to understand that not all CSS and JavaScript files are render-blocking resources. PageSpeed Insights or GT Matrix reports those render-blocking resources.
The time taken by the browser to download and parse those resources can be spent on some more important elements, such as loading the portion of your website’s content that requires a visitor to the page. But it should be visible immediately.
When PageSpeed Insights or GT Matrix tells you to eliminate render-blocking resources, it means, “Don’t load unnecessary resources at the top of your site’s code because it can cause the visitor’s browser to block your rendering.” It is taking more time to download or display the visible part quickly.
How to fix or Eliminate render-blocking resources
The strategy here for fixing render-blocking resources is based on the plugin. We go into detail in this article on how to eliminate render-blocking resources with plugins, as follows:
First of all, open your WordPress dashboard, then go to the plugins section and install the plugin named “Autoptimize” and then activate it. Since we’re only explaining how to Eliminate render-blocking resources with the “Autoptimize” plugin here.
Now open the Dashboard of the Autoptimize Plugin. Its dashboard will show four sections named “JS, CSS & HTML”, “Image”, “Critical CSS, “Extra” and “Optimize More”.
Now check the box for ‘Eliminate render-blocking CSS‘ in the ‘CSS Option’ section of the “JS, CSS & HTML” section, and in the box below that includes only the ones provided by PageSpeed Insights to Eliminate render-blocking resources Copy and paste any one or two CSS links and then save using the save button below.
Note that this does not include adding a CSS link to a Google font, as the Google font will be processed further.
Now in the ‘Google Fonts’ section of the “Extra” section check the box ‘Combine and load fonts asynchronously with webfonts.js (depreciated)‘ in the fifth option, and then in the box ‘Async Javascript files (advanced user)‘ below Google Copy and paste the Javascript link provided by PageSpeed Insights to Eliminate render-blocking resources and then save it using the Save button below.
Now when you check the URL of any of your webpages by PageSpeed Insights, you will see Eliminate render-blocking resources with a green mark in the passed audit.
If a CSS link is still blocking the render, then copy that link to Google in the box below to ‘Eliminate render-blocking CSS’ in the ‘CSS Option’ section of the “JS, CSS & HTML” section Copy and paste that CSS link to Eliminate render-blocking resources provided by PageSpeed Insights and then save this task using the Save button below.
Now when you check the URL of any of your webpages by PageSpeed Insights, you will see Eliminate render-blocking resources in the passed audit.
Conclusion
In this article, we have explained how to eliminate render-blocking resources of WordPress with only one plugin because ‘Autoptimize’ plugin is very popular and safe plugin using which you can eliminate render-blocking resources as well as your website. The speed of your site can also be increased.
Able People Encourage Us By Donating : सामर्थ्यवान व्यक्ति हमें दान देकर उत्साहित करें।
Thanks for reading: Fix to Eliminate render-blocking resources in WordPress, Please, share this article. If this article helped you, then you must write your feedback in the comment box.
