After the official announcement by Google, everyone has started focusing on the page loading time of their websites. According to Google, the websites having the page loading time more than three seconds aren’t SEO-friendly.
And you already know, in this era of the web, competing with millions of websites isn’t a piece of cake. You need to make sure your website is faster than others.
If you compare the website speed with the top websites, you may be lacking because most of the sites have the page loading time below two seconds.
Now let me talk about render-blocking. Every WordPress plugin has a CSS or JavaScript file, which needs to be uploaded by the user’s browser.
It means these CSS and JavaScript files are making your website slow, which is called render-blocking of JavaScript and CSS.
In this tutorial, you’re going to learn about finding such files and fixing render-blocking.
Analyze Your Website’s Page Loading Time
You can use the speed analysis tools like Pingdom Tools, but here, you needGoogle PageSpeed Insights. Fill in your site’s URL and click on analyze.
Within a few seconds, you can see the report. It’s better to improve the page loading time for the desktop. Check the current score.
According to Google, for an excellent performance, the score should be between 89-100. And I must tell you that it’s possible to achieve 100.
If you scroll down to the heading “Opportunities for you,” you can see some suggestions. From which, Eliminate render-blocking resources may be the one.
Click to see the resources, and you can see all the CSS and JavaScript files. Sometimes, you may notice any cache file.
The point is you need to focus on optimizing CSS and JavaScript files.
Use Autoptimize to Minify CSS and JavaScript Files
As you may already know that Autoptimize is a plugin which helps to optimize the coding files of a WordPress website, you can use it to fix render-blocking JavaScript and CSS files.
Go to Plugins>>Add New and search for Autoptimize. Install and activate the plugin. I hope you know how to install a WordPress plugin.
Now go to Settings>>Autoptimize and you can see options for JavaScript and CSS. Check the boxes to optimize JavaScript and CSS.
Click on Save Changes and Empty Cache if you have a caching plugin. Otherwise, click on the Save Changes button.
Now recheck your website score. If you get some positive results, perfect. Otherwise, you can use a caching plugin like W3 Total Cache to minify JavaScript and CSS codes.
Install and Activate W3 Total Cache
If you already use W3 Total Cache as a caching plugin for your WordPress website, you don’t need any other plugin to minify the website code.
Go to Performance>>General Settings and scroll down to the Minify settings. Check the box to enable and save changes.
In most of the cases, such a minifying setting solves the problem. If you still face any challenge, you need to use the specific plugin which is developed to fix render-blocking JavaScript and CSS.
For my website, you can see the current score; it’s 100 for the desktop version.
If you focus on the mobile version, you can manually add the scripts and CSS to W3 Total Cache’s minifying settings. For now, use auto option and check your site’s performance.
I Hope You Got an Idea to Fix Render-Blocking JavaScript and CSS
No doubt that websites’ speed plays a vital role in the SEO score. You can relate when you visit a website with a poor page loading time. Do you wait for long? I don’t think so.
There are tons of options available on the web. If your site is slow, someone else provides a better user experience than yours.
Conclusion
The main idea behind fixing render-blocking JavaScript and CSS file is to minify the code of these files. If you’re an advanced developer, you can minify JavaScript and CSS manually.
But if you use WordPress, there are many plugins to accomplish such a task.
Check out these top 3 WordPress hosting services:
- Click here to get the best wordpress hosting specialized for wordpress.
