How to prepare your Magento Store for the Core Web Vitals Speed Update

 

The Page Experience update is right around the corner, thankfully pushed back a little further into June and steadily rolled out into August. This gives sites a bit more wiggle room to prepare, but the question on everyone’s lips is, “are we ready for it?”.

SEOs are quite conflicted on just how important this update might be and what impact it could have on your site’s performance, but there are three things we know for sure:

  1. Page Experience will start being considered by Google to highlight in search results the pages that offer the best user experience.
  2. Page Experience consists of several signals, including what is known as the Core Web Vitals.
  3. Being ahead of your competitors is what sets you apart, not being ahead of everyone.

With that in mind, let’s get into how you can set your Magento Store apart from your competitors and offer the best experience before the next page speed update from Google comes into full effect.

What are the Core Web Vitals?

Core Web Vitals

Largest Contentful Paint

This metric affects Loading, measuring how long it takes for the main content of a page to load. Anything outside of the viewport – offscreen – isn’t counted. A good largest contentful paint score (LCP) is typically under 2.5 seconds, and an okay LCP score is between 2.5 and 4 seconds. Anything over 4 seconds is considered poor.

First Input Delay

This metric affects Interactivity and is measuring the time it takes for the page to become interactive. It measures the difference between a user interacting with your site, perhaps by clicking a link, and when the browser can respond to that interaction. An excellent first input delay (FID) is below 100ms and an okay FID is between 100ms, and 300ms. Anything over 300ms is considered poor.

Cumulative Layout Shift

This metric affects Visual Stability. It is measured by how much the elements on the page shift around until they become still while it is being loaded. This is part of the Core Web Vitals as we’re sure you’ve all visited a website; go to click on a link or perform an action only for it to move just as you’re about to click on it, as the page hasn’t finished loading. A good cumulative layout shift (CLS) score is below 0.1 seconds, and an okay CLS is between 0.1 and 0.25 seconds. Anything over 0.25 seconds is considered poor.

How can you measure your Magento store’s Core Web Vital performance?

There are several ways you can begin to monitor your core web vital performance – as well as your competitors.

GTmetrixYou can run a quick audit of a page with the free version of GTmetrix, where they’ll measure its performance and visualise how it loads. They’ll also highlight the top issues that impact the page’s performance with comprehensive documentation on improving them.

The key metrics to look at here are their “Web Vitals”, where they break down LCP, CLS and the total blocking time, which is the same as FID. Some tools refer to FID as total blocking time, which is something to be aware of.

GTMetrix Core Web Vitals

PageSpeed InsightsGoogle has also developed a tool to help you measure your Magento store’s speed performance, breaking down the data into what passes the Core Web Vitals assessment and what doesn’t.

They will also pull out “opportunities”, which estimates improvements to page load times that you could see from fixing these issues.

PageSpeed Insights

Lighthouse – You can also access this data directly from the page you want to measure by accessing Lighthouse via Chrome Dev Tools. Ensure that you are using the Chrome web browser and inspect the page, either by right-clicking and selecting “Inspect” or Ctrl+Shift+I for Windows users and Cmd+Shift+I for Mac users.

From there, navigate to Lighthouse on the top bar by clicking on the double chevrons and select the categories you want to measure for your audit. It’ll take a few seconds, but then you’ll have a comprehensive breakdown like in PageSpeed Insights with all of the recommended opportunities. The key thing to examine here is performance to find out about the Core Web Vitals.

Lighthouse

Google Search Console – A recent update to the Search Console has also seen them add both Page Experience and the Core Web Vitals to the reports, where you can see how your pages are performing on Mobile and Desktop.

The report will divide your site’s URLs into Poor, Needs Improvement and Good, explaining what the issue is and the pages it can be found on as you click through.

Google Search Console Core Web Vitals

The great thing about the Experience report in the Search Console is that you can validate the fixes here too. Whether you use Search Console to find the issues, make sure you come into the report and validate things after making improvements to the Core Web Vitals.Google will begin to monitor those pages for up to 28 days.

Bear in mind that this will also depend on usage statistics.So, if not enough people visit the page, they might not be able to verify the fix.

An example of Google Search Console showing a core web vital error.

Data Studio – You can also build bespoke templates within Data Studio using the Chrome UX Report to start monitoring your performance, as well as competitors. Start measuring LCP, CLS and FID at a domain level and holistically across your site to see how your performance changes over time and stay ahead of the competition.

We did this at PushON, allowing us to get an overview of client performance for the last year and then compare that to their competitors.

For example, take a look at this dashboard for a prominent high-end chain of hotels:

Google Data Studio dashboard for core web vitals

It’s clear that this website doesn’t pass the Core Web Vitals assessment and have significant issues with their website loading and visual stability. In contrast, their interactivity is ok – but could still be improved.

Let’s compare this to another chain of popular hotels:

We can see that their website loading is better than their competitor but still requires improvements. Their visual stability is the most prominent issue as their Cumulative Layout Shift has more poor scores than the other metrics. Their interactivity needs minimal improvement.

From both of these dashboards, we can see trends in data and determine a list of resolutions that we can apply to make the websites more user-friendly and pass the core web vitals assessments. 

The beauty of core web vitals is that improving one area also improves others. So, with the first website, they might find that working on Largest Contentful Paint could result in some benefits with their Cumulative Layout Shift.

What impacts the Core Web Vitals?

So now you know what the Core Web Vitals are and how to measure them, how can you start to improve them?

Thankfully, many of the tools listed above provide ample opportunities and suggestions that you can begin to work on, but some key things tend to crop up for every site.

Loading – Largest Contentful Paint can be improved by:

  • Better server response time.
  • Removing unused and render-blocking CSS and JS.
  • Optimising images and video to render faster
  • Client-side rendering issues.

Interactivity – First Input Delay can be improved by:

  • Minimising main-thread work by streamlining long tasks.
  • Shortening JavaScript execution time.
  • Removing render-blocking JavaScript.

Visual Stability – Cumulative Layout Shift can be improved by:

  • Reducing or removing any ads, popups and interstitials. This also includes any cookie banners or notices.
  • Ensuring images, embeds and iframes have dimensions.
  • Avoiding web fonts that cause FOIT/FOUT.
  • Reducing or managing any dynamically injected content.

Are you looking to prepare your Magento Store for the Page Experience update? Get in contact with PushON to find out how we can help.