6 JavaScript Optimization Tips From Google
Google shares six ways. JavaScript optimization can make your website more responsive and efficient.
A new video by Google’s Developer Advocate Alan Kent explains six ways JavaScript can be optimized to increase the speed of your website.
Kent discusses the common problems JavaScript causes and suggests steps to correct them.
1. Avoid JavaScript File Proliferation
It would assist if you did not allow JavaScript files to multiply on your site.
If you aren’t careful, the number of JavaScript files can become too large, especially if each UI element is stored in a separate file.
Website performance can be improved by reducing the number of JavaScript files that a browser must download.
How to Detect
The Opportunity section in the report contains recommendations specific to your site.
Look out for the recommendation to keep request numbers low and transfer sizes small.
Click on the recommendation to summarize all the requested resource types, including JavaScript files.
How to Fix
There are several procedures to fix this problem. Google suggests that you combine smaller files to create a larger file.
You can also support HTTP2 on your website, which will improve performance without having to join files.
2. Avoid Excessive DNS Lookups
Avoid excessive DNS lookups for reference JavaScript files. This can slow down a user’s first visit to your website.
How to Detect
PageSpeed Insights will show you a list of domain names used in URLs within sections like reducing JavaScript execution speed.
Chrome Developer Tools offers another way to view all domain names being referenced.
How to Fix
Google recommends that you host a copy of JavaScript files externally referenced on your site to reduce DNS lookups.
3. Eliminate Inefficient JavaScript
JavaScript that is inefficient can be reduced or eliminated. It can slow down websites and cause poor user experiences.
How to Detect
These are the opportunities that Google’s PageSpeed Insights Report reveals:
- This report shows scripts that took a lot of CPU time to execute JavaScript code.
- Remove render-blocking resources: JavaScript may be executed before the page is rendered. This causes the user to wait longer for any content.
- Document. Write: This can lead to performance problems on pages as it prevents other operations.
- Does not use passive listeners. A passive listener tells the browser that JavaScript code won’t call a function that stops scrolling. This allows the browser to scroll even though the JavaScript code is still running.
How to Fix
Eliminating inefficient JavaScript, a more prominent topic, is beyond the scope of Google’s video.
These solutions usually involve writing JavaScript code differently. You can profile existing code and write your own more miniature versions of powerful components.
4. JavaScripts that are not being used should be eliminated
Inefficient JavaScript scripts that are not being used are another reason. Google claims this is a common problem and has a solution.
JavaScript can be included in code that is reused across multiple sites.
JavaScript that has not been used must still be downloaded and parsed in the web browser. This is a wasteful use of resources.
How to Detect
These are the opportunities that Google’s PageSpeed Insights Report reveals:
- Reduce unutilized JavaScript This will show you JavaScript that was not executed during loading a page.
- Avoid massive network payloads. This allows you to find out the places that need improvement by calling large library downloads.
- Reduce main-thread work: This includes time spent compiling and executing JavaScript.
How to Fix
Google suggests a technique called “tree-shaking” that can be used for identifying JavaScript that has not been reached. This is safe to delete.
5. JavaScript Files can be compressed
When downloading JavaScript files, ensure that they are compressed. Although the web browser takes more time to compress the file contents, Google claims compression is a win.
How to Detect
A section in the PageSpeed Insights report highlights JavaScript files that could benefit from being compressed.
Clicking Enable Text Compression will display which files should be compressed.
How to Fix
Most web browsers and content management systems can support compressing downloads if properly configured.
6. JavaScript Code: Set the appropriate cache durations
Make sure JavaScript files are returned with the proper cache expiry times headers
This allows browsers to avoid checking whether JavaScript files stored in their cache are outdated, which increases performance.
How to Detect
You can view the Networking tab in Chrome Developer Tool to check the HTTP response headers of JavaScript files downloaded. It would help if you looked for headers like CacheControl.
Look for the opportunity Serve static assets using an efficient cache policy in PageSpeed Insights. It will display a list of resources that could benefit from properly set cache headers.
How to Fix