What are Core Web Vitals, and how to improve them in a Magento store?

Google’s ultimate purpose is to provide users with flawless and valuable search results. With this approach, from time to time, they introduce guidelines and requirements for website owners. Recently, Google released a new set of such guidelines. It’s called Core Web Vitals (CWV), and it refers to the way your website works. What do you need to know about Core Web Vitals? And how can you implement CWV if you run a Magento store?

Right now, we have three such vitals – LCP, FID, and CLS. Each CWV metric classifies pages that are indexed by Google bots as “good”, “needs improvements”, or “poor”. Of course, you want all of these indicators to be good! But what are they actually? Let’s have a look at basic Core Web Vitals.

LCP – Largest Contentful Paint

The first metric revolves around the loading speed of your website. The faster it loads, the better. Google describes LCP as a metric that “reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.”

Image source: web.dev/vitals/

This definition is quite complicated, so we can simplify it a bit and say that LCP measures the loading performance of your website. Ideally, your website should load in under 2.5 seconds. Of course, this result refers to both desktop and mobile versions of your web page.

FID – First Input Delay

The second metric is all about interactivity. FID, according to Google, “measures the time from when a user first interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction.” Again, a simpler definition is this – how much time it takes your website to react to the first action taken by the user. The shorter the FID time is, the more interactive and responsive your website is.

Image source: web.dev/vitals/

One important note – FID measures the delay in processing a user’s actions, not the whole time necessary to process a specific action.

CLS – Cumulative Layout Shift

Have you ever tried to click a link on a website that wasn’t fully loaded? How many times has your link suddenly disappeared or was moved somewhere else? That’s quite a frustrating experience, isn’t it? Unexpected movement of page content is never a positive experience, and it usually happens because resources are loaded asynchronously. Hence the need for CLS – a metric that shows how visually stable your website is.

Image source: web.dev/vitals/

In the perfect world, CLS should not exceed 0.1. A result of up to 0.25 is acceptable, but then it requires further work.

How can you improve your CWV results?

The goal is simple – you should aim for green results in every Core Web Vital. The first step is to measure your current results. You can use three different tools, all of them provided by Google:

PageSpeed Insights is surely the most straightforward choice. You don’t have to sign up anywhere; all you need to do is provide the domain address and wait for the results. And speaking of results – you will get a list of things that need to be improved or changed.

Suppose you run a store using Magento, and you want to improve your results. What can you do? Unfortunately, there are no ready-made tools that will enable you to implement Google requirements automatically. You need to do that manually, recommendation after recommendation. When it comes to online stores, typical things that need to be improved comprise:

• Unused code/CSS: If there is anything on your website that’s no longer necessary or in use, remove it altogether. The more code you have, the slower your website is.
• Unoptimized product images: Online stores have thousands of image files. If they are unoptimized (too large, not a web-friendly format), they can severely weigh down your webpage.
• External code: If there is a lot of third-party code on your website, it will load and react slower. Remove all the unnecessary external code from your website.
• Too many plugins: Plugins are surely tempting simply because they make running a store so much easier. But too many plugins slow down your website. Take a look at all the plugins and extensions that you have installed in your store. Do you need all of them?
• Too many redirects: This element refers primarily to the mobile version of your website. If your redirects look like that: Yourstore.com [that’s the address the user types] -> m.yourstore.com -> m.yourstore.com/home [that’s the final address], the mobile website will never be as effective as possible. Cut unnecessary redirects.

Summary: Work on your CWV!

If you want to thrive in Google, you simply have to adjust your website to the latest Google requirements, including Core Web Vitals. If you need help with that, we are at your service. Global4Net specializes in setting and improving online stores using Magento. If you run an e-store on this platform, just reach out, and we’ll take it from there!