Managing performance
In the ecommerce business, the performance of your website directly impacts the shoppers' experience. It may affect sales conversion rate, user session time, and other relevant metrics. Every millisecond counts and influences not only the shopper's decision-making process but also your store's website rank in search engine results. Therefore, it is crucial to ensure that your website is as fast and performant as possible, achieving high scores in Lighthouse audits.
Performance slowdowns
As the complexity of your project increases, many factors may slow down your website's performance. For this reason, maintaining optimal website performance is a continuous effort, which requires some commitments.
Some points of attention are:
-
Third-party scripts: Third-party scripts are one of the leading causes of performance slowdowns. These scripts fire additional network requests to multiple servers and are likely to block DOM construction, keeping the main thread busy and delaying how quickly pages can render.
-
Page weight: Page weight comprises the total size of a web page, including all the resources needed for a page to load (i.e., images, stylesheets, and other static files). The heavier the files and data your website sends to the client, the longer the browser takes to render your page. Hence, reducing page weight is a great opportunity for improving your website performance.Page weight issues are related mainly to:
- Uncompressed files.
- Unoptimized images.
- Unoptimized fonts.
- Unclean code.
-
HTTP requests: When a user visits a web page, the browser sends multiple HTTP requests to load all the resources (i.e., images, stylesheets, fonts, etc.) needed to render that web page. Downloading these resources, however, significantly impacts the page's loading time. Therefore, besides optimizing images, compressing files, and reducing download size, it is also important to consider minimizing download frequency.
-
Render-blocking resources: Render-blocking resources are scripts, stylesheets, and code files sequentially downloaded, parsed, and executed by the browser. Hence, when the browser faces a render-blocking resource, it stops the entire rendering process until these critical files are processed first. Although these resources take a considerable time for the browser to process, they may not be crucial for the user experience.
Monitoring tools
There are several tools available for identifying performance issues and helping improve website performance, such as:
- Lighthouse/PageSpeed Insights: An open-source automated tool created by Google used to identify common problems related to the quality of a webpage through audits.
- SpeedCurve: Live dashboards that monitor web applications' experience across different browsers and platforms and provide visibility over performance.
- PartyTown: A lazy-loaded library to help relocate resource-intensive scripts into a web worker, keeping them off the main thread.
- Google DevTools: A set of web developer tools built directly into the Google Chrome browser.