How to Remove Render-Blocking Resources

      
If you’ve run PageSpeed Insights recently (and if you’ve Googled and come across this blog) then you’ve probably run into an issue with render blocking resources on your website. Different pagespeed tools variously call the issue different things, but they all refer to render-blocking resources, and so today we’re going to help you sort that out. They’re a key culprit in slow load times, and managing them properly can give you a significant boost to both site speed and SEO. 

First we need to understand what a render-blocking resource is. 

When a browser loads your site, it does not load everything simultaneously: it does so in an order laid out in your critical request chain, or CRC. If your site is using large JavaScript or CSS files, the rest of the site will stop loading while they download and execute. What this can mean is that half of your site doesn’t pop in for 2–3 seconds, and users are left looking at a broken or incomplete web page while it sorts itself out. Or, a render-blocking resource is anything large enough to have a noticeable effect on load time when it blocks up the CRC. In 99.9% of cases this is JavaScript, and for the sake of simplicity I’m going to talk about ‘scripts’ going forward, though I’m referring to JS, CSS, or any other big boys blocking up the hallway. 

This is the default behaviour of any internet client. Thankfully, there are ways to tag your JS and CSS that let the browser know that it needs to be loaded and executed differently, and that’s what we’re here for today. 

There are two main attributes we can use here: async and defer. 

I’ve always found this great diagram by Growing with the Web very helpful: 

You add these attributes into the HTML like so: 

<script src=”my_cool_script.js” async></script> 

<script src=”my_cool_script.js” defer></script> 

Okay, don’t panic, there are other ways to handle async and defer that don’t require you to do into the code and move anything around. It’ll depend on which CMS you’re using—we’re going to focus on WordPress today since it’s the CMS we run into the most, but if you’re using something different, you need to find your relevant plugin library and search for ‘async’ and ‘defer’. 

If you’re using WordPress, the best plugin is Autoptimize. It does a lot more than simply remove render-blocking resources and if you’re looking to squeeze out some extra seconds I highly recommend spending an hour or so exploring the menu, but for now we’re just focussing on our one problem. Defer is in the main JS, CSS & HTML menu, under the JS Options and CSS Options sections: 

      
      
JavaScript will sort itself out, but for CSS you’re going to need to find the code in question and paste it into the field that appears. This is so you have control over which CSS gets deferred: if you simply defer all then you’re going to have users staring at bare HTML (a ‘fouc’ or ‘flash of unstyled content’). You want to paste non-critical CSS into this section only. To find your CSS, go appearance → editor/theme editor.

      
You’ll find a file that looks like this: 

      
You want to copy (not cut) any ‘above the fold’ CSS you want to load first, and put it into the field in Autoptimize. If you’re not confident doing this yourself, don’t be afraid to ask for professional help. CodeClouds have experienced and affordable wordpress developers and CSS developers you can hire to help out today. 

You’ll find Javascript async under the Extra menu, and it requires you to input the file names: 

      
If you’re still having problems, try their additional Critical CSS plugin, which is the last tab on the menu.       
        
      
Simply sort out the options you want, then scroll to the bottom and click ‘Save Changes’. 

      
Now run your speed test again and see whether or not you’ve still got render-blocking resources. I’d be willing to put down good money that you don’t. Please note that not all scripts can be deferred, it’s crucial that some scripts are loaded before all other elements on the page, like analytics- after all if someone loaded the page then bounced before it was done loading, it wouldn’t register they were there.

If you’re still running into trouble, well … it would be crazy if there were a team of incredible WordPress developers somewhere nearby, on-call, waiting to help you out; devilishly handsome WordPress developers at very reasonable rates. But where would find somebody like that?  Maybe the answer was right under your nose all along.