Lighthouse for ecommerce: Why it matters and what you can do about it

When it comes to ecommerce website performance optimization, the one obvious reason why brands invest in it often comes down to having a better CX (customer experience). But that's far from the only grounds to improve your ecommerce site's performance.

Google search engine ranking is a key marketing factor for virtually every brand. If you're just starting out, your aim is to simply own your brand name, and ideally, start ranking for the product category you belong to (for example, 'silk pyjamas' or 'organic cotton towels'). If you're an established brand, you'll have enough credibility to own your brand name without even trying on Google. The focus then becomes ranking for long-tail keywords related to the specific products you carry (for example, 'black silk nightgown' or 'peach organic cotton bath towels').

Search engine optimization (SEO) is often heralded as a key factor in boosting your rankings on Google, and most people associate SEO with having effectively structured and written pages. But your site's performance is just as, if not more important than these factors when it comes to optimizing your site for search engine ranking performance. Google doesn't want to send people to sites that present a frustrating experience. The search engine pays attention to cues both from the customer side - are they clicking off right away because they're not finding what they want? - as well as the site performance side to determine how valid or legitimate your site is.

So how do you understand your ecommerce site's performance? Enter Lighthouse.

What is Lighthouse?

Lighthouse is an open-source, automated tool that assesses any site's performance, generating a Lighthouse score. You can run a Lighthouse report on any website - including ones that aren't yours - and get feedback across four key areas. The closer your score is to 100 across all four areas, the better your site performs both in the customer's and Google's eyes. In general, a high-performing website has a score of at least 90+ in each category.

The four areas that make up your Lighthouse score are:

• Performance
• Accessibility
• Best practices
• SEO

It's worth noting that while all four areas are important, performance is perhaps the most critical, both from a CX perspective, as well as from a search engine ranking perspective. Not coincidentally, your Performance score is the most likely to be the hardest to get a score of over 90 on.

Here's a quick overview of what the four areas measure:

Performance

Prior to Lighthouse, many developers were concerned with their PageSpeed score (also from Google). Your Performance score is like an advanced and expanded version of what PageSpeed measures on its own, analyzing how long it takes for different elements to load, how long it takes for someone to be able to interact with your site, and whether the layout shifts at all after loading. Slow load and interactivity times and a layout that moves around after it's loaded have been earmarked as frustrating to consumers - and your Lighthouse Performance score will reflect this accordingly.

Accessibility

As you might have guessed, accessibility simply addresses how accessible your website is to literally anyone. This area has the largest number of audits (over 50 at last count), although some of them require a manual check, and others might not apply to your site. While many people associate accessibility with a physical or mental impairment, there are many everyday examples where your accessibility score might be hurting. For example, having content not be available to people in specific regions, or not being able to find a familiar feature of a site when browsing on a different medium, such as a tablet, can both negatively impact your Lighthouse Accessibility score.

Best Practices

Technically all Lighthouse scores relate to best practices, but this somewhat of a 'catchall' category simply refers to general web design and development best practices as set by Google. As rules and preferred practices are continually evolving, monitoring your Best Practices score can be a helpful way to stay on top of modernizing your web pages.

Search Engine Optimization (SEO)

Yes, SEO in relation to content is a real thing that Google measures site performance on and not just smoke and mirrors. But the SEO score that's part of your Lighthouse score is pretty simplistic, based on just a dozen or so basic SEO content factors that every site should be getting right, such as having a <title> element or using descriptive text for your links. Brands looking to further optimize their SEO should use a more in-depth third-party tool, as opposed to hitting the standard threshold Lighthouse is measuring for. Lighthouse is a great tool for discovering potential SEO and load-time issues, but will not necessarily give you all the information you need to improve your actual on-page SEO.

How do I get a Lighthouse score?

There are several ways to check your Lighthouse score. One of the simplest is to inspect any page on your website by using the 'Inspect' feature on Chrome. There you can choose the Lighthouse tab and run a report.

Alternatively, another simple way to access your Lighthouse score is to visit web.dev/measure and input the URL of your choice.

Lighthouse will run a quick audit of the site and almost instantly produce scores. You can dive deeper into each category to learn about areas for improvement and what might be hindering your scores, with helpful guides for each area.

A few things to keep in mind about your Lighthouse score:

• Lighthouse is based on how your mobile site performs, although you can run desktop analyses of your site performance using other Google tools. If you're looking to optimize your Lighthouse score, always start with the mobile experience.
• A score of 90 or above in each category is considered optimal for providing a great CX. Performance is the most challenging score to get above 90.
• Getting a score of 100 is pretty close to impossible, especially as performance issues can creep in unnoticed; the amount of effort required to get to 100 isn't worth the impact on your SERP performance.
• Your score can often fluctuate due to underlying conditions such as A/B tests, internet traffic routing changes, and the device you're testing on. Two people could run a test on the same page at the same time, but on different devices or in different locations, and get quite different scores. In some cases Lighthouse will actually flag things that are creating variability issues with your score, and provide directions on how to avoid them.
• The name says it all: Think of Lighthouse as a guide to helping you spot any glaring issues. How you course correct (or even how much you course correct) will be different for every business. A single point fluctuation from day-to-day probably isn't worth concerning yourself over; a score that's in the 'red zone' is.  
• Site speed and page speed are two different things. Certain pages will probably have stronger performance scores than others, because the content is relatively static or cached - like your policy pages, or even the home page. Other pages however, may be significantly slower as they load add-ons like UGC, reviews, loyalty point details, and other integrations.

