Performance Testing of E-commerce Websites With Lighthouse

Performance Testing of E-commerce Websites With Lighthouse
By Dzmitry Prymudrau, Head of Test Automation Innovations Department

It took you about two seconds to read this title. One to two seconds is the optimal web page load time. If it takes any longer than that, customers are likely to leave your e-commerce website. 

Shoppers hate waiting. According to Kissmetrics, 79% of customers are less likely to buy from a website again if a website’s performance is poor. A two-second delay can result in an 87% abandonment rate. Also, slow loading times can adversely affect your website’s search engine ranking.

You can't do without website performance testing if you want to improve the value and conversion of an e-commerce site in this day and age. Read this article and learn about the Lighthouse performance tool and the key testing metrics is uses to improve website performance.

Google Lighthouse is an open-source, automated tool that QA engineers use to evaluate the quality of web pages. It provides excellent functionality for web performance testing. 

Benefits of the Lighthouse Performance Tool

The Lighthouse reporting tool has many benefits that are quite helpful for QA specialists.  

  • Free of charge. Since the Lighthouse for performance testing is an open-source tool, it can be used for free.

  • Flexible. Its adaptability allows QA engineers to simulate network throttling, make device emulation, and customize other specific audit conditions that can impact performance metrics.

  • Puppeteer-friendly. Lighthouse for performance testing can be complemented by the Node.js library Puppeteer. It enables the creation of a test flow necessary to analyze some types of target pages (like a web page behind authentication).

  • Informative. The Lighthouse reporting tool includes metrics that Google uses for ranking.

  • Selective. Engineers may configure the final report in the Lighthouse performance tool by using filters that can exclude some categories and can include specific audits.

  • Customizable. Test engineers can go beyond the default Google Lighthouse audits and create customized ones.

Benefits of Lighthouse Performance Tool

What to Check for When Using the Lighthouse Reporting Tool

When it comes to e-commerce website performance testing, evaluating just a homepage alone is not enough to get a complete view of the web solution’s performance. A Lighthouse performance audit involves at minimum checking the Home Page, Account Page, Product Listing Page, Product Detail Page, Cart, Checkout, and Order Confirmation Page.

QA engineers can make a complex audit of web pages by assessing the quality in five categories in order to ensure the best overall user experience:

  1. Performance. The tool measures response time, showing how quickly an app or a website loads and how fast users can view or access the content.

  2. Accessibility. Test engineers may use Lighthouse’s tools to check a web page for common accessibility errors, find room for improvement, and suggest additional tech stacks.

  3. Best practices. This audit category describes the security aspects of a website and modern standards of web development.

  4. Search engine optimization (SEO). This category shows how well search engines rank a website or app and where it stands it in the search results.

  5. Progressive web applications. PWA is needed to deliver enhanced app capabilities, reliability, and installability that’s based on a single codebase. It permits reaching out to anyone, anywhere, and on any device, allowing users to jump from a web page to download a separate app.

For each category, you receive reference documentation, clarifications on why you need this type of audit, and what improvements you can make.

Such an inclusive QA approach using Lighthouse website performance testing ensures an excellent overview of the quality of your site as a whole. It checks the performance of your site equally well on desktop, mobile, and web applications.

E-commerce Website Performance Testing

Let's take the Lighthouse for performance testing category as an observation point. It involves key metrics that you should take into account in order to upgrade and perfect your web solution. This way, you can improve such business KPIs as conversion, churn rate, purchase rate, and customer loyalty.

A QA team will use Lighthouse to provide an in-depth overview of your site performance. The tool allows generating insightful reports and uses six metrics to assess website performance:

  • LCP (Largest Contentful Paint). This metric lets engineers measure how long it takes your website to load and show the largest content.

  • TBT (Total Blocking Time) measures the total amount of time lost when a page doesn't respond to mouse clicks, screen taps, or keyboard presses.

  • CLS (Cumulative Layout Shift) allows QA engineers to measure how much content moves around after it was first rendered.

  • FCP (First Contentful Paint). This metric is vital since it measures how long it takes for a page to render the first content on the screen.

  • SI (Speed Index). It allows for estimating how quickly content gets displayed during a page load.

  • TTI (Time to Interact). It measures the responsiveness of a page and helps identify if a page is actually working and also if it responds to interactions after a specified loading time.

metrics to be checked with lighthouse

All in all, Lighthouse performance metrics enable engineers to estimate the time customers have to wait before a web page is ready for interactions. It also checks to see if the content and layout are neatly rendered, is  easy to interact with, and if loading times are fast enough..

As a result of web application performance testing, you’ll receive a report that tells you what’s functioning well,  and the specific areas where you’ll need to improve.

Performance Testing of E-commerce Website Mobile Version

Almost 60% of the world's population prefers mobile devices to surf the web, searching for products and services. If you wish to engage more customers, you need to focus on how your web e-commerce solution functions on mobile devices.

time to interactive load

Your e-commerce website may work great on desktops, but it doesn't mean the performance will be equally as good as on mobile devices. The loading time of a web page is 87.84% longer for mobile devices on average. You should offer your customers easy-to-interact on-page elements, just like those they can enjoy on the desktop. 

For example, it’s a bad sign if content moves when a customer is about to click it when using a mobile device. Test engineers will use the tool to measure the amount of content that moves around after its first rendering, and if the Lighthouse performance score is over 0.1, they will report the issue. 

Key Takeaways

You need to do performance testing for web applications on both desktop and mobile devices so you can help ensure your customers the best possible shopping experience. When you hire QA professionals to audit your web e-commerce solution, that can help mitigate the risks of high churn rates and negative user feedback while preventing potential financial losses.

Web page load is not just a single snapshot in time, and software QA engineers use many metrics to get a full assessment. The Lighthouse performance testing tool is a reliable resource. It makes finding errors and defects in multiple areas easier, it offers ways to enhance the load testing experience, and it can remove any defects that might turn  your customers away.

Dzmitry Prymudrau
Dzmitry Prymudrau
Head of Test Automation Innovations Department
Dzmitry Prymudrau graduated from BNTU with a Bachelor's degree in Industrial and Civil Engineering. He represents Solvd at international tech conferences and teaches students who are taking courses at Solvd.Laba.

Tell us about your needs