6 JavaScript optimization tips from Google


In a new video from Google, Developer Advocate Alan Kent shares six ways to optimize JavaScript to improve your website’s performance.

Kent identifies common performance issues caused by JavaScript and walks through the steps you can take to fix them.

1. Avoid the proliferation of JavaScript files

Avoid proliferating the number of JavaScript files on your site.

The number of JavaScript files can get overwhelming if you’re not careful, especially if each UI component is in a separate file.

Reducing the number of JavaScript files a browser has to download can improve website performance.

How to detect

the Opportunity part of the Page speed information report lists recommendations specific to your site.

Look for the recommendation of keep request counts low and transfer sizes small.

Click the recommendation for a summary of the number and size of resource types requested, including JavaScript files.

How to fix

You can solve this problem in different ways. One option recommended by Google is to combine smaller files to have a single larger file to upload.

Another solution is to support HTTP2 on your site, as it can improve performance without attaching files.

2. Avoid excessive DNS lookups

Avoid excessive DNS lookups for referencing JavaScript files, as this can slow down a user’s first visit to your site.

How to detect

PageSpeed ​​Insights can show you a list of domain names used in URLs in sections like reduce JavaScript execution time.

The network tab in Chrome Developer Tools is another way to see all referenced domain names.

How to fix

To reduce the number of DNS lookups, Google suggests you consider hosting a copy of externally referenced JavaScript files on your own site.

3. Eliminate inefficient JavaScript

Reduce or eliminate inefficient JavaScript, as it can slow down web pages and lead to poor user experience.

How to detect

Look for the following opportunities in Google’s PageSpeed ​​Insights report:

  • Reduce JavaScript execution time: This flags scripts where a large amount of CPU time has been spent parsing or executing JavaScript code.
  • Eliminate render-blocking resources: This includes JavaScript which may be executed before the page can be rendered, causing the user to wait longer to see the content.
  • Document.write: If used incorrectly, it can cause significant performance issues on a page because it prevents other operations from occurring.
  • Does not use passive headphones: A passive listener is a hint to the browser that the JavaScript code will not call a function that prevents scrolling, allowing the browser to scroll the page even while the JavaScript is still running.

How to fix

Eliminating inefficient JavaScript is a larger topic beyond the scope of Google’s video.

Solutions usually involve writing something different than JavaScript code. Techniques include profiling existing code and writing your own scaled-down versions of more powerful components.

4. Eliminate Unused JavaScript

Unused JavaScript is also inefficient, but Google says this problem is common enough to report it on its own.

Reusing code across multiple sites may result in the inclusion of JavaScript that is not needed.

JavaScript that is never called must always be downloaded and parsed by the web browser, which is a waste of resources.

How to detect

Look for the following opportunities in Google’s PageSpeed ​​Insights report:

  • Reduce unused JavaScript: This shows you JavaScript that was not executed as part of a page load.
  • Avoid huge network payloads: This identifies areas for improvement by calling large library downloads.
  • Minimize main thread work: Includes time spent parsing, compiling, and executing JavaScript.

How to fix

Google recommends a technique called treeing that can be used to identify JavaScript that is never called, and can be safely removed.

5. Compress JavaScript files

Make sure your JavaScript files are compressed when uploading. While the web browser has to spend more CPU time to decompress the file contents, Google says compression is an overall win.

How to detect

The PageSpeed ​​Insights report has a section highlighting JavaScript files that could benefit from compression.

By clicking Enable text compression will show you which files are recommended to be compressed.

How to fix

Most web browsers or content management systems have built-in support for compressing downloads if configured correctly.

6. Set Appropriate Cache Durations for JavaScript Code

Verify that your JavaScript files are returned with the correct cache expiration date headers.

This helps browsers avoid the overhead of checking if JavaScript files in its cache are outdated, which improves performance.

How to detect

In the Networking tab of Chrome Developer Tools you can check HTTP response headers for JavaScript files that are downloaded. Look for headers such as Cache control.

In PageSpeed ​​Insights, find the opportunity titled Serve static assets with an efficient cache policy. Clicking on it will show you a list of resources, including JavaScript files, that can benefit from properly set cache headers.

How to fix

One way to improve the caching of commonly used JavaScript files is to reference the files from a public shared location.

If a user visits sites that reuse the same JavaScript file, the browser may use the previously downloaded copy of the file, which will improve performance.

For more details on any of the above recommendations for optimizing JavaScript, check out Google’s full video below:

Featured Image: Visual Generation/Shutterstock


About Author

Comments are closed.