Developer Advocate Alan Kent shares six ways to optimize JavaScript to improve the performance of your website in a new video from Google.
Kent discusses the most common performance issues caused by JavaScript and how to resolve them.
1. Prevent the spread of JavaScript files
Keep the number of JavaScript files on your site to a minimum.
If you’re not careful, the number of JavaScript files you have can quickly grow, especially if each UI component is in its file.
It is possible to improve website performance by reducing the number of JavaScript files that a browser must download.
How to Recognize
The PageSpeed Insights report’s Opportunity section contains recommendations tailored to your site.
Keep request counts low and transfer sizes small, according to the advice.
For a summary of the number and sizes of resource types requested, including JavaScript files, click on the recommendation.
How to Repair
This issue can be resolved in a variety of ways. Combining smaller files into a single, larger file to download is one option Google suggests.
Another solution is to enable HTTP2, which can improve performance without the need to join files.
2. Limit the number of DNS lookups
Avoid making too many DNS lookups for the reference JavaScript files, as this will slow down a user’s first visit.
In sections like reducing JavaScript execution time, How To Detect PageSpeed Insights can show you a list of domain names used in URLs.
Another way to see all the domain names mentioned is to use the network tab in Chrome Developer Tools.
How to Repair
Google recommends hosting a copy of externally referenced JavaScript files on your site to reduce the number of DNS lookups.
3. Remove inefficient JavaScript
Reduce or remove inefficient JavaScript, which can cause web pages to load slowly and provide poor user experiences.
How to Recognize
In Google’s PageSpeed Insights report, look for the following opportunities:
- Reduce JavaScript execution time: This displays scripts that spent a significant amount of CPU time parsing or executing JavaScript code.
- Remove render-blocking resources, such as JavaScript, which may be executed before the page can be rendered, causing the user to wait longer for any content.
- If used incorrectly, Document. write can cause significant performance issues on a page by blocking other operations.
- No passive listeners are used: A passive listener tells the browser that JavaScript code won’t call a function that prevents scrolling, allowing the browser to scroll the page while JavaScript is still running.
- Eliminating inefficient JavaScript is a larger topic that is outside the scope of Google’s video.
The solutions usually entail writing JavaScript code differently. Profiling existing code and writing your scaled-down versions of more powerful components are examples of techniques.
Read Top 7 Programming Languages For Test Automation In 2022.
4. Remove any unused JavaScript code
Unused JavaScript is also inefficient, but Google claims that this issue is widespread enough to warrant its mention.
When you reuse code across multiple sites, you risk including JavaScript that isn’t required.
Even if JavaScript is never used, the web browser must still download and parse it, which is a waste of time and resources.
How to Recognize
In Google’s PageSpeed Insights report, look for the following opportunities:
- Reduce unused JavaScript: This displays JavaScript that was not executed during page loading.
- Prevent massive network payloads: By highlighting large library downloads, identifies areas for improvement.
- Reduce main-thread activity: Time spent parsing, compiling, and executing JavaScript is included.
How to Repair
Google suggests using a technique called tree-shaking to identify JavaScript that is never used and can be safely deleted.
5. Make JavaScript Files Smaller
When downloading your JavaScript files, make sure they are compressed. While decompressing the file contents takes more CPU time, Google claims compression is a win in the long run.
How to Recognize
A section of the PageSpeed Insights report highlights JavaScript files that could benefit from compression.
By selecting Enable text compression, you can see which files should be compressed.
How to Repair
If properly configured, most web browsers or content management systems have built-in support for compressing downloads.
6. Set Appropriate JavaScript Code Cache Durations
Check that the cache expiry time headers for your JavaScript files are correct.
This saves browsers the time and effort of checking for out-of-date JavaScript files in their cache, which improves performance.
How to Recognize
The HTTP response headers for downloaded JavaScript files can be checked in the Networking tab of Chrome Developer Tools. Look for Cache-Control and similar headers.
Look for the opportunity titled Serve static assets with an efficient cache policy in PageSpeed Insights. When you click it, a list of resources, including JavaScript files, that could benefit from properly set cache headers appears.
How to Repair
Reference files from a shared public location to improve the caching of commonly used JavaScript files.
When a user visits a site that uses the same JavaScript file, the browser can use a previously downloaded copy of the file to improve performance.
See Google’s full video below for more information on any of the above JavaScript optimization recommendations:
Learn more from SEO and read Site Dependence On JavaScript A Problem For Googlebot?.