Why should I care about my Lighthouse score?

As mentioned above, Lighthouse is technically an open source measurement tool, but it's initiated by Google and it's visible in the Chrome browser - which owns 64% of the global browser market share. Having a good Lighthouse score is imperative to being better ranked by Google overall, but perhaps more importantly, Lighthouse is really about best practices. Improving your Lighthouse score means improving your CX. Offering a better customer experience equals more time spent on site, and ideally, more sales for your eCommerce business.

Not only that, Lighthouse does the heavy lifting for developers to find ways to optimize and modernize your site to the latest standards, essentially generating to do lists in an instant for your development team.  

How does the Lighthouse Performance score work?

There are six key factors Lighthouse takes into account when calculating your Performance score. They are:

• First contentful paint: How long does it take for the first element to appear on your site?
• Speed index: How quickly are the contents of a page visibly populated?
• Largest contentful paint: How long does it take for the largest element to appear on your site?
• Time to interactive: How long does it take before someone can fully interact with your site?
• Total blocking time: Sum of all time periods between the first contentful paint and time to interactive, expressed in milliseconds.
• Cumulative layout shift: How much does the page move after additional elements are loaded in?

It's important to recognize that while there are six elements, they aren't all equal priority in determining your score. The latest Lighthouse calculator takes the following into account:

• First contentful paint = 10%
• Speed index = 10%
• Largest contentful paint = 25%
• Time to interactive = 10%
• Total blocking time = 30%
• Cumulative layout shift = 15%

These percentages are regularly updated by Google as they undertake research and get more feedback on what has the biggest impact on user-perceived performance. These percentage changes will in turn shift how your Performance score is calculated. You can stay on top of Google's Performance scoring metrics here.

Does LimeSpot affect your Lighthouse score?

As we've already covered, having a perfect 100 Lighthouse score is incredibly challenging and not expected. Adding almost any type of elements to your page that aren't hard coded in will impact your Lighthouse score, and that includes LimeSpot.

Keep in mind that for tools like LimeSpot do need to be loaded in real-time to reflect the real-time inputs your shopper is feeding you. Even a site that only uses the simplest type of recommendation box, like 'Recent Views', will see a slight impact on their Lighthouse score because each page is dynamically reflecting each customer's unique shopping journey.

That being said, LimeSpot has always aimed to optimize our personalization suite as much as possible to minimize the impact on your store's page speed. This includes:

• Loading scripts in an asynchronous way; ensuring the page load is never stopped to wait for our servers' response
• Lazy loading of recommendation box imagery to only load once the boxes are viewable by a customer (i.e. as they scroll down a page)
• Lazy loading of recommendation box variants until a customer hovers on a particular product
• Loading components using AJAX in a non-prioritized way
• Optimized APIs to deliver content as fast as possible
• Batching review and loyalty app calls when used in tandem with our boxes
• Ability to customize the user experience between mobile and desktop viewing

You can read more about how LimeSpot takes extensive steps to minimize the impact on your page speed here.

LimeSpot isn't the only one focused on ecommerce site optimization. Shopify's new Online Store 2.0 themes, such as Dawn, have also been highly optimized to reach better Lighthouse scores. In fact, running a 'Dawn store' with zero customizations should net a Lighthouse Performance score of around 99. When you install a basic application of LimeSpot, such as placing recommendation boxes on the home page, you should only see an impact of 1 or 2 points to your overall Performance score.

This minor impact is to be expected because, as mentioned earlier, LimeSpot is reacting in real-time to your customer's behavior. Plus, the boxes will cause a slight content shift as they are introduced on each page, or section of a page. Keep in mind, content shift is a lower-ranked factor in how your Performance score is calculated.

Because of the factors listed above, the number of boxes you add to your website shouldn't dramatically impact your Lighthouse score beyond a single point or two. Lighthouse scores are calculated page-by-page, so whether you have one carousel of boxes on the home page or three carousels on every page, they will all be loaded with the aim of providing minimal disruption to your site's overall performance and speed. If you’re having trouble improving your Lighthouse score or with your SEO in general, consider hiring an SEO agency like NP Digital to help you.

Get started with LimeSpot

Now that you understand LimeSpot's impact on your page load speed (the short answer: extremely minimal!) why not give our personalization suite a try? We offer a free 15-day trial, or you can contact us to get your technical questions answered during a customized demo.