Google is on a decade-long quest to improve the speed of the internet. Changes came slow until, in 2017, the search giant found it took 22 seconds for a mobile page to fully load. Since, more than 15 semi-aggressive algorithmic and ranking updates have taken place, all with a focus on website speed.
In this time, the search giant has also launched tools to facilitate site speed measurement and optimization. Lighthouse is a great example, as it has become one of the most popular tools for evaluating website performance. It is easy to use and great at distilling complex measurements of speed by providing a single, relative website Performance Score. But Google, being Google, is changing things up again.
Lighthouse v6 is currently in Beta, and will include new speed metrics, as well as a new weighting formula to calculate Performance Scores. Lighthouse v6 was expected to go live early this year, however, the Lighthouse team is still working to ensure that all scoring curves are fine-tuned.
*Note: While Lighthouse is the easiest tool to check website performance, it has its downfalls. Prepare for variability in the scores you receive. We recommend running Lighthouse through PageSpeed Insights to eliminate device-based variation in results.
While we wait for Lighthouse v6 to roll out, here is what you need to know about the new speed metrics, the metrics that were depreciated, and the new weighting system that might affect your website’s Performance Score.
What was once five weighted metrics has grown to six. In Lighthouse v5, a website’s Performance Score is calculated based on a weighted sum of the following speed metrics: First Contentful Paint (FCP), Speed Index (SI), First Meaningful Paint (FMP), Time to Interactive (TTI), and First CPU Idle (FCI).
In Lighthouse v6, three new metrics will be added, including Largest Contentful Paint (LCP), Total Blocking Time (TBT), and Cumulative Layout Shift (CLS). The addition of these metrics will replace FMP and FCI from Lighthouse v5. This means Lighthouse v6 will score performance based on six metrics that measure the time it takes for elements to appear on screen and respond to user input. These are FCP, LCP, SI, TTI, TBT and CLS.
These changes are important for two reasons. The first being that there are three new metrics to track and optimize for in order to be viewed as ‘fast’ by the search giant. Back in 2018, mobile website speed became a ranking factor, so optimizing for speed means enjoying substantial SEO lift. The second being that there will be a new weighting formula to calculate Lighthouse Performance Scores in v6. The metrics and the weight they will receive in v6, are based on how much they impact the perceived performance of a website.
This is the most inherent change between the two versions—Lighthouse v6 moves toward perceptual metrics to measure speed rather than network-based metrics, like the number of bytes downloaded. Here are the changes that you need to know about.
Largest Contentful Paint (LCP)
In v6, Largest Contentful Paint (LCP) will replace First Meaningful Paint (FMP), which holds only 7% weight in Lighthouse v5. Both metrics measure the render time of the largest content element visible on a page (i.e. image or video), however, FMP has been found to produce inconsistent results and can only be standardized in certain web browsers. LCP will provide more accurate results and will account for 25% of a site’s Performance Score in Lighthouse v6.
LCP is an important perceptual metric because it marks the point where the largest content element of a page loads and is visible, giving a user the impression a page has fully loaded. For eCommerce websites, this is typically when the main image on the page has loaded. We have argued that LCP (or its close cousins Largest Image Rendered and Largest Painted Hero) is the best metric to measure website speed for a while now, and it’s great to see the industry coming around!
According to Google’s web.dev, sites should strive for LCPs that are faster than 2.5 seconds, with anything longer than 4 seconds considered slow. However, this feels quite long to us. Delivering 1-second page loads should be the goal to beat. Instant websites delight consumers and drive significant business benefits (such as 32.1% organic traffic boosts and 15-30% lifts to conversion rates with Layer0.
Total Blocking Time (TBT)
In Lighthouse v6, Total Blocking Time (TBT) will replace First CPU Idle (FCI) which holds 13.3% weight in v5. Rather than FCI measuring when the page is ready for user input (i.e. clicks or taps), TBT will measure how non-interactive a page is. This new metric will account for another 25% of a website’s Performance Score.
TBT is measured by calculating the total amount of “blocked” time between the first content element displayed to the user (FCP) and when a user can fully interact with the page (TTI). Any task that exceeds 50ms is considered a “blocker,” because if a task takes longer than this the user will notice the delay, and perceive the page as sluggish or janky.
Essentially, TBT is the sum of time it takes all tasks that are longer than 50ms, once they cross the initial 50ms. For example, if there are four tasks taking 25ms, 55ms, 80ms, and 100ms then the TBT is (0+5+30+50) 85ms. To provide a good user experience, sites should aim to have a TBT of faster than 300ms. After that, Lighthouse v6 will classify a score up to 600ms as moderately fast and a TBT over 600ms is considered slow.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is the third new metric that will be added to Lighthouse v6, and will not replace any metric in Lighthouse v5. CLS attempts to measure how janky a site feels to a visitor and will account for only 5% of a site’s Performance Score in Lighthouse v6.
CLS helps quantify how often users experience unexpected layout shifts. You know these instances: you’re about to tap a button and boom, all of a sudden you tap something else on the page because the elements on the page shifted? Yeah, it can be quite annoying. Typically this is due to an image or video resizing itself, or a font that renders larger or smaller than intended. The CLS metric helps address this problem by measuring how often it's occurring for real users.
CLS is measured by the sum total of all individual layout shift scores for each unexpected layout shift that occurs during the entire lifespan of the page. A good CLS score will be lower than 0.1. A score between 0.1 and 0.25 needs improvement and above that, your score will be classified as poor.
Comparing Lighthouse v5 and Lighthouse v6
The three new metrics, LCP, TBT and CLS have a combined weight of 55% on Performance Scores in Lighthouse v6. The other 45% is influenced by FCP, which measures when the first content element is displayed to the user (15%); SI (15%), which measures how quickly content is visually displayed during page load; and TTI (15%), which measures how long it takes a page to become fully interactive. This Performance Calculator can help you anticipate the changes you will see in your Performance Score in Lighthouse v6.
To demonstrate the effects, we ran multiple tests for Nike.com using Lighthouse v5 and v6 Beta to find the average Lighthouse Performance Score for the athletics site. We found that in Lighthouse v6, Nike.com's score dropped by 36%. When adjusting the website’s extremely high LCP value of 12.34s to sub-500ms (speeds attainable on the XDN), Nike.com’s v6 Performance Score nearly doubled.
This is only an example of the changes we might be seeing in website Performance Scores when the new version of Lighthouse rolls out. The key is to understand that Google will give more weight and influence to perceptual speed metrics in the sixth version of Lighthouse and you would be wise to follow suit.
*Note: Lighthouse is still working to ensure that all scoring curves are fine-tuned, and the metrics are mature and thoroughly tested. It is possible that the scoring weights will change again. Therefore, these scores are an estimation.
Leapfrog the competition
Keeping up with Google’s updates is the only way for eCommerce sites to stay ahead in the extremely competitive landscape. Failure to do so means leaving money on the table, or even losing it to your competition as your customers leave your sites for faster experiences. Thankfully, there is a silver lining.
In our analysis of the Lighthouse Performance Scores of the top 500 internet retailers in the US, we found that there is a lot of opportunity for forward thinking eCommerce websites to leapfrog the competition, and outrank and outperform multi-billion dollar corporations. We’ve seen this in action with sub-second websites on Layer0. For example, Annie Selke is a mid-sized home and decor retailer who outranks eCommerce giants, the likes of Amazon, Williams-Sonoma, and Wayfair with its instant website.
Layer0 is able to squeeze every millisecond out of every speed optimization effort and deliver instant where others cannot, through the combination of cutting-edge technologies. Instant loads are attainable with modern frontends with AMP and server-side rendering support, predictive prefetching, and an intelligent CDN that streams and caches dynamic content at the edge so that your site remains 5 seconds ahead of shoppers’ taps.
Google has been on a decade-long quest to speed up the Web. Sometimes, these initiatives are made through crawler updates, others through ranking algorithm adjustments. This time, it’s through one of the most popular tools used to assess website performance: Lighthouse.
In Lighthouse v6, the search giant is moving the emphasis from network-based speed metrics to perceptual metrics that assess the user’s experience. Not only have new metrics been added, like LCP and TBT in place of FMP and FCI, but these new metrics also receive the bulk of the weights that determine a website's Performance Score. Not only is website speed becoming more and more emphasized with each update, so is the focus on perceived speed. And for good reason.
The benefits of site speed go beyond search ranking. It increases conversion rates, revenue and customer loyalty. Our customers consistently see double-digit lifts in these areas. For example, 1-800-Flowers and Venus Fashion saw an increase in conversions by 50% and 24%, respectively, with half of their pages in less than 320ms (LCP) on the XDN.
Get your website down to 1-second median loads in as little as a few hours, or sub-second in a matter of weeks. Layer0 is the only solution that can guarantee sub-second page loads, delighting both your customers and the search giant. Schedule a consultative conversation to learn how with a site speed expert today.