How to Eliminate Render-Blocking Resources with Autoptimize and Async JavaScript Plugin

0
7
How to Eliminate Render-Blocking Resources

How to Eliminate Render-Blocking Resources with Autoptimize and Async JavaScript Plugin

What Does “Eliminate Render-Blocking Resources” Mean?

In order to understand what render-blocking resources are and why they hurt your site’s load times, we need to start with a basic look at how a web browser renders a web page.

When a visitor lands on your site, their web browser basically starts at the top of your site’s code and reads down. Top-to-bottom, got it?

If in that process, it encounters a CSS or JavaScript file, it needs to stop “reading” while it waits to download and process that file. The time that it spends “paused” to download and parse those resources could be spent on something much more productive, like loading the part of your website’s content that’s immediately visible when someone lands on the page.

How to Test If Your Website Has Render-Blocking Resources

To assess whether or not your WordPress site currently has render-blocking resources, you can use Google PageSpeed Insights.

All you do is enter the URL that you want to test. Then, if you have a problem with render-blocking resources, PageSpeed Insights will list each individual resource in the Eliminate render-blocking resources section under Opportunities:

Autoptimize and Async JavaScript are two separate free plugins from the same developer. Together, they help you optimize the delivery of both your CSS and JavaScript.

Once you’ve installed both plugins, go to Settings → Async JavaScript and:

  • Check the box to Enable Async JavaScript at the top.
  • Choose between Apply Async and Apply Defer in the Quick Settings box.
  • If the Async option causes problems on your site, we’d recommend trying Defer or excluding jQuery, which the plugin gives you an option for.

    Once you’ve set up the Async JavaScript plugin, go to Settings → Autoptimize and:

    • Check the box to Optimize JavaScript Code
    • Check the box to Optimize CSS Code

If you’re an advanced user, you can play around with the additional JavaScript and CSS optimization settings, but most sites will be fine with the defaults.

After configuring both Autoptimize and Async JavaScript, our test site passed PageSpeed Insights’ “Eliminate render-blocking resources” audit:

If you wanted to eliminate even more of those files, you could further use Autoptimize to manually inline your critical CSS. This requires some development knowledge, though, so it’s not something non-developers should try.