Why Google's Web Vitals matter for Shopify merchants

You may have heard recently about Google's new Web Vitals performance metrics, featuring typically-cryptic acronyms such as CLS, LCP, and FID. To their credit, Google have published a number of articles to explain the concepts for developers and what they mean for web development best practices.

In this article, we'll provide a non-technical breakdown of each Web Vitals metric and their importance for delivering a great user experience for eCommerce sites, as well as improved SEO.

Cumulative Layout Shift (CLS)

We've all visited a website that loads a little janky. You know the kind — the first few seconds of the page load show some text and the button you want to press on screen. Then, just as you try to tap that button, a large image loads and pushes all the on-screen content further down the page.

This frustrating experience is captured in the CLS metric. It measures all of the layout adjustments that happen while a page is loading, and sums them into a single value. For a page to receive a Good ranking, Google requires a CLS score of less than 0.1.

Largest Contentful Paint (LCP)

LCP is rather simple — how long does it take for the largest on-screen element to be shown? For most eCommerce stores, the largest element is typically the hero banner on the home page, or the product image on a product page. For a blog article, the largest element may be the first paragraph of text.

By showing the largest elements more quickly, users will feel that the page is loaded much sooner, improving their perceived wait time to view the content they care about. Google requires an LCP score of less than 2.5 seconds to receive a Good ranking.

First Input Delay (FID)

The most technical of the three metrics, FID measures how long a page takes to respond to the first user interaction, such as clicking a button or scrolling the page. Testing has shown that interactions such as a button press feel instant to humans if the result of that interaction is completed within 100ms.

Stores that rely too heavily on third-party apps (and the javascript they bring along with them), as well as out-dated development techniques in their theme, will generally see a longer First Input Delay. Google assigns a Good ranking for pages with a FID score less than 100ms.

The link to conversion rate

These Web Vitals metrics were given that title because Google's research showed that they are the best representation of what makes a website look and feel fast to our users.

An online store's conversion rate is a distillation of every aspect of your site at a point in time — from marketing, to product pricing, even the time of day. Site performance, as it relates to user experience, is another one of these factors.

By improving the user experience through a more performant storefront, we remove the frustrations and friction that may otherwise deter the user from making a purchase, and therefore improve the conversion rate.

Improved SEO

Performance scores have been used in making Search ranking decisions for many years, but with Web Vitals, this marks the first time that Google has defined exactly which metrics they deem most important.

Google has adopted the three Web Vitals metrics as the benchmarks used for website performance testing across all of their products, including Search. In fact, the Performance panel in Google Search Console has even been renamed to Web Vitals to mark this change.

Optimising your store's loading performance to improve these three core metrics will provide one more reason for Google to rank your pages above a competitor, especially for highly competitive terms.

What next?

At The Working Party, we have identified and resolved site performance issues for some of Australia's largest Shopify Plus merchants. Use the contact button below to learn more about how we can optimise your store for these new Web Vitals.