Easiest methods to fix render-blocking JavaScript and CSS
The loading speed of your website plays a key role in attracting and retaining the users. Of course, other aspects like design and content are also crucial, but a website that loads faster is very likely to bring the visitors. The other aspects come later.
Why site speed is a primary aspect? Well, if your site loads slow, then you wouldn’t be able to rank high in search results. Google takes site speed in consideration while ranking the websites in search results. If you rank lower, your site will attract less visitors.
Further, even if a visitor comes to your site and it loads slow, he will leave it without clicking further. According to Kissmetrics, 47% of visitors wait for only 2 seconds for a webpage to load. Further 40% of them abandon the site if it takes more than 3 seconds to load.
What affects the speed of your site? There are several factors that might be slowing down your site. These can include unoptimized images, unclean code, excessive HTTP requests, choosing free web hosting options, too many ads, and render-blocking resources.
This article is about fixing the render-blocking resources to accelerate your site speed.
What are render-blocking resources?
When someone visits your site from their browsers, the browser sends requests to all the scripts in a queue. Generally, the website loads in browser following a number of things that happen at backend to render (display) the site.
However, sometimes there is a queue of scripts that doesn’t allow the webpages to render in browser. These scripts are called render-blocking resources.
Impact of render-blocking resources
Render-blocking JavaScript and CSS files are located in above-the-fold (ATF) content of a webpage. When a webpage loads in a browser, the content that appears is the ATF content. The other parts of a webpage where users visit by scrolling or clicking are non-ATF content.
Hence, the browser loads the site or webpage after loading and reading the CSS and JavaScript files. If these files take a lot of time in loading, the visitors will see a blank or loading screen. This will result in visitors leaving the site without seeing what will load and what you have in for them.
This is especially important if you are building a website with WordPress, because it also loads themes and plugins.
How to know if your website is slow because of render-blocking resources?
Since a lot of factors contribute to the speed of a website, you can’t decide on yourself whether your site is slow because of render-blocking JavaScript or CSS files or any other issues.
What you need to do is use a tool like Google PageSpeed Insights, that allows you to gain insights into the issues that reduce site speed, as well as the score of your site based on a number of aspects. Most of the websites score between 50 to 70 out of 100.
This tool will show whether your site is facing render-blocking issues or any other problem.
How to fix render-blocking resources?
Coming to the most important point, it’s crucial for you to fix the render-blocking resources in order to optimize the loading speed of your site.
Fixing render-blocking JavaScript and CSS
Again, first use the Google PageSpeed Insights tool to identify the number of JS and CSS files loading in browser, and their place in HTML.
Follow these steps to eliminate the render-blocking files:
1. Minify JS and CSS: Remove the unnecessary whitespace and comments in the code.
2. Combine JS and CSS files: You can choose to combine several JS and CSS files. This will reduce the total number of such files.
3. Asynchronous loading: Using this method, you can make the JS files to wait for loading before the other things on a webpage are ready.
4. Adding these files to bottom of HTML files: When you insert the render-blocking resources to bottom of HTML files, the results can be improved.
Plugins to fix render-blocking resources
Now that you have identified the render-blocking resources and code, the use of W3 Total Cache plugin can make things easier for you in fixing the problem.
First, install and activate the plugin, and the follow the steps below:
- Visit Performance > General Settings. Go to Minify option.
- Under the Minify option, click on Enable box.
- Hover to Minify mode option, select Manual, and click on Save All settings.
- Now you will need to insert the JS and CSS scripts which you want to minify. From the Google PageSpeed Insights tool, copy the URLs of the scripts.
- Get back to WordPress and visit Performance > Minify. Remember, the JS files and CSS files will need to be minified separately.
- Taking care of JS files first, visit the JS heading and then Operations in areas option.
- Find JS file management, select your active theme, and click on Add Script. Now, just paste the JS URLs that you had copied from PageSpeed tool. Remember, you need to copy-paste the URLs one by one.
- Coming to render-blocking CSS files, scroll to the CSS section on the same page. Find CSS file management, select your active theme, and click on Add Script. Here, copy-paste the CSS URLs one by one.
- Lastly, click on Save settings and purge cache to finish the process.
As compared to other methods of fixing render-blocking JSS and CSS files, the Autoptimize plugin is an easier one.
- Install and active the plugin. Visit Settings and then Autoptimize in WordPress.
- You will find boxes there described as Optimize JavaScript Code? and Optimize CSS code? Check both these boxes.
- Click Save Changes and Empty Cache button to finish the process.
In most of the cases, this process does all the job. But if your site is still facing the render-blocking issues, then you will need to use PageSpeed tool to find links, and then use Advanced options in this plugin.
Wrapping up:
Render-blocking is a serious issue for a lot of websites that load slow. Using the methods mentioned above, you can easily resolve this serious issue of render-blocking JS and CSS files.
Implement these methods and let us know your experience.