Back

Core Web Vitals Update: Optimise Your Media!

28.06.2021

In a world where everything is instant, seemingly minor inconveniences have a huge impact on User Experience.

Imagery is the most important sales tool in eCommerce and delays of seconds and even milliseconds in image loading speeds can cause customers to drop off. Google is keenly aware that people want as little friction as possible, which is why they are introducing Core Web Vitals as search ranking factors in the next algorithm update.

Not preparing for this could have serious implications for your SEO. Here, we will explain what the Google Core Web Vitals update is and why image optimisation is key to preparing your eCommerce business for it.

What is the Google Core Web Vital update?

The update will combine three CWV’s with four pre-existing search signals (mobile-friendliness, https security, safe browsing and intrusive interstitials) to give rankings to a page based on its overall UX. Part of the update will involve the introduction of visual labels to search results that tell users if a page has met Google’s page experience criteria. 

Simply put, if your eCommerce site is not optimised accordingly, this means that Google will tell potential customers that you offer a lower standard of UX when you appear in searches.

What are Google Core Web Vitals?

The pre-existing search ranking signals mostly looked at page security and accessibility while CWV’s are more closely linked to the quality of the content on those pages.

CWVs measure a page’s overall quality of experience by looking at its loading speeds, visual stability and response times. Their scores are largely dictated by how well a page’s media content is optimised and reinforce the importance of image SEO.

The three CWVs:

  • Largest Content Paint – This is the amount of time it takes to load a pages largest element. For eCommerce businesses, this could be a product image or video. Google gives an LCP score in seconds, with anything under 2.5 seconds being a positive score.
  • First Input Delay – This is the time it takes for your page to respond to a user’s first actions after it appears fully loaded. This is measured in fractions of a second, with 100 milliseconds being a good score.
  • Cumulative Layout Shift – This is how stable your pages are visually. Simply put, it’s how much your images move around the page while it loads. CLS is disorientating for users and contributes to a poor experience. CLS is measured by score, 0.1 being the target for a decent CLS and 2.5 representing a poor one.

Checking your Core Web Vitals

It’s very easy to check your sites current CWVs and it’s a good idea to do so before you begin trying to optimise.

PageSpeed Insights, Chrome DevTools and Lighthouse are all great tools for analysing each of the CWVs and gauging where your eCommerce site could improve. These tools also allow you to identify your page’s LCP and will tell you what elements are affecting your CLS and FID.

Don’t worry if you find that your site’s CWVs don’t meet Google’s recommendations – only 15% of sites would have met the requirements when the update was announced and there are plenty of simple things you can do to improve that score.

Image optimisation for Core Web Vitals:

Using Aspect Ratio to reserve space on the page

Assigning an aspect ratio to your <img> elements allows your browser to calculate and reserve the space required for all your images before it starts to download them.

Previously, developers allocated image space in CSS using the ‘padding-top hack’. Whilst this does work, it is prone to causing delays as the browser only finds out what space is needed after it has started downloading. These delays are what leads to CLS as the browser is forced to push content around the page to make room for the image while everything else finishes loading.

Setting an aspect ratio greatly reduces this risk, making it a great way to optimise your images and improve CLS and LCP scores.

Aspect ratio measures an image’s width relevant to its height. For example, 16:9 (width=16, height=9). Setting an aspect ratio means that an image’s size can be determined by only one of these elements. For example, if we have an image with a width of 640px, the browser can determine its height based on the pre-set aspect ratio. This saves time as the browser no longer has to measure both attributes and alter the image to fit inside.

All Chromium, Firefox and Safari browsers now have an inbuilt aspect ratio CSS property, so if you’re providing height and width attributes, your images should be more stable. Aspect ratio also works for responsive images, all you have to do is list their different dimensions in the <srcset> and the aspect ratio will apply.

Compress images

This may sound obvious but images and videos are often the largest element on a page and an eCommerce business could have thousands of them. Optimizing your images through compression is a great way to reduce the weight of your pages and improve loading speeds.

A few years ago, Google introduced WebP as a new universal format for online images. The format trims off between 26% – 34% of an image’s file size depending on its original format, making them faster to load whilst not impacting the quality. Modern image formats were designed with loading speeds in mind so it’s a good idea to use them where you can.

On top of this, consider storing your images in a Content Delivery Network. By doing so, your media will be stored on different servers around the world. When a user accesses your content, their browsers will be able to pull it from the server that is closest to them, thus reducing loading speeds and improving your LCP and FID scores – This is especially useful if your eCommerce business trades globally. 

Pre-loading media

Pre-loading or lazy loading can seriously improve your CWV scores, especially if your pages contain multiple images and videos.

Pre-loading tells your browser which files to fetch from the server first. Doing this allows your browser to prioritise the largest elements and reduces the time it takes for your pages to become responsive.

By incorporating a preload attribute into your HTML header, you tell your browser to cache certain resources so that they are immediately accessible when needed on the page. This offers a much smoother experience for the user and avoids frustrating waits for LCP and CLS.

Alternatively, Lazy Loading is the method by which only images that are immediately visible are downloaded and any others are downloaded as needed. This spreads out the workload and prioritises only what the user needs to see, leading to a more responsive and stable page.

Build your search ranking

This type of image optimisation is not new but it’s a good idea to start paying more attention to these aspects of SEO as their importance is only going to grow. Getting used to reviewing and updating these search ranking signals regularly is the best way to ensure that your eCommerce site is in the strongest position it can be when future Google updates inevitably build on what this one has started.

Share It! Tweet it! Publish It!