Increasing Website Speed by Improving Your JavaScript Code

With the introduction of some of the most famous JavaScript libraries (Node.js, Angularjs, just to name a few), there’s no doubt that any modern website uses JS for at least some functionality. Even though the language is popular, it still must be able to load quickly. Users don’t care what language you use. They just want a fast, easy-to-use website that provides them with what they are looking for.

You can improve the load times for your JavaScript files by storing them on a CDN, but the way you code your libraries and custom resources plays a huge role in your website’s speed. Even small changes can improve your load times, and just a second or two makes a difference in your user engagement success.

  1. Minification

Formatting a file is important as you develop, but it means nothing to the web server but extra bytes to load. Formatting makes it easy for you to decipher code and keep it organized, but this formatting is only important to you, not the web server. The bytes that store this formatting can be removed after you’re done developing, which reduces processing time. By minifying your code, you remove extra formatting such as spaces and tabs. You would still use the formatted documents for edits,  but the web server would load your minified one in production.

Here are a few places to help you minify JS:

 

  1. Avoid Nested Loops

This is true for just about any language. Nested loops are difficult to process, and many times they lead to logic bugs. You can usually avoid nested loops by creating functions to process data. It’s also beneficial, because functions are reusable code that you can use in other parts of the application.

  1. Cache Scripts including CSS

Your JavaScript and CSS files won’t change every day. For this reason, caching them speeds up the load times for your pages. Even better, store them on a CDN and you don’t need to worry about caching, downtime, or the speed at which they load. GTMetrix describes CDNs as “next level” optimization. Minifying your JS files along with adding a CDN to your content delivery will dramatically improve its speed. A CDN automatically uses caching, so you don’t even need to worry about what pages to cache on your site.

  1. Place JS Files at the Bottom of Your HTML Pages

It’s tradition to place your script and CSS file links at the top of your HTML pages. When the browser loads the page, it first loads the top of your pages and then the body content. When you place JS files at the bottom of your HTML pages, you improve the page’s perceived speed. Perceived speed is the illusion that the page is loading faster than it really is, and it can increase customer engagement. Normally, when JS is included at the top, the browser waits for JS files to load and then loads the body. With links at the bottom, the content loads first and then the JS files. The user sees content faster and starts browsing while the JS files load. Your page still loads in the same amount of time, but the perception is that it loads more quickly.

  1. Don’t Use the ‘With’ Keyword

Microsoft explains the problem with using the “with” keyword. Using the “with” keyword complicates the scope chain, because the JS engine pulls in all properties and methods for the newly defined variable. You probably won’t use all properties and methods, so it adds extra processing for no reason. With more complexity comes longer processing times. Microsoft suggests being more verbose with your code, which means typing a variable each time you want to use its properties and methods. The “with” statement is a handy shortcut, but avoid using it if speed is an issue with your site.

  1. Always Use “var” to Define New Local Variables

Another tip from Microsoft is to always use var in front of your local variables. Take the following code as an example:

function BadLocalVariable()

{

myvar = GetMyVarValue();

return myvar;

}

 

Notice that myvar does not have the “var” keyword to define it. When this variable is called, all scopes (local and global) are searched before returning its value. By using “var,” JavaScript creates the variable in the current scope, and no look-up will speed up your code.

  1. Minimize HTTP Calls

Each time you make a call to the server, the page needs to wait for the server (external or local) to process the request and send results back to your JavaScript function. Just like web pages, you want to reduce the number of HTTP calls with your JS code. This is especially true when you use JS to render objects on an HTML page. Use local files if they are available, and combine calls to HTTP into one function. In other words, if you can get the data you need in one HTTP call, don’t make calls to the server in several separated functions.

If you’ve optimized your javascript code, make sure to read our earlier tutorials on how to optimize your PHP applications & database performance as well.

Get the latest in Web Performance
Subscribe now to receive the latest news, tips and tricks in web performance!
The information you provide will be used in accordance with the terms of our privacy policy

No comments

Be the first to post a comment.

Post a comment