012 How To Prepare Your E-Commerce Website for Core Web Vitals

Google’s Page experience update is coming this June 2021. And along with this update, a new set of metrics known as Core Web Vitals which relates to speed, responsiveness and visual stability.

In this episode, we’re going to talk about Core Web Vitals and everything you need to prepare for this update especially if you own an online store. We’ll discuss the common reasons that cause poor Core Web Vital scores and what you can do to optimize your site so you don’t lose traffic and revenue.

Links in this episode:

Episode Notes:

Google introduced the Page Experience update last May 2020 to give website owners one year to prepare (unlike other updates).
They also provided about 6 different tools to help you measure Core Web Vitals.
Finally, since it aims to measure the quality of experience on the web, it affects all types of sites.

So yes, it’s a big deal because it will become part of the search ranking factors by June 2021. The thing with SEO is what we want to do is preventive measures all the time and not reactive. This is your time to really act on this if you haven’t yet.

Why Did Google Introduce Core Web Vitals?

Google is really cracking on the poor user experience specially on mobile. So that’s good for us users. The Page Experience update aims to address frustrating user experience. Along with it, a new set of metrics called Core Web Vitals. This is Google’s way to measure the quality of experience on the web. Currently, only 15% of websites have good Core Web Vital scores.

What Are Core Web Vitals?

There are three of them and this is going to evolve over time. You may know them as LCP, FID, and CLS

Largest Contentful Paint (LCP)

LCP pertains to the amount of time it takes for the largest element in the page to be displayed. For LCP, you want a score anywhere between 2.5 seconds or less.

First Input Delay (FID)

FID is the number of milliseconds it takes for the page to respond to the first user interaction like click, tap, swipe, pinch to zoom, anything like that, anything that’s not a scroll that’s an active interaction. For FID or load responsiveness, you want a 100 milliseconds or less.

Cumulative Layout Shift (CLS)

CLS is something that quantifies your layout stability during the page load. So if elements jump around, you’re going to get a bad score for that. And you want it to be as close to zero as possible. For CLS, you want a score of 0.1 or less.

There are two different ways to measure this. There’s the lab data, which is what Page Speed Insights or Lighthouse tests. It’s a controlled environment. You’re running the test yourself. And then there’s the field data, which is the data that is collected from actual users who visit your website and this field data, which you can find in the Chrome User Experience report.

What’s New with Cumulative Layout Shift?

While all layout shifts are poor user experiences, they do add up more on pages that are open longer. That’s why the Chrome Speed Metrics Team set out to improve the CLS metric to be more neutral to the time spent on a page.

An internal analysis of long-lived pages with high CLS scores found that most problems were caused by the following patterns:

Infinite scrollers shifting content as the user scrolls.
Input handlers taking longer than 500 ms to update the UI in response to a user interaction without any kind of placeholder or skeleton pattern.

And this is really good. This represents X page experience in a much better way than what they had before.

I’m really happy with this change. It just shows that Core Web Vitals are something that’s alive and it’s going to evolve over time and probably made better over time.

E-commerce Stores and Core Web Vitals

Only 13% of e-commerce brands from the study scored good for all three Core Web Vitals. A retail study done by a British SEO agency, called Redicco, found that among the Top 500 Retail Brands in the UK:

177 got good LCP score (35%)
439 got good FID score (87%)
158 got good CLS score (31%)

So many websites are just not doing great. The one website that’s doing well is Wish.com. That’s the only one that was really crushing it and getting a high, not only Core Web Vitals scores, but also high page speed score. The reason for that is when you go to their homepage, there’s a login form and nothing else.

How Can E-Commerce Site Owners Prepare for Core Web Vitals?

Largest Contenful Paint (LCP)

If it’s a product page, that’s conventional, that makes sense to a lot of users. The image is what people will want to see. So images are what needs to be loaded as soon as possible. That image needs to be shown to the user or presented by the browser in 2.5 seconds or less. And the way field data is measured here, that’s 2.5 seconds or less needs to happen for seventy-five percent of your users that visit your website with Chrome browsers.

