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.
- 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.
What is a Render-Blocking Resource?
How to Test Your Site’s Speed
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.
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
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.
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.
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:
- 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
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.