Skip to main content

5 Tips to Optimize Javascript in Your Website

7+ years experience in the SEO industry. Love to keep on top of the latest in search engine optimization and digital marketing.

Introduction

JavaScript is commonly used to build modern websites to create richer, more engaging experiences for users. JavaScript is also a common source of performance problems on websites. Today I will share 5 tips related to JavaScript libraries and frameworks that can help improve your site.

What is JavaScript?

JavaScript is a programming language that has become popular, as it is supported by web browsers. JavaScript allows web developers to write code that reacts to user interactions, manipulating the HTML markup on a page to change what the user sees.

What JavaScript has made possible is richer and more sophisticated user interactions that are supported by native HTML markup alone. For example, a mini-cart on an e-commerce website is typically implemented using JavaScript. The cart icon often shows the dynamically updated number of items in the cart and, when clicked on, displays the current cart contents, allowing users to view and adjust the cart contents.

Advanced site navigation menus are also frequently implemented using JavaScript. JavaScript can also be used to collect site analytics to give you greater insights into how your site is performing. These days there are many JavaScript frameworks and libraries or components available that you can use on your own site.

One reason for the development of JavaScript libraries is that not all browsers are compatible with JavaScript and CSS support. Sophisticated components can require substantial development to be reliable across a range of browsers. So it is natural to want to reuse them across multiple projects. While improving user experience and saving development time, watch out for the following problems:

Tip #1 - Avoid JavaScript file proliferation

The problem

Avoid proliferation in the number of JavaScript files on your site. The number of JavaScript files may increase if care is not taken especially if each UI component is kept in a separate file. There are overheads per downloaded file, especially for websites that support HTTP1.

How to detect it?

There are a number of free tools available to work out if your site has too many JavaScript files. One tool that combines both data from real users and lab testing is Page Speed Insights.

To use Page Speed Insights, simply enter the URL of a page on your public site. The opportunities section of the Page Speed Insights report lists recommendations specific to your site.

How to fix it?

There are a number of techniques that can be used to reduce the number of files to download. But solving the problem also depends on the flexibility of the platform or tools you are using.

For example, many content management systems restrict access to JavaScript to simplify the job for content creators and reduce the risk of mistakes. This, however, can also make it harder to address issues that the platform does NOT solve.

If you have a large number of small JavaScript files, it may be more efficient to join those files together to have a single larger file to download. In practice, it is common to bundle files into a few larger files that can be downloaded in parallel for greater efficiency.

If you have control over the JavaScript files on your site, you may find JavaScript bundling tools such as Webpack, useful to simplify this process. Note that supporting HTTP2 on your site can improve performance without joining files, as HTTP2 improves the efficiency of downloading multiple small files.

Tip #2 - Avoid excessive DNS lookups

The problem

Avoid excessive DNS lookups for the reference JavaScript files. If JavaScript files are loaded from different domain names, there may be a DNS lookup overhead per domain name referenced. If excessive, this can slow down the first visit of a user to your site.

How to detect it?

Reports such as Page Speed Insights may show you a list of domains used in sections such as - Reduce JavaScript Execution Time.

Scroll to Continue

But you may find using the network tab inside chrome developer tools a more reliable way to see all the domain names referenced.

Note that, unlike cookies, you cannot easily request the DNS cache to be cleared, making DNS issues harder to detect.

How to fix it?

To reduce the number of DNS lookups, consider whether to host a copy of externally referenced JavaScript files on your own site.

This is not always a clear-cut decision whether to self-host JavaScript files, as if you download a popular JavaScript library from a central site, it may already be in the browser cache due to the user visiting some other site that also uses the same library.

Putting a copy on your own site may save you the DNS lookup, but add a larger cost of downloading the file a second time.

Tip #3 - Eliminate inefficient JavaScript

The problem

Poor quality JavaScript can slow down your webpages, leading to bad user experiences.

How to detect it?

There are multiple opportunities reported by Page Speed Insights that can be hints of inefficient JavaScript on your website:

  • Reduce JavaScript Execution Time, reports scripts where a relatively large amount of CPU time was spent parsing or executing JavaScript code.
  • Eliminate Render Blocking Resources, includes JavaScript, which may be executed before the page can be rendered, making the user wait longer to see any content.
  • Avoid document.write() - The JavaScript function document.write, if misused, can cause significant performance issues on a page, as it blocks other operations from occurring.
  • Does not use passive listeners to improve scrolling performance - Not using passive listeners can slow down a site. A passive listener is a hint to a browser that JavaScript code will not call a function that prevents scrolling, allowing the browser to scroll the page even while the JavaScript is still executing.

How to fix it?

The solutions depend on your site but generally involve writing the JavaScript code differently from profiling existing code to writing your own cut-down versions of more powerful components.


Tip #4 - Eliminate unused JavaScript

The problem

Reuse of code across sites can lead to sites including JavaScript that is not needed. For example, most websites do not use all of the functionality provided by a library of framework. Or a component may be used that has more features than are needed. JavaScript code that is never called still needs to be downloaded and parsed by the web browser, wasting resources.

How to detect it?

To see if your site has potentially unused JavaScript, the Page Speed Insights report has a Reduce Unused JavaScript section. This includes JavaScript that was not executed as part of loading a page.

The Avoid Enormous Network Payloads can also be the result of downloading large JavaScript libraries, which may also identify potential areas for improvement.

In addition, minimize main-thread work includes time spent parsing, compiling, and executing JavaScript. Eliminating unused JavaScript can reduce these overheads.

How to fix it?

There are a range of tools to identify JavaScript that is not used. Techniques such as tree-shaking can used to identify JavaScript that is never called on a site, and so can be deleted from downloads.

Care must be taken as execution of JavaScript may be dependent on environmental factors. For example, with A/B testing, a section of JavaScript may only be run for some users. The code must stay on the site even if the profiler reports it is not executed.

Tip #5 - Compress JavaScript files

The problem

JavaScript files generally compress well, reducing the number of bytes to be downloaded by the web browser. While the web browser does have to spend more CPU time to decompress the file contents, compression is normally an overall win.

How to detect it?

The Page Speed Insights report has a section describing JavaScript files that may benefit from being compressed. Expand the Enable Text Compression opportunity to see which files are recommended to be compressed.

How to fix it?

Uncompressed JavaScript downloads are usually relatively straightforward to fix when identified. Most web browsers or content management systems have built-in support to compress downloads if appropriately configured.

JavaScript has made it possible to significantly improve the experience of users on your website. Care must however, be taken to avoid common performance problems that can arise when using JavaScript.

Related Articles