How to Keep Your e-Store Core Web Vitals Healthy with an Image CDN

As we now know, how users interact with your page is just as influential as what is on your pages when it comes to user satisfaction. Search engines, like Google, have wised up to this dynamic by introducing user experience as a significant component in their ranking factors.

But this created a problem for developers: How do you quantify the user-experience, so that you can take concrete steps to improve it? And, even more importantly, in a way that you know search will recognize and reward you for?

Google’s answer was to introduce user-centric performance metrics. These break down the user experience into its most fundamental and quantifiable factors. They have and are evolving but include the following:

• Mobile-friendliness: Mobile has officially become the de facto way for the majority of internet users to access the web. Google is already using mobile-first indexing, and are almost definitely going to prioritize mobile performance in the future.
• FCP, FMP, LCP, and SI: First Contentful Paint (FCP), First Meaningful Paint (FMP), and Largest Contentful Paint (LCP) are all attempts to identify and measure the speed at which the most substantial element on the page loads while Speed Index (SI) measures the overall loading time of a web page.
• Safe Browsing and HTTPS: Feeling and being safe when browsing a website is another factor that impacts user experience. While safe browsing warns users they might encounter malware, phishing, or other common online threats, HTTPS/SSL encryption has become a baseline for secure browsing.
• Intrusive ads: As well as being annoying, unsafe ads can also lead to other security threats.

Introducing: Core Web Vitals

Core web vitals were introduced in May 2020 to help developers and site owners measure their website’s experience in terms of speed, responsiveness, and visual stability. Google has already announced that CWV will form part of a new ranking signal including it and existing user-centric performance metrics in an upcoming update to Search.

The three metrics that make up the core web vitals are:

• LCP (Largest Contentful Paint)
• Interactivity
• Visual Stability

These were chosen for being the most accurate at predicting the user experience as well as being testable and reproducible. In Google’s own words, “they measure dimensions of web usability such as load time, interactivity, and the stability of content as it loads.”

Largest Contentful Paint

Largest contentful paint is pretty self-explanatory. It’s the largest piece of content (image, text, video, etc.) that loads in the visible part of the web page. For example, in the image below, you can see it change from search bar text, to the heading

This is an important metric because the largest piece of content the user sees will contribute most to the page’s aesthetics as well as give the user the most information. It will also greatly impact how the user perceives the page loading speed. Nowadays, fullscreen hero or header images are very much in fashion, meaning the LCP is more often than not an image.

The current thresholds for LCP loading times are:

• Good: < 2.5 seconds
• Needs improvement:  > 2.5 and < 4 seconds
• Poor: > 4 seconds

Interactivity

Interactivity is determined by the First Input Delay (FID) metric. This measures the time it takes from when a user first interacts with an element on the page until the browser is able to respond. For example, clicking a button, using a slider, or any other control.

Usually when a page is unresponsive during the first moments of loading, it’s because the main thread is busy. This can be frustrating to users when an interactive element is loaded but doesn’t work. While this is mostly caused by executing code, such as JavaScript, it can also be further delayed by loading files, such as onload JavaScript, CSS, or images.

Obviously, FID correlates with two other metrics: FCP, or the first element that loads, and TTI (Time to Interactive). Currently, the thresholds for FID are:

• Good: < 100ms
• Needs Improvement: > 100 ms and < 300 ms
• Poor: > 300 ms

Visual Stability

Visual stability is also measured by another metric, namely Cumulative Layout Shift (CLS). You know that moment when you want to click a button only for the layout to shift under your fingers, causing you to do something completely unexpected like clicking a link that takes you off page? CLS basically tries to determine the likelihood of that occurring. 

Using the Layout Instability API, CLS comes up with a score between 0.1 and 1. The closer to 1, the more the elements on the page change position as new content gets loaded in. The concept is neatly illustrated by this graphic:

This is even more critical for an online store, especially on mobile. We all know a high conversion rate relies on making the user journey as smooth as possible. Accidentally abandoning cart, selecting the wrong option, or otherwise interrupting the checkout process can lead to a missed opportunity.

