Why and How To Eliminate Render-blocking Resources Easily

How To Eliminate Render-Blocking Resources

Over the years, techniques have come and gone for reducing or eliminating render blocking resources. There are some techniques that have been proven to work. 

How To Eliminate Render-Blocking JavaScript

To eliminate a JavaScript tag from being a render blocking resource, you can now use the DEFER or ASYNC attributes. 

<script defer type=’text/javascript’ src=’//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js#038;ver=2.2.4′ id=’jquery-js’></script>

• DEFER tells the browser to download files as the page is being rendered and execute files in sequential order once the page has finished rendering.
• ASYNC tells the browser to download files as the page is being rendered and execute files as soon as they are available.

The best of these two is DEFER if possible. This way the display can finish painting and then the JavaScript can execute. As you can see in the example above, I defer the loading of jQuery until the page is painted. Then, once it loads, it will execute. Since jQuery is a large library, deferring it will help the paint, unless my page has something that requires jQuery.

How To Eliminate Render-Blocking CSS

CSS is a little tricky to arrange. When the browser sees a CSS element in the code, it has to reference the rules it has loaded so far and see if it has that rule. If it hasn’t yet loaded that rule, then it has to pause the rendering until that rule is loaded. 

Google has coined the term “critical CSS”. Critical CSS is the CSS that is referenced in the part of the page that you can see when the page displays. For instance, if you have a footer in your page that has a CSS rule styling it, if that footer isn’t visible until your viewer scrolls down the page, then that CSS rule is not critical. 

Google recommends that you pull out all of your critical CSS and put it inline in the HTML. This removes the CSS from being a render blocking resource because the browser has all of the CSS it absolutely has to have to display the visible part of the page.

This is tricky because this means you have to look at all of your CSS and pull out pieces. The best way is to use the Google Chrome Coverage Tool. It will show you the CSS that you are loading that is non-critical (red bar) and critical (green bar)

By pulling the critical CSS out and placing it inline, you can remove the CSS as a render-blocking resource.

This sounds easy but in reality, refactoring your CSS like this can be very difficult, as this is an advanced technique.

How to Reduce Render-Blocking Resources In WordPress With The SiteGround Optimizer Plugin

One of the things you can do that doesn’t require you to refactor your code or hand-edit your HTML is to use the SiteGround Optimizer. Even if you don’t host with SiteGround, this plugin will help reduce the render-blocking resources on your page.

There are a couple of things you can do with the plugin

1) Enable Memcached

First, if you are hosting with SiteGround, make sure you go to your Site Tools and turn on Memcached. That’s not related to render-blocking resources but it will really make a difference.

Next, go to the plugin’s settings menu and select “Frontend”. 

Now, the settings we are about to play with can mess up your site if you aren’t careful. I recommend changing one thing at a time and then reloading your site (in a different browser). Make sure everything is still working. Then and only then, make the next change. 

2) Optimize your CSS

In the CSS section, select “Minify CSS files”. This optimization is safe and straightforward. It will remove the obsolete empty spaces, new lines, comments, etc from the code lowering the size of your pages.

Next, Select “Combine CSS Files”. This is probably the #1 thing you can do to eliminate render-blocking resources. Nevertheless, you should use it with caution, as not in all sites might perform the same way.

If that works, then also, turn on “Preload Combined CSS”. This will force the CSS to be loaded early in the process so your CSS is there when you need it.

3) Optimize your Javascript

Next, go to the JavaScript tab.

Let’s take the same actions:

• Minify JavaScript Files

• Combine JavaScript Files

• Defer Render-blocking JavaScript

Usually, there are many fewer problems combining JavaScript than CSS. On every site I tried it, it worked. That last one is important, it will add the DEFER tag to the combined JavaScript. 

When you’ve done all you can on your test site, you down to 24 render-blocking resources from 32. That’s a really good start.

Your next step on this site is to locate all my critical CSS and in-line it. Then defer all your other CSS. That will remove almost all of the remaining render-blockers. 

Wrap Up

After you’ve picked the low-hanging fruit in speeding up your website:

• Caching
• Compression
• Database Optimization

Then it’s time to start looking at the small tweaks. These are the small tweaks. That doesn’t mean they are unimportant. Remember, search engines have stated that the speed at which our pages load factors into our SEO ranking. If you want to improve your SEO ranking, improve your page load speed. Every little bit helps, and it is even better when you have the right tools to make things easy such as the SiteGround Optimizer plugin, that you can download for free here.