JavaScript is commonly used to build eCommerce websites to acquire more users and enhance online shopping experience. However, Javascript also brings many performance problems on eCommerce websites. Understanding that difficulty, VNEXT Global, an IT outsourcing company from Vietnam, suggests 6 tips related to Javascript libraries and frameworks that can help you to optimize eCommerce websites.
What Is JavaScript?
Javascript is a programming language supported by multiple web browsers. Javascript allows web developers to write code that reacts to user interactions, manipulating the HTML markup on a page to change what the user sees. Javascript can create more diverse, complex user interactions than native HTML markup alone.
For example, a mini cart on an e-commerce site is typically implemented using Javascript. The cart icon shows the number and content of items in the “cart”, allowing users to view and adjust their own “cart”.
Advanced navigation menu is also frequently created by Javascript. Javascript can also be used to collect site analytics to give you greater insights into its performance.
Here are some suggestions to optimize eCommerce website with JavaScript
1. Avoid JavaScript file proliferation
The number of Javascript files may increase uncontrollably, especially in case each UI component is kept in a separate file. There are overheads per downloaded file, especially for websites that only support HTTP 1. There are a number of free tools to use if your site has too many Javascript files. You can try PageSpeed Insights, which combines both data from real users and lab testing.
To use PageSpeed Insights, simply enter the URL of a page on your public site. The opportunity section of the PageSpeed Insights report detailedly suggests recommendations specific to your site. For example, the recommendation to keep request counts low and transfer sizes small, when expanded, summarizes the number and sizes of resource types requested, including Javascript files.
There are various techniques that can be used to reduce the number of files to download, but solving the problem depends also on the flexibility of the platform or tool you are using. For example, many content management systems (CMS) restrict access to Javascript to simplify the tasks of content creators and reduce the risk of mistakes. If you have a large number of small Javascript files, it may be more efficient to join those files together to have a single larger file to download.
In practice, it is useful to group files into a few larger files that can be downloaded in parallel for greater efficiency. If you have control over the Javascript files on your site, you may find Javascript grouping tools, such as Webpack,useful to simplify this process. Note that supporting HTTP2 on your site can improve performance without joining files, because HTTP2 increases the efficiency of downloading multiple small files, thus improving ecommerce websites using Javascript.
2. Avoid excessive DNS lookups
The second tip is to avoid an excessive number of DNS lookups for the reference Javascript files. If Javascript files are loaded from different domain names, there may be an overhead of DNS lookup per domain name referenced. If excessive, this can slow down the first site visit of a user. Reports such as PageSpeed Insights may show you a list of domain names used in URLs in sections such as reduce Javascript execution time.
Using the network tab inside Chrome Developer Tools is also a reliable way to see all the domain names referenced. But unlike cookies, you cannot easily request the DNS cache to be cleared, making DNS issues harder to detect.
To reduce DNS lookups, consider whether to host a copy of externally referenced Javascript files on your eCommerce website. There is not an exact answer to the question whether to self-host Javascript files. When a popular Javascript Library is downloaded from a central site, it may already be in the browser cache, because the user visits some other sites that also use the same library. Putting a copy on your own site may save you the DNS lookup, but leading to a larger cost of downloading the file per second.
3. Eliminate inefficient JavaScript
Poor-quality Javascript can slow down web pages, resulting in bad user experiences. There are multiple performance issues reported by PageSpeed Insights that show inefficient Javascript on your eCommerce website, for example:
- Reduce Javascript execution time report scripts where a relatively large amount of CPU time was spent parsing or executing Javascript code.
- Eliminate render blocking resources includes Javascript which may be executed before the page can be rendered, making the user wait longer to see any content.
- The Javascript functions document .write(), if misused, can cause significant performance issues on a page, as it blocks other operations from occurring. For example, performance testing has shown that adding a script inclusion via document.write() can double the length of time it takes to load a webpage, especially on slow networks.
- Not using passive listeners can also slow down your eCommerce website. A passive listener indicates that Javascript code will not have a function that prevents scrolling, thus allowing the browser to scroll the page when the Javascript is executed.
The solutions generally involve coding Javascript differently. There are many good resources available on the web describing various techniques from profiling existing code to running your own cut down version of more powerful components.
4. Eliminate unused JavaScript
Reusing code across sites can lead to unused Javascript on some sites. For example, most websites do not use all of the functionalities provided by a library or framework, or a component has more features than needed. Redundant Javascript code is still downloaded and parsed by the web browser, leading to wasting resources.
To check if your site has unused Javascript files, the PageSpeed Insights report has a reduced unused Javascript section, including Javascript that is not executed as part of loading a page. The PageSpeed Insights avoid enormous network payloads can also be the result of downloading large Javascript Libraries, which may also identify potential areas for improvement.
In addition, minimized main thread work includes time spent parsing, compiling, and executing Javascript. Eradicating unused Javascript can greatly reduce these overheads. There are many tools to identify redundant Javascript.
Please pay attention, as execution of Javascript may be dependent upon environmental factors. For example, with A/B testing, a section of Javascript may only be run for some users. The code, instead, must stay on your eCommerce website, even if the reports are not executed.
5. Compress JavaScript files
You need to make sure your Javascript files are compressed when downloaded, especially for large files, to reduce the number of bytes. While the web browser spends more CPU time to decompress the file contents, compression is normally a solution. Again, the PageSpeed Insight report has a section describing Javascript files that need to be compressed and how it can improve your website.
To ensure that your eCommerce website with Javascript works well, you should frequently check which files are recommended to be compressed. Uncompressed Javascript downloads are usually relatively straightforward to be fixed when detected. Most web browsers or content management systems (CMS) have integrated supported features to compress downloads if appropriately configured.
6. Set appropriate cache durations for JavaScript code
You need to frequently check whether your Javascript files are returned with appropriate cache expiry time headers. This helps browsers minimize the overhead of checking out-of-date Javascript files in its cache.To check if your site is set up appropriately, the networking tab of Chrome Developer Tools can be used to check the HTTP response headers for downloaded Javascript files. Find headers such as cache control. The serve static assets with an efficient cache policy opportunity in the PageSpeed Insights report lists resources including Javascript files that may benefit from appropriately set cache headers.
The first step to fixing any issues on your site is to make sure the website is returning appropriate cache lifetime headers to help browsers cache Javascript files correctly.
However, you need to make sure that Javascript files can be updated when required to correct site defects or introduce new functionality. One solution is to include a version number or hash of the file contents as part of the URL on the downloaded file, creating a new URL that is used for each variation of the file.
Another approach 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, improving performance of you eCommerce website using Javascript.
Final thought
To conclude, Javascript has made it possible to optimize ecommerce websites, thus significantly improving the experience of users. You should pay attention to avoid common performance problems that can arise when using Javascript. There are many web-based resources to help with different Javascript-related issues.
If you are looking for a trusted IT partner, VNEXT Global is the ideal choice. With 14+ years of experience, we surely can help you to optimize your business digitalization within a small budget and short time. Currently, we have 400+ IT consultants and developers in Mobile App, Web App, System Development, Blockchain Development and Testing Services. We have provided solutions to 600+ projects in several industries for clients worldwide. We are willing to become a companion on your way to success. Please tell us when is convenient for you to have an online meeting to discuss this further. Have a nice day!
