Improve Site Speed: Remove Render-blocking JS & CSS

WordPress enables you to build a custom website with your choice of plugins and themes, but this can mean that your site has a lot of scripts slowing down its loading times. Not all of these scripts need to be loaded right away, and some can actually block visitors from seeing your content as quickly as possible.

These extraneous files are called render-blocking JavaScript and CSS. In this article, we’ll explain what these scripts are, then show you how to remove them from your WordPress site. Let’s get started!

What Is Render-Blocking JavaScript and CSS?

When a website loads in the browser, it sends out calls to each and every script in a queue. Usually, that queue needs to be empty before the website is visible in the browser. The queue of scripts that can stop your website from loading fully are the render-blocking JavaScript and CSS files.

When the script queue is very long, it can take a while before visitors are able to access your site. Often, many of these scripts aren’t necessary for viewing the website right away, and could just as easily wait to run until after the site itself is fully loaded.

In other words, these kinds of scripts slow down your webpages without actually contributing to the immediate needs of your viewers. Any script that doesn’t involve what the viewer will see right away (often referred to as ‘above the fold’ elements) should be deferred until the rest of the page is loaded.

Why Is Render-Blocking JavaScript and CSS Bad For Webpages?

Render-blocking JavaScript and CSS scripts slow down your webpages, which is bad for a lot of reasons. Site speed plays a role in many vital aspects of your website, including general usability and search engine optimization (SEO). When your site loads slowly, you are more likely to lose visitors, and less likely to be ranked highly in search engine results.

Of course, site speed is affected by more than just render-blocking scripts. That said, this a factor that can make a significant difference in load times. Remember that every resource on a webpage takes up bytes, more of which result in longer download times. The fewer and lighter scripts your site has, the better. After all, you don’t want to let a slow site negatively impact your business.

In general, it’s best to make sure your website’s code is as clean and minimal as possible to improve overall speed. However, there will always be some leftover code. By default, browsers will try to load everything at once, including the render-blocking scripts. It is up to you to make sure your site first loads the scripts necessary for it to look correct and be usable when a viewer first lands on a page. Only then should the rest of the scripts be loaded.

How To Eliminate Render-Blocking JavaScript and CSS

Before you can eliminate render-blocking scripts, you’ll need to identify which scripts are causing problems. To do this, we recommend using Google’s PageSpeed Insights. Simply enter your URL, and Google will tell you exactly which scripts are slowing down your page:

Page Speed Insights show CSS and Javascript Render Blocking

Make a list of any scripts that appear in the results under Eliminate render-blocking JavaScript and CSS. Whether you try to address them manually or use a plugin, these are the scripts you’ll want to pay extra attention to as you apply the following fixes.

To reduce the number of render-blocking scripts on your site, you’ll need to follow a few best practices:

  • Minify’ your JavaScript and CSS. This means removing all extra whitespace and unnecessary comments in the code.
  • Concatenate your JavaScript and CSS. To do this, you’ll want to take several different .js and .css files and combine them. Ideally, you will have only a few such files.
  • Defer the loading of JavaScript. It can be useful to force JavaScript files to wait to load until after everything else on the page is ready. A reliable way to defer JavaScript is to use asynchronous loading.

These tips can be tricky to accomplish by hand in WordPress because many front-facing plugins come with their own JavaScript and CSS files. One plugin can easily attach upwards of five or six scripts to the front end of your site. These files can add up quite quickly!

Thankfully, WordPress uses one combined filter to register all front-end facing scripts. This means you have the opportunity to identify and handle any incoming JavaScript or CSS files – even if you don’t know exactly what to look for. Of course, this is much easier to accomplish with a plugin rather than starting from scratch.

Plugins to Reduce Render-Blocking JavaScript and CSS

There are a few WordPress plugins that can help you optimize your site by removing render-blocking JavaScript and CSS. In this section, we’ll cover two popular choices.

WP-Rocket helps with site optimization through things like minification of CSS and JS, lazy loading images, deferring remote JavaScript requests, and more.

WP-Rocket

Autoptimize, on the other hand, is built specifically to address issues brought up by recommendation systems like PageSpeed Insights. The settings you’ll need in this plugin are under Settings > Autoptimize.

Autoptimize plugin

Both of these plugins can be used to minify, concatenate, and defer the loading of scripts. Every site is different, of course, so you may need to experiment to see what works best for your setup. It’s important that you test your settings before letting them run! Improperly minified or moved scripts can completely break your site.

Whatever method you choose to implement, it’s important to remember that speed is crucial for your website’s success. That’s why WP Engine keeps our servers running fast and reliable. Don’t be afraid to check out our services to help you reach optimal performance!