6 Tips from Google for Optimizing Your Website with JavaScript

Maximize the Efficiency and Effectiveness of Your Website with JavaScript

When implemented correctly, you can use JavaScript to create a website tailored and customized to your every requirement. However, JavaSript is also a common source of problems when it comes to website performance.

In a newly released video from Google, Developer Advocate Alan Kent offers six suggestions for JavaScript optimization for your website, in order to make it perform well and run smoothly.

Tip 1: Avoid JavaScript file proliferation

One of the most common problems that occur with JavaScript is file proliferation. This is seen when a website has too many JavaScript files and hence suffers in performance when trying to operate and download other files.

Where to find

There are several free tools that can detect that for you, one of them being PageSpeed Insights. If you enter the URL of your website there, you will be presented with an Opportunity section in the report where you will find recommendations specific for your site. You can click on Keep request counts low and transfer sizes small – it will give you a summary of the number and sizes of resource types requested including JavaScript files.

Solution

The most achievable and straightforward solution to this problem is to combine a large number of smaller files into one larger file which can then be downloaded much more quickly and efficiently. 

Supporting HTTP2 on your website is another solution because it might enhance its performance without combining files.

Tip 2: Avoid excessive DNS lookups 

It is important to avoid excessive DNS lookups for the reference JavaScript files. This can cause your site to become slow and inefficient for users when they first visit the site.

Where to find

If JavaScript files are loaded from different domain names, there may be a DNS lookup overhead per domain name referenced. You can find a list of the domain names that are used in URLs in the PageSpeed Insight report, in sections such as Reduce JavaScript execution time. You can also make use of the Network tab in the Chrome Developer tool to find such a list.

Solution

One method of reducing the amount of DNS lookups on your site is to host a copy of externally referenced JavaScript files on your site. This is an effective solution however it may cause you to unintentionally download the same files more than once.

Tip 3: Eliminate inefficient JavaScript

Another problem for users of JavaScript on their websites is the presence of inefficient JavaScript, as this can slow down web pages and cause visitors to have bad experiences on the site. 

Where to find

Inefficient JavaScript can be found in places where it is suggested to eliminate render-blocking resources or reduce JavaScript execution time. 

Solution

The solution to this problem is to essentially rewrite the JavaScript code, profile existing code, and write your own cut-down versions of some of the more powerful components.

Tip 4: Eliminate unused JavaScript

Unused JavaScript is another form of website inefficiency, that can consequently lead to bad user experiences, so it is advisable to be removed. This happens when code is reused across sites and hence the sites end up containing JavaScript that is not needed.

Where to find

It can be detected in the PageSpeed Insights report, in the Reduce unused JavaScript section.

Solution

A beneficial technique to solve this problem is known as tree shaking which locates JavaScript that has never been called on a website, and therefore can be deleted. Other ways to steer clear of creating unused JavaScript in the first place, are to avoid huge network payloads and minimize main-thread work. 

Tip 5: Compress JavaScript files

A major tip when downloading files, especially larger ones, is to compress them beforehand, as this reduces the number of bytes to be downloaded by the web browser.

Where to find

Files that have the potential to be compressed, can be found in the PageSpeeds Insight report – just click on Enable text compression.

Solution

It is not a major issue if a file is downloaded without being compressed in advance, as most web browsers can compress files that have already been downloaded using built-in support once the files are appropriately configured.

Tip 6: Set appropriate cache durations for JavaScript code

Where to find

If there are problems with the cache durations of the JavaScript code on your pages, you can use the networking tab of chrome developer tools to check the response headers for downloaded JavaScript files. Additionally, the PageSpeed Insight report also lists JavaScript files that may benefit from set cache durations – just search for the opportunity Serve static assets with an efficient cache policy in the report.

Solution

The main solution to cache duration issues is ensuring the site returns appropriate cache lifetime headers, allowing browsers to cache JavaScript files correctly. Another approach is to reference files from a shared public location, so if a user visits a website that reuses the same JavaScript file, the browser can use a previously downloaded copy of the file which in turn will improve the performance.

Source: Google Search Central