Lighthouse Performance: How to monitor and improve it for ecommerce

Introduction to Lighthouse Performance

In this final installment of our Lighthouse blog series, we delve into the world of Lighthouse Performance. What makes it one of, if not the most critical metric to measure for any ecommerce business? What does the Lighthouse Performance Audit consist of? And more importantly, how can you monitor and optimize this metric for your online store? 

In this article, we explore the significance of Lighthouse Performance, and the practical steps you can take to test, monitor, and improve your performance score. Let’s jump right in!

What is the Lighthouse Performance audit / score?

Google Lighthouse is a website auditing tool developed by Google that helps to improve site user experience through the highlighting of opportunities and diagnostics. It is made up of five different audit categories, namely: Performance, Accessibility, Best Practices, SEO and Progressive Web App (PWA). If you are not familiar with Google Lighthouse and its scoring, we highly recommend you read this overview.

Using pre-determined criteria, Lighthouse tests the performance of a website and gives it a score rating from 0 to 100. The Lighthouse Performance score in particular is calculated by combining several different performance metrics. The score composition and weightage has changed over time, but the table below shows the breakdown as of Lighthouse 10 (as of Feb 2023). 

Note: Time to Interactive (TTI) was a previous performance metric that has been removed in the latest version of Lighthouse. 

Do these metrics look familiar? You may recognize First Contentful Paint (FCP), LCP (Largest Contentful Paint) and Cumulative Layout Shift (CLS) from Core Web Vitals. The difference is that the Lighthouse Performance uses lab data to measure your page performance (lab meaning a controlled test environment based on specific device, browser and speed configurations), while Web Vitals are measured from data that’s collected from real users. 

Why Lighthouse Performance matters for your ecommerce

When we talk about website performance, most of us would think about page speed. However, it’s not just about making sure the site loads quickly. It’s also about ensuring that the user experience is smooth and seamless.

How is Lighthouse Performance directly linked to user experience, conversion rates, and ultimately, the success of your ecommerce business? Research and numerous statistics have shown that slow loading times and poor performance result in increased bounce rates and abandoned shopping carts, leading to missed revenue opportunities.

According to Google, a one-second website speed improvement can increase conversions for mobile users by up to 27%. And with 70% of shoppers buying on mobile devices, site speed clearly has a huge impact on your revenue potential. In terms of customer loyalty, Skilled discovered that 79% of customers are less likely to repurchase from an online store if they were “dissatisfied” with a site’s page speed.

There should be no doubt in your mind that continually optimizing website speed and performance is crucial for your business. So, let’s look at ways you can measure, monitor, and improve your Lighthouse Performance score.

How can you monitor your Lighthouse Performance score?

There are a few ways you can perform the Lighthouse audit on your ecommerce site and measure your performance score.

Google PageSpeed Insights: 

This tool audits 4 of the 5 Lighthouse categories: Performance, Accessibility, SEO, and Best Practices (PWA audit is excluded). While providing mobile and desktop results, it does not take into consideration the specific device you want to do the analysis for.

Chrome Developer Tools: 

This tool analyzes all the Lighthouse categories (plus PWA) both on mobile devices and desktop. It can be accessed from the Chrome browser by clicking F12 and then selecting the Lighthouse tab. However, the tool’s interface is relatively detailed, hence may be too technical to use for some.

Valido Web Score:

Valido Web Score is an intelligent test automation platform that allows ecommerce businesses to not only measure their performance scores (as well as scores from the other categories), but also derive actionable insights on how to improve them. It also has PageSpeed Insights integrated.

While most Lighthouse monitoring tools measure performance at one particular moment in time, the Web Score app automatically tracks your website’s overall performance over time, allowing you to identify trends and patterns as well as understand the impact of optimizations. It also breaks down your score and audit results into a user-friendly format, so that you can effectively focus on what needs improvement.

The big question: How can you improve your Lighthouse Performance score?

Here are tips and strategies that you can implement to improve each Google Lighthouse Performance metric for your ecommerce store:

First Contentful Paint (FCP)

• Optimize your site’s server response time: You can do this by reducing server response times – optimize server configurations and leveraging caching mechanisms to deliver content faster. Another option is using a CDN and this is not complicated at all. For example, if your ecommerce uses WordPress, you can even set a CDN up through the free CDN Enabler plugin.
• Minimize render-blocking resources: Prioritize critical resources to load first and defer non-essential scripts to avoid delaying the FCP. Web score allows you to easily identify what these resources are and what you can do to improve its utilization.

Speed Index

• Optimize images: Some page speed issues involve technical, under-the-hood improvements. But one of the most important places to look when addressing your page speed is the images across your ecommerce site. All you need to do is compress and resize images without compromising quality, which can be done either through your ecommerce platform or using a third party provider like TinyPNG. 
• Minimize CSS and JavaScript: Reduce the number of unnecessary CSS and JavaScript files to improve the page speed of your website.

Largest Contentful Paint (LCP)

• Optimize web fonts: Choose web fonts carefully and use the appropriate font-display option to ensure text remains visible during font loading.
• Reduce server response times: Similar to FCP, implementing server-side optimizations can help your site deliver the largest contentful paint faster.

Total Blocking Time (TBT)

• Lazy loading: Lazy loading is a technique that defers the loading of images and videos that are not immediately visible on the user’s screen. Lazy loading is generally helpful in optimizing all the Lighthouse performance metrics, but should mainly be used for images in product listing pages. 
• Implement code splitting: Split large JavaScript bundles into smaller, more manageable chunks to reduce the total blocking time.

Cumulative Layout Shift (CLS)

• Set image and video dimensions: In order to prevent sudden layout shifts as media on your webpage loads, you should ensure that image and video dimensions are explicitly defined in the HTML code.
• Avoid dynamically injected content or reserve space: What does this mean? In simple terms, dynamically injected content refers to elements on a website that appear or change after the page has loaded. For example, it could be a pop-up message, an advertisement, or new information that appears when you click on a button. Therefore, you should “reserve space” by setting aside enough empty space on the webpage. This is so that when the dynamic element appears, it fits nicely into that space without pushing other content around (hence preventing unexpected layout shifts for users)

Benchmarking and harnessing AI for performance optimization

Valido Web Score provides a user-friendly interface that not only helps you identify performance bottlenecks, it also provides benchmarking features to compare your online store against industry standards (and your direct competition).

In addition, the Web Score app leverages AI to automatically provide practical  solutions to detected performance issues. From compressing assets to optimizing scripts, Web Score offers intelligent and personalized recommendations according to your ecommerce store configuration and needs. 

Ready to take action? Elevate your Lighthouse Performance with Web Score

There is no doubt in the crucial role of Lighthouse Performance in the success of ecommerce stores. However, most online business owners and operators are often lost when it comes to what needs monitoring and how to do so. By partnering with Valido Web Score, you can continuously monitor your online store, receive alerts, and immediately gain the insights you need to improve your Lighthouse Performance. 

With our free trial, you can gain access to interactive visualizations of your online store performance, experience the power of AI-driven insights as well as benchmarking features. These cutting-edge features empower you to take your ecommerce business to the next level, ensuring a seamless and engaging experience for your customers. Don’t miss out on this opportunity to boost your website’s performance and drive your business growth with Valido Web Score – Try it today for free.

Leon Lau

Digital UX, writing about the latest ecommerce trends.