Three ways to speed up your site load time, Part 2a: Optimize JavaScript

Editor’s Note: This is the second article in our “Three Ways to Speed Up Your Site Load Time” blog series.

Part 2: Optimize Javascript

In our first article in this series, we talked about one way to speed up your site: optimizing your images. Here in part 2a we’ll talk about another optimization task: shrinking and combining your JavaScript files to help speed up your site’s delivery and display. We’ll follow up later with part 2b, focusing on CSS files.

Google PageSpeed Insight recommendation showing a suggestion to eliminate render-blocking JavaScript and CSS.If you’ve ever run a PageSpeed insights analysis or a WebPagetest on your website you may have seen a suggestion to Eliminate render-blocking JavaScript and CSS in above-the-fold content. Doing so can have a really positive effect on your site’s speed and usability, so we’ll talk a little bit about what that means, and about a plugin called Autoptimize that will help you with the task.

But first…

A Quick and Painless Introduction to JavaScript

JavaScript is programming code delivered to your visitor’s web browser along with all the content, imagery, and styles that make up a typical page view. Once the code has been delivered to the browser, the browser then runs the code to perform whatever task it’s meant to accomplish. Javascript can be used to control both the look of your page, and the interactivity of page elements.

Your WordPress site almost certainly uses JavaScript, whether you know it or not — it can be an incredibly powerful and useful tool. Most themes and many plugins use JavaScript to provide enhanced functionality and interactivity. In fact, you’d need to try pretty hard to have a WordPress site that doesn’t use JavaScript.

Slowing Your Visitors Down

There are two main ways that JavaScript can slow down a visit to your website:

  1. The size of the code could mean that it takes a long time for your visitors to download it.
  2. When your visitor’s web browser runs the code, the actions that the code performs could take a long time to complete.

There’s a potential one-two punch here. For most “typical” uses of JavaScript1, as soon as your visitor’s browser starts to download a JavaScript file, the download prevents the browser tab from doing anything else until the file has completed downloading. This could mean that your images and content (the stuff your visitor sees and reads) may not be viewable until after your scripts are finished downloading.

But there’s more! Once a JavaScript file has been downloaded, the browser tab will then block everything else again to run all of the code. If you have a large JavaScript file that also takes a long time to run, this could mean your visitors are waiting seconds or more (an eternity in web time) to get content from your otherwise speedy server.

So what do you do? The solution is to:

  1. Make the JavaScript smaller, so it takes less time to download, and
  2. Wait to send JavaScript to your visitors until the more important stuff – content and images – have been downloaded.

This way, your visitor can start to read your content even while other stuff is happening to add in interaction and functionality.

If this sounds like a daunting task, don’t worry, there’s a plugin for that!

Autoptimize – The Basics

Autoptimize is a great plugin that can help with both of these JavaScript tasks (and more, as we’ll see in part 2b). It offers a nice set of default options that will work for many sites, and includes some more advanced settings if things need to be adjusted.

Before we get in to what exactly Autoptimize does, a word of warning: because it makes changes to how JavaScript is loaded and processed on your site, the plugin could cause functionality to change or break. If all else fails, disabling then removing the plugin entirely should set things aright again.

Once you install the plugin, head to the settings page (Settings → Autoptimize). You’ll find the default options selected (including “Optimize JavaScript Code”) which are a good starting point.

Screenshot showing Autoptimize's default settings.What exactly is it optimizing? By default, without changing any of the “Advanced” options, Autoptimize changes how your site handles JavaScript files in three ways:

  1. It will “minify” the contents of JavaScript files, which makes them smaller (and therefore quicker to download) without affecting the actions they take.
  2. It will combine all JavaScript files into one, so that your visitors can download them all at once, rather than requiring a separate download for each file.
  3. It will move the combined JavaScript file to be the very last thing that a browser downloads and runs, allowing your content and imagery to download first and be usable earlier.

For simpler WordPress sites, these defaults may be all you need, especially if you’re not using plugins that make heavy use of complex JavaScript. It should Just Work. However, especially if you’re using advertising plugins or others that use JavaScript to insert content into your page, you may need to dig a bit deeper into the settings.

Autoptimize – Advanced

If, after enabling the default settings, your site is behaving oddly (items aren’t in the right place; interactive elements aren’t working properly anymore, or other similar issues), you may need to dive in to the advanced settings. Click the “Show Advanced Settings” button on the Autoptimize settings page. You’ll see several new options underneath the “JavaScript Options” section.

The first thing you’ll want to try turning on is the “Also aggregate inline JS?” option. This will find some additional JavaScript and add it to the “combined” file provided by the basic settings. Sometimes changing this setting is necessary to allow particular coding styles to work. Be sure to “Save Changes and Empty Cache”2 at the bottom.

If your site is still not quite working properly, try enabling the “Add try-catch wrapping” setting. This could help with JavaScript files that would otherwise cause errors.

Finally, if things still seem to be “off”, you’ll want to enable the “Force JavaScript in <head>?” option. By turning this option on, you’ll lose the third benefit mentioned above (delaying JavaScript until other files are downloaded) but you’ll still see the benefit of a reduced overall filesize. Enabling this feature will help with those cases where a plugin’s JavaScript simply can’t be delayed until everything else is loaded.

If you know that there are certain JavaScript files that aren’t compatible with the optimizations that Autoptimize provides, you can exclude them from the optimization treatment by adding them to the “Exclude scripts from Autoptimize” listing. Doing so will prevent those scripts from being modified, and may allow you to try using some of the more advanced options again.

Beyond JavaScript

As you can see from the settings screen, Autoptimize provides additional options for optimizing CSS and HTML, which we’ll cover in part 2b of our series.

And just to convince you that paying attention to this sort of optimization is worth your time, I was able to take a fairly basic WordPress site from a score of 74 on PageSpeed Insights (Mobile) to a 98 by installing and configuring Autoptimize. YMMV, as they say, but it’s worth it to spend some time with this plugin to speed your site up.

Want to learn more about speeding up your site load time with Autoptimize? Check out Part 2b: Optimize CSS and HTML.


Footnotes

  1. If you’re a developer you can read about ways to avoid this; if you’re not a developer, that page may be Greek to you.
  2. This cache is different from the one you might have from a caching plugin like WP SuperCache. Autoptimize provides its own cache for JavaScript and CSS that works in concert with plugins that cache HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.