And then your LCP score will be good. So 75% in 2.5 seconds or less, sounds easy. Like, how long does it take to download an image, but that’s really not what this is about because for that image to be presented, to be displayed to the user in browser first, the browser sends the request to our server.

Then your server needs to do the backend magic and create the webpage or deliver the web page, send it back to the user. Then the browser needs to process the HTML. It will send back and then to CSS and then the JavaScript, and then it needs to download the image. And there’s a lot of render-blocking stuff like CSS, 2.5 seconds or less. It’s challenging but doable

Things that can cause poor LCP in e-commerce websites:

Slow server response time
Slow loading assets (JS, CSS, images…)
Render-blocking JS and CSS
Client-side issues

Tips for optimizing LCP:

Improve your server response time and use server-side rendering for the most important page sections
Remove everything you do not need
Compress or minify what’s left
Optimize delivery of remaining assets (important ones first, less important last), preload main image in product pages

First Input Delay (FID)

So we’re still talking about product pages. You’re unlikely to have only one product image there. It’s probably going to be more than one. You’re going to have a gallery and then they can swipe. So if I’m looking at the first image that was preloaded, as we recommended in the previous section and it was displayed really fast and it was there instantly. And if I want to switch to image number two, if FID has a poor score. I will notice that there’s a delay in the interaction.

Things that can cause poor FID in e-commerce websites:

Almost always it will be tons of JavaScript code and long JS tasks (taking more than 50ms to execute)
WordPress and complex plugins and themes

Tips for optimizing FID:

If you don’t need it, remove it
Break down long tasks into smaller chunks
Clear critical rendering path by removing anything non-essential from it
Use web workers to run JavaScript on background threads and free up the main thread so it can handle page rendering faster
Evaluate WordPress plugins, third-party libraries and keep only the essentials

Cumulative Layout Shift (CLS)

CLS is the sudden shift on a page caused by an ad or a pop up causing you to click the wrong button or re-do your last action. Anything that shows up on the page unexpectedly without the space being reserved for it is going to cause a layout shift that could be an image that doesn’t have the height dimension specified.

It’s calculated by multiplying the impact fraction, or how much visible content shifted in the viewport, by the distance fraction, or the distance an unstable element has moved in the frame divided by the screen’s largest dimension (height or width). Under 0.1 is good, 0.1 to 2.5 needs improvement. To debug CLS – slow down your network speed and throttle the CPU speed (easy in Chrome), enable “highlight layout shift regions”

Things that can cause poor CLS in e-commerce websites:

Images and videos not reserving space
Web fonts kicking in late and shifting things around

Tips for optimizing CLS:

Pre-load images
Pre-load web fonts
Reserve a space for everything

Final Thoughts and Recap

Go to Google Page Speed Insights or Search Console to check your Core Web Vitals scores. The key pages to audit are the ones user may discover from organic search are key, although transactional pages matter as well, from a UX perspective. If you have an e-commerce website focus on the most important pages in your funnel. Start with the most common landing pages that could be your homepage, category page, product pages.

And if there’s one takeaway from all of these I think one thing that I remember as do a cleanup or a spring cleaning remove the plug-ins that you don’t use, or you no longer use compress the visual assets, if you can and talk to for, if you act the good thing is with page speed insights, they’ll show you exactly your scores and what you can do to.

So if you have a web developer and talk to them. If you don’t and you’re installing a plugin, figure out if it works. Do a page speed insights test before and after installing the plugin. If everything goes from green or orange, yellow, whatever the color is to red after you install a plugin, you know what to do? Like if you still have to use it, go ahead but know what the cost is.

If you’re still unsure how to get started, we can help optimize your E-commerce site for Core Web Vitals. Please send us an email at [email protected].

Don’t forget to subscribe to the No Hacks Marketing Podcast. And if you learned something new today, we would appreciate it if you can leave us a review on your favorite podcast platform.