8 Simple Tips to Speed Up Your JavaScript Code
JavaScript is one of the three primary languages on a web page. Although it’s not necessary, most sites require JavaScript for functionality. You can have the best server equipment on the market, but poor JavaScript code can be a bottleneck and slow down your site’s load times. Here are some tips to speed up your site with simple JavaScript tweaks.
1. Manipulate Elements Before Adding Them to the DOM
The DOM is every element including HTML and its data printed in the browser. It’s common for developers to retrieve values from the DOM and change them based on user input. It may seem tedious, but manipulating values after you’ve already printed them to the DOM takes more time than doing so with DOM elements stripped out.
For instance, if you have some content that you want to print to a div element, use JavaScript to make changes to the content as a string, and then print the string to the element. You reduce the need for the JavaScript engine to process HTML as you work with variable content.
2. Minify Your JavaScript Files
As you create JavaScript files, formatting helps you read code and understand its logic. Any coder who has been through college knows the importance of formatting syntax to make it easier to read. However, the web server doesn’t need these format characters to process files. You can reduce the size of JavaScript files by minifying them.
Minifying is the process of stripping special formatting characters such as tabs and extra spaces from coding files. The file size reduced by several bytes saves your users time downloading scripts. This step is essential for sites that have several external scripts that must load for the website to function.
3. Use Caching
Your JavaScript files rarely change. Your CSS files also seldom change. Caching the two leaves only the content on the page in need of downloading. If you use a CDN, then you don’t need to worry about caching.
You should be using a CDN when you can. Many of the popular JavaScript libraries are available on CDNs. JQuery, Bootstrap, and Angular are three examples of libraries available on popular cloud hosts. Just plug in the CDN URL, and you no longer need to worry about keeping files stored on your server. CDNs automatically cache objects so that you can focus on your local code instead of shared libraries.
4. Place Script Includes at the Bottom of Your HTML Pages
When a browser loads a web page, it loads it from top to bottom. It’s customary for developers to place CSS and JS links in the head section of an HTML page. This section is traditionally placed at the top of the page after the opening HTML tag, which means the browser first loads JS and CSS files, after which it loads the body tag content.
The seconds it takes for JS and CSS files to load make a difference in user engagement, especially if you have several files to load before content. Since JS and CSS files don’t show any content to users, this traditional way to structure HTML can affect your user engagement statistics. You can instead place JS and CSS files at the bottom of your pages under the body tag.
It’s important to note that the page still loads within the same amount of time, but its perceived speed is much faster. Users see content before JS and CSS files load, so it seems faster even though it loads within the same time frame, a phenomenon referred to as actual speed versus perceived speed. An increase in perceived speed improves user engagement without adding costly server resources to your network.
5. Compress Files with GZip
GZip is a file compression tool that reduces the size of your script downloads. It can do the same for your images. You compress files and store this version on your server. The browser downloads the smaller, compressed version of the file and extracts it when the full content downloads to the local computer.
Use GZip when you have several large files included on your site. It’s common with sites such as image download sites or websites that use large files to present data. It can save time loading your site and improve user engagement. It also saves storage space, so if you pay a host based on the resources you use, your hosting bill could be reduced as well.
6. Avoid Using the “With” Statement
The “with” statement is convenient for coders, but regarding processing speed, it’s terrible. The “with” statement is shorthand code that lets the coder skip typing a variable name and just reference properties and methods for the object using the dot (“.”) character. It makes coding faster and easier, but the JS engine loads all properties and methods instead of just the ones referenced when the full variable name is typed out.
Using “with” is an expensive way to code when speed is an issue. Go through your scripts and replace any “with” references with variable name.
7. Watch Your Loops, Especially Nested Loops
Loops can be taxing on any engine, but they are necessary. The best way to keep your code optimized is to ask yourself if a function can be used instead of a complex loop. Usually, functions which are much better for processing speed can replace those loops.
Nested loops can be especially taxing if you have several hundred records to iterate through. It’s also easy to introduce a bug in your code with too many nested loops. Consider refactoring your code if you find that loops are causing your site to drag.
8. Always Use the “var” Keyword for Variable Definitions
The “var” keyword defines a new variable, but it isn’t a requirement. When you don’t use “var,” the JavaScript engine is forced to search the entire scope chain. You will probably assign a variable with a returned function value, but don’t skip the “var” declaration. It saves processing time when the JS engine can find a local variable without searching the scope chain.
In addition to using “var,” avoid using global variables when a local one is sufficient. Global variables in any language are frowned on because they always take more time to process and reduce the speed of the application.
Summary
Optimizing JavaScript files is just one solution for a sluggish website. If you’ve assessed your site and found that it’s too slow, then a great first step is to evaluate JS files and your code.
Join over 50,000 developers, designers and entrepreneurs!
Get exclusive articles, special deals and freebies delivered straight to your email inbox!