CodeClouds Color Logo

WORDPRESS DEVELOPMENT | 25 August 2020

How to Remove Render-Blocking Resources

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. 

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. 

Oh alright then, what is it? 

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. 

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 very helpful: 

How to Remove Render-Blocking Resources

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 sections: 

How to Remove Render-Blocking Resources
How to Remove Render-Blocking Resources
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.

How to Remove Render-Blocking Resources
You’ll find a file that looks like this: 

How to Remove Render-Blocking Resources
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: 

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

How to Remove Render-Blocking Resources
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. 

Wordpress developers

Originally written August 25, 2020. Last updated August 26th, 2020

 Views

Written by CodeClouds

CodeClouds provides effective and quality solutions for various web technologies. We have responsive and swift communication 18/5 and deliver quality development services around the globe.

  • facebook
  • twitter
  • linkedin
  • pinterest
  • whatsup

Related Articles

How to Create a WordPress Menu, and the 7 Best Menu Plugins

WORDPRESS DEVELOPMENT | 28 September 2020

How to Create a WordPress Menu, and the 7 Best Menu Plugins

We love WordPress, and we love helping you get as much out of it as possible. Today we’re talking about menus: how to build one, and the best plugins to make it your own.

9 Essential WordPress Plugins for Real Estate Agents

WORDPRESS DEVELOPMENT | 14 September 2020

9 Essential WordPress Plugins for Real Estate Agents

A lot of real estate agents and realtors have told us that WordPress Core doesn’t cut it for building their websites, and that’s what we’re doing today: we’re helping you choose the right plugin(s) for your site so you can stop ferreting around in your CMS and get back to making sales.