In this case, you would get a CLS score based on the number of pixels the green section moved downwards in relation to the size of the visible area. Google has also determined thresholds for CLS:

• Good: < 0.1
• Needs Improvement: > 0.1 and < 0.25
• Poor: > 0.25
  

How can an Image CDN like ImageEngine Improve Core Web Vitals?

ImageEngine is an intelligent, device-aware image CDN that optimizes image content based on the capabilities of the end user’s device. By taking into account every factor, like the OS, browser, screen size, pixel ratio, etc. it can generate the optimal version of an image to serve to each individual user.

The main way in which ImageEngine improves general performance is by cutting raw image weight by as much as 80%. ImageEngine’s infrastructure consists of 20 global PoPs (each with intelligent device detection built-in) which results in a 98%+ cache hit rate as well as reducing routing time. 

Specifically, ImageEngine can positively impact the core web vitals in the following ways:

• LCP: By reducing image payload and optimizing image content in other ways, it will load faster. Period.
• Interactivity: Although the chief culprit of FID is loading/executing JS or CSS, slow image loading can delay these loading and execution times even further.
• Visual Stability: By creating multiple image versions with the correct dimensions, the browser will reserve the right amount of screen real estate while the content loads. Visual instability is also more frustrating the longer contact takes to load.

How to Use ImageEngine with a WordPress + WooCommerce Website

Signing up to ImageEngine was easy enough to begin with. However, with the newly released Image CDN WordPress plugin, it’s even more intuitive for WordPress users:

1. Go to imageengine.io and signup for a 60-day free trial. The process is pretty straightforward, and you can find step-by-step instructions here.
2. As part of the signup, you’ll get an image serving domain with the format xxxyyyzzz.cdn.imgeng.in. Copy it and save it for later.
3. Go to your WordPress website and install and activate the ‘Image CDN’ plugin by ImageEngine.
4. Configure the plugin by adding your image serving domain, checking the “Enable CDN” checkbox, and saving the changes.

And, that’s it! ImageEngine will do the rest and after a short wait, your optimized images should be loading on your online store’s pages.

Testing Core Web Vitals with ImageEngine

There is no shortage of official developer tools already in place to help you optimize your website pages. Six of these now support measuring CWVs:

Using PageSpeed Insights, I’ve done a quick test on the kind of performance increase you can expect using ImageEngine. Here are the results of running PageSpeed Insights on an unoptimized WooCommerce catalog page:

As you can see, even a relatively simple e-commerce page scores quite disappointingly. The LCP is 5.3s which is decisively in the “Poor” range. While the FID is explicitly mentioned, it’s safe to say that a 7.4s TTI and 3.5s FCP is not ideal. In this case, it would take a full 3.9s since the first content appears on the page before full interactivity is possible.

In this case, the CLS is flawless with a score of 0. However, this is mostly because a catalog page usually has a simple layout that can load in a linearly.

Now, here are the results with the Image CDN plugin and ImageEngine optimizing our image content:

As you can see, our LCP is down significantly. If we had a large header or hero image on this page, the difference would’ve been even more significant. Both the FCP and the TTI are also down but, more importantly in terms of FID, the gap between them has shrunk from 3.9s to only 0.6s. CLS is still 0.

It’s also worth noting that while the CWVs are undoubtedly Google’s primary focus, our performance metrics improved across the board. These are undoubtedly still being tracked by Google in some form or another and will definitely lead to an improved user experience.

Conclusion

With Core Web Vitals, one gets the sense that Google is narrowing down on establishing meaningful metrics for developers to chase when optimizing their website pages. Instead of complicating the issue further, CWVs distill the user-experience into measurable, testable, and reachable goals.

An intelligent image CDN like ImageEngine will lead to direct improvements in how you score for these metrics that you can test. And, it will help you stay on top of future developments that may jeopardize your standing.

Disclosure: I work hard every day to make the web faster and images on the web leaner and more relevant as a part of the innovative ImageEngine team.