Is your WordPress website slow and when you run Google Page Insight you see an alert that you need to eliminate the render-blocking resources on your website. That might be the reason you are reading this article. Well in this article we are going to solve this issue, so without wasting any time let’s know about it.
What is render-blocking?
To understand render-blocking and how it decreases your website performance, we need to understand how the browser loads content from the server and renders it? When a visitor visits your site, their web gets the index file from the server or the page whatever he is visiting and starts reading it from the top to the bottom.
While reading a page like this browser encounters some CSS and JavaScript files which are needed to be downloaded. So to download those files browser needs to stop reading the file and let the file download and after downloading the file browser starts reading the page content again.
This very download process delays the content from rendering and your visitor may see some delay in loading the page. It is important to let those files download cause they are important to make your site look good and perform well. But not all files are equally necessary and you should priorities the important files first.
Now let’s understand it with an example, suppose you have a very cool animation for the newsletter section which is just above your footer, that code for that animation is written in “newslater_animation.js”. Now when the visitor visits your website he sees the header and top hero of your image and then after he scrolls at the bottom he will see the newsletter and animation.
Now if you load that “newslater_animation.js” file from the head tag of your website, the browser starts to read the file from the top and it first reads the head tag, now since the browser load animation for the newsletter it will slow down the content loading until the file gets completely downloaded.
So it is completely useless to download the file on top since there are chance user may don’t even see that part of your website. And the website looks slow to users since this file download slows down the content rendering on your browser.
What are render-blocking resources?
The render-blocking resources are CSS and JavaScript files which are being downloaded unnecessarily. Do note that not all the CSS and JavaScript files are render-blocking content. Such as CSS and JavaScript files of header or top hero. They need to be downloaded first else the user will see unstyled HTML which is also known as a flash of unstyled content (FOUC).
Are images render-blocking resources?
No images are not considered render-blocking resources cause they only load up when they require. But you should always optimize them for faster performance. We have shared info on how you can optimize your images in this article.
How to Identify render-blocking resources?
To know if your website has render-blocking content or not you can use several different tools, the easiest of them is Google PageSpeed Insight. You just need to paste your URL and you can see if your site has any render-blocking content.
If you click on the render-blocking drop down you will see the complete list of all the potential render-blocking files and the amount of time they are taking while being downloaded.
How to eliminate render-blocking in WordPress?
Now the main question is how you can eliminate render-blocking resources from your website? To eliminate the render-blocking you can either do manual code change or use WordPress plugins. Since we are mainly focusing on WordPress plugins is best for us but still, it would be better how you know how these plugins are doing it.
Since CSS and JavaScript are two different types of files we need to address them separately. So let’s know about both of them. We are not going into full detail on how to edit them manually but we can at least have an idea of its implementation.
Eliminate render-blocking CSS
To eliminate render-blocking CSS The Concept of Critical CSS is used. In this technique, the CSS for the content above-the-fold (content above the fold means the website content user sees without scrolling the page) gets extracted and loads before the page load for the fastest execution.
The rest of the CSS of that page gets loaded asynchronously after the main content gets loaded. There are several other methods for doing it such as separating the files into different files and loading them as per requirement. You can also use media queries to load the CSS for smaller devices when the page gets access from smaller devices.
Eliminate render-blocking JavaScript
To eliminate render-blocking in JavaScript we can do three things on the code level. First, we can use inline JavaScript. In this method, we can directly write our JavaScript the same line as our HTML so it will eliminate the requirement of making an eternal request for a JS file.
The second method is to load JavaScript Asyncronassly which means your JavaScript file gets loaded in an asynchronous manner. The third option is to use defer, defer downloads the file while HTML parsing but executes the code only after the parse completes.
Plugins for eliminating render-blocking
The manual coding method is not recommended for WordPress because most of us use plugins and themes for our WordPress website and manually editing them or site can break our website. But there are tons of plugins available for doing this job so why code? Now let’s know about those plugins.
For eliminating render-blocking we have both types of plugins free and paid. And we will be going to tell you about both of them.
Free plugins
1. Autoptimize and Async JavaScript: Autoptimize is one of the most popular free plugins for optimizing your CSS and JavaScript files. It has over 1 million downloads and 4.5 stars rating by more than a thousand users. Along with this plugin, you will also need Async JavaScript both of these plugins are built by the same developer and you will need both of them.
To use the Auptomize plugin simply download and install it from the WordPress plugin store. After activating the plugin in your dashboard setting menu you will see the new option called Autoptimize.
Now, checkmark Optimize JavaScript Code.
After that scroll down and checkmark Optimize CSS Code.
Installation of Async JavaScript is the same as Autoptimize or any plugin. After activating the plugin in your dashboard>settings you will see the option Async JavaScript click on it.
Now checkmark Enable Async JavaScript at the top and from Quick Settings choose between Async or Defer.
If async causes any issue for your website choose to defer option with excluding the jQuery option.
If you want more advanced options plugins do offer more advanced options and you can check out and try them but beware if you don’t know what you are doing don’t change anything. Also, most of the sites will just work fine with default options.
Another thing to note about Autoptimize also provides a paid option critical CSS for $5 for a month. This option will unlock critical loading for your webpage which can really boost your page speed.
Paid plugins
1.WP Rocket: WP Rocket one of the most popular plugins for page speed and it offers almost every possible requirement for speeding up your website page. It can eliminate render-blocking for your WordPress page very efficiently. This plugin costs $49 for a year for a single website.
To eliminate render-blocking content from your site using this plugin, purchase and install this plugin on your site. Since it is only available as a premium plugin you won’t find it on the WordPress plugin store. You will get a zip file from the site after you purchase and you can upload that zip file into Plugin>Add New>Upload Plugin.
After that from your dashboard>settings go to the WP Rocket option and choose File Optimization.
Now, checkmark Optimize CSS Delivery for optimizing the CSS of your website.
For JavaScript checkmark Load JavaScript Deferred.
WP rocket also has many more features for optimizing your website, but it doesn’t offer any free version, to use this plugin you have to purchase and install it but it will be totally worth your money.
Troubleshooting
Now since you have completed the setup you need to know some basic trouble setting tips which are mentioned below.
- Always keep a backup of your site before using any kind of optimization plugin since they can break your website.
- Also, always cross-check multiple times in Google Page Speed and by yourself if the site is running smoothly after the changes.
- Sometimes after enabling these plugins Google Page Speed doesn’t start showing render-blocking issue solved instantly, so wait for few minutes and test again.
Conclusion
Now you know how you can eliminate render-blocking resources from your website both for free and paid. We hope you can implement these methods efficiently and your site will run faster and smoother. If you face any issues while following this tutorial let us know in the comment below. If you have any suggestions for this topic share your thoughts with us too.
