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, GCT Solutions, an IT outsourcing company from Vietnam, suggests 6 tips related to Javascript libraries and frameworks that can help you to optimize eCommerce websites.
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.
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.
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.
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: