Web Performance 101: Optimizing Javascript

Javascript redefined web applications ushering in a new era of dynamic websites with fluid responsive designs. It has gained a strong following among developers, popular libraries and frameworks like JQuery and Angular JS are all built with Javascript. The endless design possibilities that Javascript provides coupled with the numerous libraries available today makes it an indispensable part of web application development.

Why Javascript?

Today, almost every website uses Javascript to provide an interactive digital experience. Javascript made it possible to refresh/load sections of the page without having to reload the entire page every time the user clicks on a button or submits a form. Since scripts can manipulate DOM elements, it gave the developers more flexibility in designing and coding applications. This also led to development of widgets and plugins that could be easily integrated with web applications using simple Javascript.

Best Practices

As more and more applications implemented Javascript, it was evident that the advantages of using the scripting language came at the cost of performance. Scripts can impact digital experience significantly – if a script takes too long to download or execute then it can add to the load time of the webpage; if a script encounters an error or is not coded properly then the page may not render at all. So, if you are using Javascript on your website then it is important to ensure that it works seamlessly with your website. Let us look at some of the best practices to be followed when using Javascript in your website.

1.Minify and combine JS files

Minifying JS files will remove unwanted characters (whitespace, tab etc.) and comments from the script. This will help compress the file making it smaller in size. The files will download comparatively faster as it is minified and hence lighter. There are several tools available online to help minify Javascript like Google’s Closure Compiler, JsMin, and UglifyJS.

It is also recommended to combine multiple JS files so the file can be downloaded over a single connection reducing server overhead – the browser will be able to download a 50 KB file faster over a single connection instead of downloading 10 separate files of 5 KB each from multiple connections.

2. Avoid Duplicate and Inline scripts

Adding lines and lines of JS code to the page HTML will add to the total page size and unlike CSS, script and image files, HTML is not frequently cached by the browser; any inline script will be downloaded and parsed on every page load. Hence, it is recommended to place the JS code in an external file, this will allow the browser to cache the files cutting down the time taken to download and execute the required script.

There are many JS libraries and frameworks available; each of these are regularly updated resulting in multiple versions. Developers may embed different versions of the same JS script or add the same script more than once, this can cause errors on the page and may even block the page from rendering properly. In addition to this, Duplicate script tags also add to the page overhead.

When using JQuery or other Javascript libraries/modules, it is important to use the latest version and avoid embedding duplicate script tags in the same page. This will ensure there are no errors and conflicts during code execution.

3. Event Handlers

JS allows developers to add custom handlers and manipulate page elements to provide a more responsive and interactive web application. But when numerous event handlers are fired it can result in performance degradation.

To prevent event handlers from using up browser resources, you must keep track of the number of event handlers being triggered along with unbind event handler when not in use.

4. Reduce DOM manipulation

DOM manipulation is used to make web applications responsive but this results in re-rendering the HTML elements on the page; this process is called a Reflow. Reflow time can add up with every DOM manipulation and this can have an impact on the digital experience.

If you must use Javascript to edit DOM elements, then consider the DOM structure while coding the script to keep it concise and efficient. Remove unwanted <divs> and <spans> from the HTML and reduce the DOM “depth” so there are fewer node levels to traverse. Animations and style edits to the HTML must be done using CSS and not Javascript this will greatly minimize interaction with DOM elements.

5. Using Async and Defer

Parallel downloads can be blocked by scripts, if there are multiple scripts on a page then each of the scripts will be downloaded sequentially. This means the page will not render till all the scripts have been downloaded and processed. Javascript provides different techniques to avoid render-blocking.

1. Async – Loading the script asynchronously allows the rest of the webpage or application to execute while the script is downloaded in the background. The script is then executed once download is completed.
2. Defer – Using defer, the script can be forced to load/execute only after the page has completed loading and this ensures the script is not render-blocking.

The Future

Javascript has evolved into a powerful language. The functionality it offers along with the ease with which it can be implemented in web application makes it among the most widely used scripting language. From websites, mobile application to the “Internet of Things”(IoT), Javascript continues to be the preferred language among developers.