Slow sites not only affect user experience but also lowers sales and Ad revenue. In today’s world, everyone wants everything instantly, but when your site takes more than 3 seconds to load, most people consider leaving.
However, there are countless ways to improve site speed, and today, we are gonna look at one of the most important factors to improve when it comes to site speed, and it is Eliminating Render Blocking Resources.
- 1 What Are Render Blocking Resources?
- 2 How to eliminate render-blocking resources? (Manual Method)
- 3 How To Eliminate Render-Blocking Resources? (Plugin Method)
What Are Render Blocking Resources?
(Skip it if you know what it is)
According to GTmetrix, Render-blocking resources are scripts, stylesheets, and HTML imports that block or prevent the browser from rendering page content to the screen. These resources pause the First Paint – the time at which your browser renders something, for example, background colors, borders, text, or images) for the first time.
Common Render-Blocking Resources
- Third-party code
- Page builders
Are Images Comes Under Render Blocking Resources?
The answer is “No”
Images don’t come under render-blocking resources, however, it is extremely important to optimize images properly in order to improve your site speed.
Also, make sure to use a faster host because without it it’s impossible to load your site faster. Hosting plays the biggest role in site speed.
How To Detect If Your Site Has Render-Blocking Resources
Detecting renders blocking sources is really easy. You can use tools like Google Pagespeed Insight, Gtmetrix, or Pingdom.
I prefer using Pagespeed insight by Google as it has a separate section dedicated to render-blocking resources. Just enter your site’s URL and click analyze.
As you can see in the image, how clearly it is visible what we need to fix.
How to eliminate render-blocking resources? (Manual Method)
The simplest method to reduce or eliminate render-blocking resources is by installing a plugin. Normally, I don’t like the plugin method, but plugins are the easiest and most effective way to remove render-blocking resources and improve loading time.
Also, beginners might struggle while performing manual methods so it’s important to show them the plugin method so that they can also improve their site speed.
We’ll look at the plugin method but first, let’s check the manual method as it is the most reliable way.
Now, if the external script is small, you can quickly use them in your HTML document. This eliminates the network request latency completely.
Check an example of how to do this.
Let’s say your HTML document includes an external JS file –
And let’s imagine that anotherSource.js contains the following JS code:
All you want to do is copy the JS code from the second source and paste it to your primary document like this:
It’s an easy technique but effective technique that removes the need to send an external request for anotherSource.js thereby improving your loading time.
But, keep in mind that inlining the JS will end in increased file size which in turn could raise the loading time. So only inline small JS files.
If you see a large file with multiple pages of JS, then refer to one of the different solutions.
Hence, one way to solve the issue is to defer the JS loading so that it loads after the important parts of your website have completed loading. This can help stop resource contention and enhance performance.
Now, one of the steps to defer JS loading is to move it to the footer. This can be performed manually, or you can use one of the plugins listed below.
How To Remove Render Blocking CSS?
Render Blocking CSS, in a nutshell, means, CSS scripts that are preventing your website from loading properly. That means, visitors have to wait longer before seeing anything on your website.
We can’t completely abandon CSS usage because it’s still important to the look and feel of the website. Hence, the trick to reducing its effect on a site’s loading speed is to decrease its use altogether.
You can do this by:
- Using inline CSS
- Combining CSS files
- And using less CSS
If you have some coding knowledge then making these changes won’t be much of an issue. Alternatively, if you had a web developer design your site, then you can have a conversation with them on implementing these changes.
Use Inline CSS
The more CSS files your pages have, the more longer it will take the browser to load them. The best solution here is to put the CSS scripts directly in your HTML. This is described as inlining the CSS.
You have to open one of the CSS files and copy the code. Then you need to paste the CSS into your HTML file. Keep in mind that inlined CSS goes in the head section of the HTML document and it uses the Style tag. Also, It should/will look something like this:
<style> …. The Copied CSS Instructions …. </style>
After inlining the CSS code, remove the call for the CSS file.
Remember that this method is only relevant to small CSS scripts using a few lines of code. Inlining bigger files will only result in doubling the size of the HTML file, which will, in turn, add longer loading time.
When you see massive CSS files, then it is suggested that you use one of the following methods:
If your site has many CSS files, then every one of them is going to contribute to delaying site speeds as the browser loads each of them individually. What you can do to fix this problem would be combining the multiple CSS files into one single (or in some rare cases two, it depends on how large the files are) file.
You should see that your website has one large CSS file followed by multiple smaller CSS files. The smaller files are normally generated by the different widgets and plugins you have installed on your site. Some developers also like to segment their CSS into many files as it is easier to manage them.
So now, with that being said, how do you connect these multiple CSS files?
Well, it’s pretty comparable to how you inline CSS. Open one of the helping CSS files and copy the code. Then go into the main CSS file and paste the code there.
Just remember to eliminate the call for the initial CSS file since you won’t be using it anymore.
By using more limited CSS, we mean that you should only use CSS that is truly needed and remove all additional CSS from your code. But why and how will your site have extra unnecessary CSS, to begin with?
Well, the biggest offender in this area is multi-purpose WordPress themes, particularly the ones with tons of customization options. These depend on CSS to help developers immediately make design changes. However, not all the CSS is practiced by the website and ends up bloated, and therefore, slowing it down.
A related problem is faced by sites designed using frameworks like Foundation and Bootstrap. Not all of the CSS used is shown in the resulting website. Therefore, it doesn’t add to the visuals, layout, or functions but rather increases the load.
Now fixing this needs you to get technical. You will have to review your site’s code and start eliminating Render Blocking CSS manually. However, for WordPress users, there are some dedicated WordPress plugins that can assist you as well. We’ll see them later in this post.
How To Eliminate Render-Blocking Resources? (Plugin Method)
The plugin method is the easiest way to enhance your site speed. However, I don’t recommend installing too many plugins, especially, if you’re on a shared server.
Still, here is the list of plugins that can help you eliminate render-blocking resources.
Use Autoptimize + Async Plugin
Both plugins are lightweight and trusted by users. These plugins also receive updates from the developer from time to time, making them one of the most useful plugins available at the plugin store.
Both plugins are easily available in the plugin section. Just search the name and you’ll find them. Click on activate, and go to their dashboard.
If the Async option makes any kind of problems on your site, then go for Defer or excluding jQuery, which the plugin gives you an option for.
Step 3: Open the settings of Autoptimize
Autoptimize is a great plugin, and that’s why I’ve published a separate article about how to properly set up Autoptimize to get amazing website speed. Check out the post – Autoptimize Plugin Ideal Settings – Step By Step (CDN Tutorial)
Autoptimize has a lot of other options, so make sure to test most of its features to find out the most compatible settings.
Step 4: Check Your Site’s PageSpeed Score
Go to Google’s PageSpeed insight and check your scores as well as whether render-blocking resources section. I’m sure you’ll better score.
What More Can You Do?
If you want to optimize even more, then you can use Autoptimize to manually inline CSS, however, it does require CSS knowledge so it’s not something beginners can try.
WP-Rocket is by far the most advanced speed atomization plugin out there. If you have some money to invest in your blog, I highly suggest going for WP-Rocket premium. It literally worths every penny.
The sad part is, WP-Rocket is no longer available in the plugin section of WordPress, so that means you have to purchase it from their site.
Step 1: Installation Process
Go to Wp-Rocket.com, and download the file. Now, go to the plugin section and click add new, then click upload plugin. Once the plugin is uploaded or installed, activate it.
Step 2: Go to the File Optimization tab
Step 3: Test Your Site In Speed Test Tools
After activating these two features, visit the Pagespeed insight, and check your site’s score. Also, Check the Render Blocking Resource tab.
Use Asset CleanUp
Asset CleanUp is another free WordPress plugin that scans all your WordPress posts & pages and identifies all JS and CSS files that are loaded. It then gives you the opportunity to disable the JS and CSS files that are not important, thereby removing the extra load.
Step 1: Install And Activate
The plugin is easily available in the plugin section of WordPress. Search “Asset CleanUp”. Once you find it, click on install and then activate.
Step 2: Open CSS/JS Manager
The option CSS/Js Manager is visible in the menu of Asset CleanUp and easily visible. Click on it, and it will open a new dashboard where you’ll a lot of options. Here you will find all your site content starting from the homepage, to posts, pages, and custom post types. Pick the one that you want to optimize.
Step 3: Selectively Deactivate
Selecting one of the options will give you all the active CSS/JS files running on the webpage. You can now selectively deactivate the files that you don’t want to reduce the load during website rendering.
Step 4: Repeat The Steps
Once done, click Update and go to the next page, post, or custom post type and repeat step 3.
Use Hummingbird Plugin
Hummingbird plugin is also a good option. This plugin has numerous options to make your website super fast. I have published a tutorial post on how to use it effectively you can read it – How To Set Up Hummingbird Plugin Step By Step: Quick Tutorial
Step 1: Install And Activate
This plugin is also available in the plugin section. Click and install and then activate.
Step 2: Go to Asset Optimization
After activating the plugin, you should see a new “Hummingbird” option added to the left-hand menu of your WordPress dashboard. You will now need to go to Hummingbird > Asset Optimization.
Step 3: Enable Advanced Mode
Now, enable advance mode to see the option to move the JS and CSS files to the footer.
Step 4: Select the files that are causing the render-blocking issues and move them to the footer.
Now just select the JS files that are causing the render-blocking problems and move them to the footer. This should defer their loading time and provide the content above the fold to load up unhindered.
It’s A Wrap
If you find any trouble settings up anything, then please let me know through the comment section or via Contact Us page. Also, check out my other articles/tuts on how to boost your site speed.
Thanks for reading!