Top tips to improve JavaScript performance for faster websites

Performance is one of the most important concerns when developing an application. All software developers should monitor and improve performance in every layer of the application. From the database to the server-side language, there are plenty of opportunities for performance issues to arise, and the front end is certainly no exception.

So that’s why today we’re talking about JavaScript performance and how to improve it. We’ll start by explaining why JavaScript performance, in particular, is so important, and then proceed to show you some tips you can use to improve your JavaScript code. Let’s go.

Why does JavaScript performance matter?

Why is JavaScript performance so crucial? Because web performance is crucial. You can use the two terms almost interchangeably since it’s virtually impossible to find a nontrivial web application that doesn’t employ JavaScript. And why is optimal web performance so essential?

In short, users are impatient. You’re probably aware of research showing that most users expect a page to load in under two seconds. If your application is too slow—and what “slow” means keeps decreasing—users will just give up.

To summarize: poor web performance costs you users—and consequently, money. And since poor JavaScript performance is one of the most important web performance killers, it’s easy to conclude that investing in improving it will make ever

How can I make JavaScript faster?

Without further ado, let’s see how you can improve the performance of your JavaScript code, with seven practical tips.

1. Remove unused JavaScript code

DHH (David Heinemeier Hanson), the creator of the Ruby On Rails framework, once said something to the effect of “the greatest tool for creating good software is the delete key.” He was talking about software design, not performance, but I think the same reasoning applies here.

“The greatest tool for creating good software is the delete key.” David Heinemeier Hanson, creator of the Ruby on Rails framework

One sure way to improve JavaScript performance is simply to have less of it. Mercilessly delete unused code. If you detect that a given function is obsolete, get rid of it. This will improve download time since the file size will decrease. Also, the browser will take less time to analyze the code.

2. Minify Your JavaScript Code

This is sort of a continuation of the previous tip. While I advised you to get rid of unused code, this one tells you to get rid of useless non-code stuff inside your JS files. What does that mean? A typical source code file—not only in JavaScript but also in any language—contains things that are meaningful to developers but quite useless to the machine. Examples include the following:

• Comments
• White lines
• White spaces
• Indentation

The items above are necessary in order to make code easier to read and navigate, but when it comes to the interpretation or compilation of the code, they’re just useless bytes. How can we solve this?

The answer is to use a process called minification. Minification is the process of removing all of those “useless” characters we’ve just described from source code to make the file smaller.

Ideally, you’d include a step in your build process that minifies your JavaScript code before deploying it. That way, you can have your cake and eat it too: you can keep things like comments and indentation during development time—so programmers can benefit from them—and remove them before the code reaches production, improving your app’s performance.

3. Use Gzip compression

Imagine if instead of sending a big file to the browser, your web server could send a zipped file to make it lighter. That way, the browser would finish downloading the file sooner. After the browser received the compressed file, it could then extract the document and use it as usual. Well, that’s exactly what Gzip is for!

Gzip an application used for compressing files, and it’s supported by most web servers. When your server is properly configured to serve compressed content, it compresses the response before sending it to the browser. Use Gzip to compress not only your JavaScript files but also your HTML and CSS. That will improve your app’s performance.

4. Keep DOM interaction to a minimum

The DOM (Dynamic Object Model) is an interface that represents the structure of a web document. Interactions with the DOM are obviously very common in JavaScript since one of the language’s main use cases is manipulating the elements on a page to create a richer user experience than what would’ve possible with just HTML. The problem is that DOM changes can cause performance hits because they cause browser reflows. What to do?

You can’t simply eliminate DOM interactions—that would defeat one of the purposes of using JavaScript in the first place. Your best course of action here would be to keep DOM interactions to a minimum. One of the ways of accomplishing this is batching your DOM changes, so you can avoid unnecessary reflows.

Another useful technique is to cache DOM elements, which simply means storing references to frequently accessed elements and using that reference when accessing the same object again in the future. By doing so, you can obtain significant performance gains.

5. Switch to HTTP/2

This tip is less of a JavaScript-specific guideline and more of a general web performance tip, and it’s a very easy one to understand at that. It simply says you should use HTTP/2 instead of its predecessor, HTTP/1.1, which was first documented in 1997. HTTP/2 uses multiplexing, which means that multiple requests can be sent simultaneously. Its predecessor, HTTP/1.1, required that each request be finished before starting the next one. This and other improvements in the new version of HTTP will improve your site’s performance.

6. Delay loading unnecessary JavaScript

Delay loading anything not needed for the initial page load. Not all functions are needed when the page first loads. For example, you can delay loading functions that require users to perform a given action.

That way you avoid loading JS code that would do nothing but delay the initial load and display of the page. Once the browser loads the page, you can load the other pieces of functionality so that they’re ready when users need them.

To do that, you can use the approach of breaking up your JavaScript into smaller files and loading them up as needed. You can also use the async or defer attributes.

7. Use performance improvement tactics that work with other languages

JavaScript certainly has its intricacies, I’ll concede that. But when working with JavaScript, there’s nothing preventing you from applying the performance optimizations you would use with other languages. You’ll still want to avoid performing costly tasks inside loops or relying on recursion when it’s not really needed.

Also, use state-of-the-art algorithms for known problems. Better yet, use native JavaScript functions when available because they’re bound to perform better than homegrown code most of the time.

JavaScript performance: Not easy, but certainly worth it

The software industry has never been so fast-paced, and it’s becoming increasingly hard for companies to stay afloat. In this scenario, one organization’s mistake is another’s opportunity.

Performance is certainly one of the areas where mistakes can make a huge impact. As Jeff Atwood wrote almost ten years ago, “Performance is a feature.” In this highly competitive era we live in, organizations just can’t afford to develop slow applications.

These days, a large portion of the apps being developed are web applications. And since JavaScript is the language of the web, it stands to reason that optimizing JavaScript performance is an endeavor worth undertaking.

That was the motivation behind today’s post, in which we’ve covered some of the main measures you can take to improve your JavaScript performance. As I’ve said, JavaScript performance nowadays is almost synonymous with web performance, but there’s more to web performance than what we’ve covered here today.