In a new video from Google, Developer Advocate Alan Kent shares six ways to optimize JavaScript to improve the performance of your website.
Kent identifies common performance problems caused by JavaScript and goes over steps you can take to fix them.
1. Avoid JavaScript File Proliferation
Avoid proliferation in the number of JavaScript files on your site.
The number of JavaScript files could become excessive 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 section of the PageSpeed Insights report lists recommendations specific to your site.
Look for the recommendation to keep request counts low and transfer sizes small.
Click on the recommendation for a summary of the number and sizes of resource types requested including JavaScript files.
How To Fix
You can fix this problem in a number of different ways. One option Google recommends is to combine smaller files together to have a single, larger file to download.
Another fix is to support HTTP2 on your site, as it can improve performance without joining files.
2. Avoid Excessive DNS Lookups
Avoid an excessive number of DNS lookups for the reference 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 such as reduce JavaScript execution time.
The network tab in Chrome Developer Tools is another way to see all the domain names referenced.
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 webpages and lead to poor user experiences.
How To Detect
Look for the following opportunities in Google’s PageSpeed Insights report:
- Reduce JavaScript execution time: This reports scripts where a large amount of CPU time was spent parsing or executing JavaScript code.
- Eliminate render blocking resources: This includes JavaScript that may be executed before the page can rendered, making the user wait longer to see any content.
- Document.write: If misused this can cause significant performance issues on a page as it blocks other operations from occurring.
- Does not use passive listeners: A passive listener is a hint to the 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
Eliminating inefficient JavaScript is larger topic that goes beyond the scope of Google’s video.
The solutions generally involve writing the JavaScript code differently. 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 call it out on its own.
Reusing code across sites can lead to the inclusion of JavaScript that’s not needed.
JavaScript that is never called upon still needs to 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 loading a page.
- Avoid enormous network payloads: This identifies areas for improvement by calling out large library downloads.
- Minimize main-thread work: Includes time spent parsing, compiling, and executing JavaScript.
How To Fix
Google recommends a technique called tree-shaking that can be used to identify JavaScript that is never called, which is safe to delete.
5. Compress JavaScript Files
Make sure your JavaScript files are compressed when downloaded. 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 may benefit from being compressed.
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 to compress downloads if properly configured.
6. Set Appropriate Cache Durations For JavaScript Code
Check that your JavaScript files are returned with appropriate cache expiry time headers.
This helps browsers avoid the overhead of checking if JavaScript files in its cache are out of date, which improves performance.
How To Detect
In the Networking tab of Chrome Developer Tools you can check the HTTP response headers for JavaScript files that are downloaded. Look for headers such as Cache Control.
In PageSpeed Insights look for 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 may benefit from appropriately set cache headers.
How to Fix
A way to enhance the caching of commonly used JavaScript files is to reference files from a shared public location.
If a user visits sites that reuse the same JavaScript file, the browser can use the previously downloaded copy of the file, which will improve performance.
For more detail on any of the above recommendations for optimizing JavaScript, see Google’s full video below:
Featured Image: Visual Generation/Shutterstock
