Skip to content
The digital landscape is constantly evolving. Something that all e-merchants should now be aware of is the new core web vitals Google has introduced for ranking factors, which go into effect in May 2021.
In response to Chrome User Experience Report’s findings, Google will now use Loading, Interactivity, and Visual Strength as ranking factors. The report unearthed the importance of great experiences on websites for users. With these new core web vitals, Google can assess how effective web pages are at providing top-tier experiences.
Google has long used other page experience signals like mobile-friendliness, safe browsing, and intrusive interstitial guidelines to determine ranking. The addition of these new signals does however suggest a steady shift towards user experience and user perception on SERPs. We say steady because Google will continue to prioritize pages with the best overall information.
How do the New Core Web Vitals Work?
So what are these new core web vitals, and what exactly do they measure? Let’s take a look.
Loading
Here, Google is concerned with the website’s speed, specifically, how long it takes for web pages to load all of their main content - its Largest Contentful Paint (LCP).
As 40% of digital consumers will abandon a site which takes longer than 3 seconds to load, Google has upped the ante, determining that a good website should load its LCP in less than 2.5 seconds.
(Source: Web.Dev)
Interactivity
Does your web store include interactive elements like contact forms or email subscriptions? The answer is most likely yes, so this new web vital is one to take note of.
The responsiveness of your site is measured using First Input Delay (FID). When a user clicks to submit a form or sign up to newsletters, are they watching a loading wheel spin, or is the request processed in a flash? Google reckons it should, of course, be the latter, with good websites taking less than 100 milliseconds.
(Source: Web.Dev)
Visual Strength
No one likes a jumpy website. What’s more irritating than attempting to click on a link for it to suddenly shift, taking you to an entirely different page? You absolutely do not want the pages in your store to do this, as the inevitable frustration will deter visitors from using your site.
Google now uses Cumulative Layout Shift (CLS) to measure the stability of your website. It detects the movement of elements on your web pages after the browser has rendered them Should your CLS veer over 0.1, you’ll find yourself in the danger zone.
(Source: Web.Dev)
What does this mean for e-merchants?
These new core web vitals mean that e-merchants need to invest more time in their website’s functionality.
Gone are the days where a visually stunning website packed full of relevant information was enough to have you climbing the Google search rankings, particularly as certain visual elements will impact your scores on these core web vitals. Google isn’t just concerned with what is on your website, it’s now also how your website actually performs.
To ensure that you aren’t taken aback by a sudden drop in search rankings, we’ve compiled practical ways for you to adapt to these new changes.
Optimize Page Speed
Now that Google wants your web pages to load at lightning-fast speeds, the obvious solution is to take the necessary steps to decrease loading times.
First, you’ll want to find out if your web pages are meeting this new standard. Google PageSpeed Insight is an incredibly handy tool in measuring how long it takes for the pages in your Shopify store, as it analyzes LCP.
(Source: Web.Dev)
For extra insight, you can also use Shopify’s online speed report to see how your store stacks up to other similar stores.
The report measures the performance of your top three pages to give you a score out of 100 on a variety of performance metrics, including Google’s new core web vitals.
(Shopify Blog)
Should you find that your pages fall short of Google’s ideal loading speed, there are a number of steps you can take to optimize your pages for speed.
- Optimize images and videos: To ensure that the visual content on your pages isn’t compromising the loading time, you should aim to use smaller file formats for images that do not greatly affect quality. JPEG is the best format for achieving this. Videos can also be embedded onto pages to free up server space.
- Lazy loading: for any content that isn’t pertinent to the customer experience, you can use lazy loading. This process only loads content once it is visible or clicked on by the user. A popular iteration of lazy loading is infinity scroll, where content is loaded as the user scrolls down the page.
- Minification: this speeds up your site as it reduces the code and mark-up on web pages and script files. Minification removes redundant data such as unused code, clears code comments and formatting, and uses shorter variable and function names. Apps such as File Optimizer and HyperSpeed can do this for you automatically.
Take an in-depth look into Shopify page speed.
Optimize for FID
Now that your web pages are fully optimized for speed, it’s time to take a look at interactivity. Google PageSpeed Insight is your source again when it comes to measuring FID.
This online retailer is exceptional at optimizing its FID with a super-fast 19ms. We can also see here that Google analyzes the percentage of pages that fall into each threshold; Good (green),
E-merchants will be thrilled to hear that if your pages have been optimized for speed, they will be optimized for interactivity. This is because a speedy page leaves more room for interactive elements to load efficiently. Hence, the risk of a user clicking on an interactive element whilst a page is loading is minimized, and there is a reduction in overall delay should the browser be busy loading when an interactive element is clicked on.
Optimize Visual Strength
Let’s move on to visual strength. There are a number of tools at hand for you to test the CLS of your web pages including, Google PageSpeed Insight and WebPage Test.
The main culprit of a poor CLS score is insufficient space allocated for the content on your web pages. Here is what you can do to improve the visual strength of your web pages.
- Include size attributes on images and videos. This ensures that the browser can allocate the right amount of space for these elements whilst it is loading. If the required space is allocated, your users won’t experience a sudden shift in content once the page has loaded completely.
- Reduce ad shift. Advertisements can be the biggest cause of layout shift on web pages. This is because ad sizes are often dynamic, meaning it can resize itself. Hence, layout shift can happen the moment the ad goes through the resizing process.
- Allocate sufficient space for embeds. Platforms that offer embeds don’t always reserve enough space for their videos. If the reserved space is smaller than what is needed, you will have layout shift once the video has loaded. It is therefore wise for you to manually allocate space. Inspect and take note of the final height of your loaded embedded video using your browser’s developer tools. Use these dimensions to set a placeholder for the video.
- Preload custom fonts. Custom fonts can cause layout shift as while the font is rendering, the browser may substitute your font for invisible text or a fallback font which may differ in size to your custom font. You can avoid it by preloading your fonts. A step-by-step guide can be found here.
Final Thoughts
The user experience has long been a vital consideration when building and updating a website. The new core web vitals introduced by Google, however, means that e-merchants now must take a closer look at specific UX elements. These particular factors have been deemed important by digital consumers. So by taking the necessary steps we’ve laid out, not only will you improve your ranking on Google search, you’ll also have hoards of satisfied customers.
