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.
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
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
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.