“Render-blocking resources” — if you’ve seen this pop up while speed testing your website, or heard about it as a common cause of slow loading speed, you’re probably baffled. You’re looking for ways to speed up your website and get rid of any extraneous code slowing it down, but where do you even start in fixing this?
Lucky for you, eliminating render-blocking resources isn’t so hard once you know what you’re dealing with. A simple plugin can do the trick, or you can even take care of it manually if you’d rather do that.
Totally lost? We’ll explain in simple terms what render-blocking resources are, how to know if your site has them, and what you can do about them.
What are Render-Blocking Resources?
That’s what render-blocking means: It stops the page from displaying until the user has finished loading it. All they’ll get is a blank white screen.
Why Get Rid of Render-Blocking Resources?
So people have to wait for a few more seconds (or even milliseconds!) to load — who cares? But it can have a bigger impact on your visitors than you might think.
When it comes to loading times, every second counts. More and more website owners learn how to compress their images and code, and people have come to rely on those faster loading speeds. If you’re not keeping up, chances are, they’ll just click out and find a different site.
There’s also people on less powerful mobile devices or slower Internet to consider. You might be able to load your own site relatively quickly on a desktop computer, but people on phones or tablets could be struggling and waiting several seconds just to get past the white screen.
You want to do everything in your power to get rid of anything that could bog your site down. Even little optimizations like removing render-blocking resources can make a huge difference for some people.
Does Your Website Have Render-Blocking Resources?
You may be here because you’ve been told your site has render-blocking resources and aren’t sure how to fix it. But if you haven’t tested it yet, now’s the time to do so. There are several free services that can point out common bottlenecks impacting your loading speed — and they can tell you if you have scripts on your site that are loading inefficiently.
PageSpeed Insights is the most popular of these tools. You can put any URL you want in to see what their score is. Go ahead and enter your site’s address now.
After a few seconds, the results will appear. Scroll down and you’ll find opportunities you can take advantage of to improve loading times, along with audits your website did pass. If it does have render-blocking resources, you should see them under the Opportunity tab.
You may be wondering: Is it important to get a perfect PageSpeed score? The answer is that it depends. Remember that this is an automated tool and only intended as a guide to get you on the right track. If you’re sacrificing functionality or user experience to get a perfect score, you’re not gaining anything at all.
But render-blocking resources are definitely something you’ll want to get rid of, so let’s get into some methods of removing them.
It’s certainly not necessary to deal with this issue manually, as there are many plugins out there that are much easier to use and we cover them below. But if you feel comfortable navigating code and prefer to use as few plugins as possible, you can always do all this yourself.
defer attribute does the same, but it executes the script only once the HTML is done parsing.
When should you use either attribute?
async can sometimes break scripts dependent on load order such as jQuery, so when in doubt, use
defer; it always executes scripts in the proper order. You can use
async on independent scripts that don’t rely on anything else to load.
Fixing render-blocking CSS can take a little more work. You can inline CSS that renders above the fold by placing them in the
<head> section of your HTML document. However, only do this with small files, and only with styles the viewer will instantly see.
Remember: the coverage tab in browser developer tools can help you quickly identify the elements that your visitors need to load first, and help you identify unused code that may be able to be removed.
Plugins to Eliminate Render-Blocking Resources
Just a note: Before using any of these plugins, be sure to backup your website in case something goes wrong.
Made by the same developer, these two plugins aim to help you stop those page-bloating scripts and move critical code into the head where it loads first.
Autoptimize is an all-in-one optimization plugin. Besides minifying images, HTML, and other scripts, it can also inline CSS and defer non-critical scripts. All this is available with the click of a button. Developers can customize the plugin for their needs with advanced options and an API.
That will usually do it, but if you encounter problems, you could experiment with the options and with enabling or disabling Aggregate JS Files/Aggregate CSS Files.
It’s a good idea to start off with Autoptimize, and if you still get penalized for render-blocking resources, give AsyncJS a try to clean up any loose ends.
defer. Test it out, and if
async causes your page to break, turn on
defer instead. You should also Defer or Exclude jQuery as enabling
async on it will almost definitely break your site.
One downside to Autoptimize is that it can be a little difficult to configure. WP Rocket is a premium plugin designed specifically for ease of use no matter your skill level. It caches, it compresses, it minifies, and of course it defers those render-blocking resources.
At $49 per year (and you can continue using it without support or updates forever), it’s fairly affordable for all the features it offers, and the easy setup of course.
This last plugin is a little more involved. It will require you to manually identify and block the files that are causing the render-blocking error. If you’d rather just tick a box and be done then you should try WP Rocket or Autoptimize, but W3 Total Cache allows you to have finer control over which files to defer
Another benefit of W3 Total Cache over other plugins is that you probably already have it installed. It’s among the most popular caching plugins (and every WordPress installation should have one), so you won’t need to bloat your site with extra addons.
Back in your WordPress dashboard, go to Performance > General Settings and make sure Minify is enabled and set to Manual mode.
Now head to Performance > Minify. Under JS minify settings, in the Operations in areas box, set the Before </head> Embed type to Non-blocking using “defer”.
Next scroll down to CSS file management and click Add a style sheet. Paste in the stylesheet URLs that you were penalized for.
With all that done, click Save Settings and Purge Caches. If configured correctly, your site should now load faster and score better in PageSpeed.
Get Rid of Render-Blocking Resources in WordPress for Good
When you’re first faced with the task of getting rid of render-blocking resources (and everything else in your PageSpeed results!), it might be overwhelming trying to tackle all this. But thanks to WordPress plugins, blocking problematic scripts is super easy. You’ll never need to directly edit any code and risk breaking your site.
Autoptimize and its sister plugin AsyncJS are good free choices to get started. If you have trouble configuring them or don’t notice any changes, WP Rocket is premium but offers support and quicker setup. And W3 Total Cache is the hardest to use, but definitely the best choice if you want individual control over each file you want to block.
What was your PageSpeed score before and after optimizing your site? Tell us in the comments how big of a boost you got!