In a new video from Google, developer advocate Alan Kent shares six ways to optimize JavaScript for better website performance.
Kent identifies common performance issues caused by JavaScript and describes steps you can take to fix them.
1. Avoid proliferation of JavaScript files
Avoid the explosion of JavaScript files on your website.
If you’re not careful, the number of JavaScript files can get overwhelming, especially when each UI component is in a separate file.
Reducing the number of JavaScript files your browser must download can improve website performance.
How to detect
this Chance part PageSpeed Insights The report lists recommendations specific to your site.
Looking for referrals to Keep request counts low and transfer sizes small.
Click Recommendations to get a summary of the number and size of requested resource types, including JavaScript files.
how to fix
You can solve this problem in a number of different ways. One option recommended by Google is to combine smaller files to download one larger file.
Another fix is to support HTTP2 on your site as it improves performance without joining files.
2. Avoid excessive DNS queries
Avoid making too many DNS lookups for reference JavaScript files, as this can slow down users’ first visit to your site.
How to detect
PageSpeed Insights can show you a list of domain names used in URLs such as Reduce JavaScript execution time.
The Network tab in Chrome DevTools is another way to see all referring domains.
how to fix
To reduce DNS lookups, Google recommends that you consider hosting copies of externally referenced JavaScript files on your own site.
3. Eliminate inefficient JavaScript
Reduce or eliminate inefficient JavaScript as it slows down web pages and leads to poor user experience.
How to detect
Look for the following opportunities in Google’s PageSpeed Insights report:
- Reduce JavaScript execution time: This reports scripts that spend a lot of CPU time parsing or executing JavaScript code.
- Eliminate render blocking resources: This includes JavaScript that may be executed before the page is rendered, making the user wait longer to see any content.
- Document.write: If used incorrectly, it can cause serious performance issues on the page as it prevents other actions from happening.
- Do 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 while the JavaScript is still executing.
how to fix
Eliminating inefficient JavaScript is a bigger topic, beyond the scope of Google Video.
Solutions often involve writing JavaScript code differently. Techniques include analyzing existing code, and writing your own minified versions of more robust components.
4. Eliminate unused JavaScript
Unused JavaScript is also inefficient, but Google says the problem is common enough to raise itself.
Reusing code across sites can result in the inclusion of unwanted JavaScript.
JavaScript that is never called 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 JavaScript that was not executed when the page was loaded.
- Avoid huge network load: This identifies areas for improvement by invoking 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, which can be used to identify JavaScript that has never been called and can be safely deleted.
5. Compress JavaScript files
Make sure your JavaScript files are compressed when downloading. While web browsers have to spend more CPU time decompressing file content, Google says compression is an overall win.
How to detect
The PageSpeed Insights report has a section that highlights JavaScript files that may benefit from compression.
click Enable text compression will show you which files are suggested to compress.
how to fix
Most web browsers or content management systems have built-in support for compressed downloads if configured correctly.
6. Set proper cache duration for JavaScript code
Check that your JavaScript files return the appropriate cache expiration headers.
This helps browsers avoid the overhead of checking their cache for out-of-date JavaScript files, thereby improving performance.
How to detect
inside networking Tab Chrome Developer Tools You can inspect the HTTP response headers of downloaded JavaScript files.Look for titles such as cache control.
In PageSpeed Insights look for titles titled Serving static assets with an efficient caching strategy. Clicking it will display a list of resources, including JavaScript files, that might benefit from appropriately set cache headers.
how to fix
One way to enhance the cache of commonly used JavaScript files is to reference the files from a shared public location.
If a user visits a site that reuses the same JavaScript file, the browser can use a previously downloaded copy of the file, which improves performance.
For more details on any of the above suggestions for optimizing JavaScript, see Google’s full video below:
Featured Image: Visual Generation/Shutterstock
