How to Eliminate Render-Blocking Resources

A cartoon man pointing at a speed dial to represent website speed test

Thankfully the days of dial-up internet are gone. But if your website is loading so slowly that you’re getting flashbacks of logging on to AOL for the first time, then your site could have a problem with how it’s rendering. 

In this guide to how to eliminate render-blocking resources, we’ll review your options for optimizing and increasing your site’s loading speed.

You’ll learn:

  • How websites load or render
  • What a render-blocking resource is
  • How to test your site’s speed
  • Options for eliminating render-blocking resources

Understanding the Rendering Process

When a browser loads a website, the browser reads the site’s source code from top to bottom. Before loading any body content, the browser will read and render everything in the page header. It then works its way down the page. The process to download all elements on the page from top to bottom is rendering.

If your site has a rendering problem, the header often is the culprit. Headers often include links to external resources like CSS and JavaScript files. CSS impacts the design and layout of a site. JavaScripts can affect appearance, functionality, and even content. When a browser sees a link to those types of files, it downloads them and applies them to the page before moving to the next line of code. 

What is a Render-Blocking Resource? 

Because a browser doesn’t know if or how your CSS or JavaScript file will impact the rest of the page, the browser stops rendering until it fully downloads and applies the files. This process doesn’t happen in the background. The browser loads one file at a time before moving on to the next one and eventually loading your website’s body content. Since rendering pauses while the browser downloads and applies these files, these scripts and stylesheets are “render-blocking resources.” 

How to Test Your Site’s Speed

The easiest way to tell if your site has a render-blocking resource is to open it and watch the page load. You’ll need to clear your cache or do this on a different device than you’ve used before. Otherwise, your machine will load your site from memory. If it takes a while for your site to load, especially the above-the-fold content, it could mean it has too many CSS and JavaScript files. 

If you suspect your site isn’t loading at peak speed, the next step is to test it officially. There are a variety of web tools for testing site loading speeds. The easiest is probably Google’s PageSpeed Insights. All you have to do is input the URL for the page you want to test, and Google will analyze it. You’ll receive your results within a minute, including a performance score at the top of the page. If you keep scrolling, you’ll get a list of recommendations for how to improve your site’s loading time. In the example below, you can see the recommendation list in order of impact. The one that will have the most significant impact on loading time is likely to eliminate render-blocking resources. 

We ran a PageSpeed Insight’s test on Oatly’s product page. It runs on Shopify. And as you can see, this test gives them insights on exactly how they can optimize their site. 

Oatley page speed insights result

Options for Eliminating Render-Blocking Resources

If you’ve tested your site and know you need to reduce the number of render-blocking resources, you have a couple of options. You can work with a developer to change the way your site loads or use a plugin to reduce the external resources needed to load your site. 

How to Eliminate Render-Blocking Resources by Changing How your Site Loads

Developers use a couple of options to modify how a page renders. The methods are different for JavaScript and CSS files. Unless you know a lot about coding, you’ll probably need a developer to do this work. 

Eliminating Render-Blocking JavaScript

There are two coding options you can use for dealing with render-block scripts:

  • Async. Using this option tells the browser to continue parsing the page while the file downloads. Once the file is downloaded, the browser will stop parsing and execute the script. 
  • Defer. With this option, you’re instructing the browser to download the JavaScript file in the background and only execute and apply it after the rest of the page renders. 

If you’re using Async loading, you’ll need to be careful that your scripts don’t rely on other resources. You could run into a situation where the script doesn’t work because the additional resources required haven’t finished downloading yet. 

Eliminating Render-Blocking CSS

You have to be careful when deciding to delay loading your CSS files because your end goal is to make sure the first thing people see — the above-the-fold content — loads fast and correctly. If you delay loading CSS to display your homepage hero section, you could end up with a broken site. 

To eliminate render-blocking CSS, we recommend:

  • Start by removing any unused CSS. You can learn how in our complete guide on how to remove unused CSS from WordPress
  • Next, determine what CSS is needed to render your above-the-fold sections and deliver that inline in the HTML. 
  • Add media attributes to your CSS links to tell the browser to only pull in the stylesheets for that device type. In other words, you’re telling the browser this is the CSS for mobile. A desktop device won’t even bother downloading it. 
  • You’ll then load the rest of your CSS asynchronously by adding them to a JavaScript file that you’re loading with the asynchronous or deferred options we discussed earlier. 

How to Eliminate Render-Blocking Resources with WordPress Plugins

Implementing script and CSS changes often requires the help of a developer. If you’re looking for less technical options, a couple of WordPress plugins can help. You’ll likely experience better results using the techniques we’ve already discussed. But these plugins are a decent option if you lack development resources or expertise.

Two WordPress plugins you can use for render-blocking are:

  • WP Rocket. This paid plugin is primarily a caching plugin design to increase page loading speeds. But, it also includes options for reducing render-blocking resources. Under the file optimization tab, you’ll find options to optimize CSS delivery and load JavaScript deferred.
  • Autoptimize. This free plugin includes excellent options for optimizing your site speed. With it, you can:
    • Minify and cache scripts and styles, 
    • Inline critical CSS and delay loading your full stylesheets
    • Async non-aggregated JavaScript.

Plugins work well for some users, but they cause problems for others. They’re really better for smaller sites. 

Working with Mindsize to Eliminate Render-Blocking Resources

For the technical novice, even the plugin options for eliminating render-blocking resources can seem overwhelming. And, as we wrote, sometimes plugins cause problems that we help repair, especially on larger sites. At Mindsize, our team makes sure your site loads as quickly and efficiently as possible. If you’d like a custom set of recommendations for improving your site performance, check out our Site Performance Audit, which includes a detailed analysis of any technical issues with your site and our recommendations for resolving them. Contact us today to learn more.