Google reveals six techniques to make your website quicker and more efficient by optimizing JavaScript.
Developer Advocate Alan Kent outlines six strategies to optimize JavaScript to enhance the performance of your website in a new video from Google.
Kent discusses the most frequent performance issues created by JavaScript and how to resolve them.
Avoid JavaScript File Proliferation
Keep the amount of JavaScript files on your site to a minimum.
If you’re not cautious, the amount of JavaScript files you have may quickly grow, especially if each UI component is in its file.
It is possible to enhance website performance by reducing the amount of JavaScript files that a browser must download.
How to Detect
The Page Speed Insights report’s Opportunity section contains advice tailored to your site.
Keep request numbers low and transfer volumes minimal, according to the advice.
For an overview of the quantity and sizes of resource types requested, including JavaScript files, click on the suggestion.
How to Fix
This issue can be resolved in a variety of ways. Combining smaller files into a single, bigger file to download is one method Google suggests.
Another solution is to enable HTTP2, which can enhance speed without the need to combine files.
Avoid Excessive DNS Lookups
Avoid doing too many DNS lookups for the reference JavaScript files, as this will slow down a user’s first visit.
How to Detect
In parts like minimizing JavaScript execution time, How to Detect Page Speed Insights may offer you a list of domain names used in URLs.
Another approach to examining all the domain names mentioned is to use the network tab in Chrome Developer Tools.
How to Fix
Google recommends hosting a copy of externally referenced JavaScript scripts on your site to decrease the number of DNS lookups.
Eliminate Inefficient JavaScript
Reduce or remove inefficient JavaScript, which can cause web pages to load slowly and provide bad user experiences.
How to Detect
In Google’s Page Speed Insights report, look for the following opportunities:
JavaScript execution time should be reduced: 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 performed before the page can be displayed, causing the user to wait longer for any content.
If used incorrectly, Document. write can create substantial performance difficulties on a page by blocking other activities.
No passive listeners are used: A passive listener tells the browser that JavaScript code won’t invoke a method that disables scrolling, enabling the browser to scroll the page while JavaScript is still running.
How to Fix
Eliminating wasteful JavaScript is a bigger issue than Google’s video can cover.
The solutions usually entail creating JavaScript code in a new way. Profiling existing code and developing your scaled-down copies of more powerful components are examples of techniques.
Eliminate Unused JavaScript
Unused JavaScript is likewise wasteful, but Google claims that this issue is widespread enough to warrant its mention.
When you reuse code across several sites, you risk including JavaScript that isn’t required.
Even if JavaScript is never used, the web browser must still download and process it, wasting time and resources.
How to Detect
In Google’s Page Speed Insights report, look for the following opportunities:
Reduce unnecessary JavaScript: This displays JavaScript that was not executed during page loading.
Prevent massive network payloads: By highlighting huge library downloads, indicates opportunities for improvement.
Reduce main-thread activity: Time spent parsing, compiling, and running JavaScript is included.
How to Fix
Google suggests using a method called tree-shaking to detect JavaScript that is never used and may be safely deleted.
Compress JavaScript Files
When downloading your JavaScript files, make sure they are zipped. While decompressing the file contents takes extra CPU time, Google claims compression is a benefit in the long run.
How to Detect
A component of the Page Speed Insights report highlights JavaScript files that might benefit from compression.
By selecting Enable text compression, you can see which files should be compressed.
How to Fix
If correctly set, most online browsers or content management systems include built-in capabilities for compressing downloads.
Set Appropriate Cache Durations for JavaScript Code
Check that the cache expiration time headers for your JavaScript files are correct.
This saves browsers the time and effort to check for out-of-date JavaScript files in their cache, which increases speed.
How to Detect
The HTTP response headers for downloaded JavaScript files may 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 using an efficient cache strategy in Page Speed Insights. When you click it, a list of resources, including JavaScript files that might benefit from properly configured cache headers appears.
How to Repair
Reference files from a shared public site to improve the cache of regularly used JavaScript scripts.
When a user visits a site that uses the same JavaScript file, the browser can utilize a previously downloaded copy of the file to enhance speed.
