How to Eliminate Render-Blocking JavaScript and CSS (In 3 Steps)

14 Feb 2019 / Freeparking Team

We all know how important fast loading times are, since a slow website can lead to a drop in traffic and conversions. Many factors can contribute to poor loading speeds, but one you may not be aware of is the use of render-blocking JavaScript and CSS.

This is an issue that many sites face, and one that (fortunately) is easily solved. Through the use of a handy plugin, you can ensure that your site continues to run at a fast pace. This will keep your visitors engaged, and encourage them to spend more time on your site.

In this post, we’ll explain what render-blocking JavaScript and CSS are, and why you might want to eliminate or reduce them. We’ll also discuss how to get the job done using a plugin. Let’s get started!

What Render-Blocking JavaScript and CSS Are

As a website owner, it’s smart to regularly check your loading times using Google PageSpeed Insights. This is an incredibly useful tool – not just for testing your page speeds, but also for identifying any issues.

For example, PageSpeed Insights may sometimes show a warning about render-blocking JavaScript and CSS files:

render blocking files

Put simply, these are files within your website that preventing it from loading as quickly as it otherwise could. JavaScript and CSS scripts are usually used to force browsers to delay loading a web page until all of its elements are ready. This is usually a good thing – since no one wants to see a page that isn't ready yet.

However, render-blocking JavaScript and CSS refers to scripts that are working correctly, but are not used for ‘above-the-fold content’ (the part of the page a visitor can see without scrolling down). So when you receive an alert about this issue, Google is letting you know that some JavaScript and CSS scripts are needlessly slowing down your site, since the parts of the page they affect aren’t even visible to the user yet.

As we touched on earlier, your site’s loading speeds have a huge impact on its user experience. 53% of visitors abandon pages that take longer than three seconds to load, so it’s important to keep everything running smoothly. Fortunately, there are ways to eliminate the interfering scripts, even if you’re not a developer.

How to Eliminate Render-Blocking JavaScript and CSS (In 3 Steps)

Removing these kinds of unwanted scripts from your site can be complex when handled manually. Fortunately, using a plugin can save you a lot of hassle. Although there are numerous plugins that will help with this issue, Autoptimize is a particularly useful tool:

 auto optimize plugin2

This plugin is easy to use, and can improve your site’s performance in other ways as well. Let’s walk through the steps required to eliminate render-blocking files from your site using this tool.

Step 1: Test Your Site and Identify Any Issues

Before getting started, it’s a good idea to test your site and identify any specific issues. As we mentioned before, the PageSpeed Insights tool is a perfect way to do that.

After opening the tool, enter your site’s URL into the input field. You can then select Analyze to get a full report about your site:

Screenshot 2019 02 11 at 15.19.43

A ‘good’ score is anywhere between 50–100, although most sites fall somewhere between 50–70.

Alongside your overall score, Google will also provide some performance-related suggestions. If relevant, this will include any instances of render-blocking JavaScript and CSS that were found. If your site contains these kinds of scripts, it’s time to implement the Autoptimize plugin we introduced above.

Step 2: Configure the Plugin’s Settings

After installing and activating Autoptimize, you’ll want to back up your site (just in case). Then visit the plugin’s settings page within your WordPress dashboard. There, you’ll be able to adjust certain features to fit your specific needs:


Screenshot 2019 02 11 at 16.07.51

Simply check the boxes next to Optimize JavaScript Code and Optimize CSS Code, then select Save Changes and Empty Cache.

In most cases, this is enough to fix any render-blocking issues. However, on occasion you may experience further problems, due to your theme and/or active plugins. To see if this is the case, simply carry out another PageSpeed Insights test. This will let you know if any render-blocking JavaScript and CSS remain on your site. If so, you’ll need to make some further adjustments.

Step 3: Adjust the Plugin as Needed

To fix any additional issues that remain, head back to the Autoptimize settings page and click on Show advanced settings:

Screenshot 2019 02 11 at 15.14.21

Here, you can enable to plugin to optimize inline JavaScript as well, and to remove any scripts that were automatically excluded during the initial search:

Screenshot 2019 02 11 at 15.10.26

Next, move down the page to the CSS section, and check the box next to Also aggregate inline CSS:

Screenshot 2019 02 11 at 15.10.43

Once that’s done, select the Save Changes and Empty Cache button again. You’ll now want to check your site’s performance one more time, and you should no longer see any warnings about render-blocking JavaScript and CSS

It’s also smart to visit your site and test it thoroughly, to make sure nothing has been affected by the deleted scripts. Remember, your ultimate goal should always be to deliver the best possible user experience. So although it’s beneficial to eliminate render-blocking JavaScript and CSS where possible, don’t remove anything that will affect the way your site looks or performs.

Conclusion

Render-blocking JavaScript and CSS scripts are designed to hide unstyled HTML from the public eye. However, they could also be contributing to slow speeds on your site. The time your pages take to load can play a huge role in your site’s overall user experience, which means it’s important to eliminate such scripts where possible.

To quickly remove render-blocking JavaScript and CSS, you can:

  1. Use PageSpeed Insights to identify any issues.

  2. Install Autoptimize to automate the removal process.

  3. Test your site again, and adjust the plugin as needed for a more in-depth scan.

Do you have any other questions about render-blocking JavaScript and CSS? Let us know in the comments section below!

Image credit: Pixabay.

 

Find out more about our hosting options here.


At Freeparking we take pride in making it easy to get online.


Need Help?

0800 FREEPARK (373 372)

If you need more help we want to hear from you. Get in touch and we'll respond not just quickly, but with the right information in language you understand. Contact Us

Check out the step-by-step  How To Guides  and  FAQs  on our Support Site


Your subscription request has been received, please check your email for confirmation.