If you’ve run a website speed check and you’re wondering what “eliminate render-blocking resources” means, then you’re in the right place.
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.
Oh alright then, what is it?
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.
Async and Defer
There are two main attributes we can use here: async and defer.
- Async allows the rest of the site to continue loading while the script downloads, then pauses all other loading when the script executes
- Defer allows the rest of the site to continue loading while the script downloads, then executes it only after the rest of the site has loaded
I’ve always found this great diagram by Growing with the Web
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>
I’m Not a Developer! I Don’t Know How To Do That!
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
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.
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.