Skip to main content

Get to grips with Google Core Web Vitals to boost your visibility and UX

a zoomed in image of an address bar on a web browser
(Image credit: Atm2003 / Shutterstock)

Today, in the vast and sprawling realm originally conceived as the World Wide Web, there are more than 1.5 billion sites. Though most are about as lively as Bouvet Island (aka “the loneliest place on earth”), roughly 200 million of these are active sites. That’s why life without search engines is unimaginable. 

Believe it or not, search engines weren’t around in those first, early days of the Web starting in 1990. Back then, Tim Berners-Lee kept a list of sites on the CERN webserver, which he updated manually. It only took a few years before indexing the web manually was no longer practical. The first search engines appeared (Lycos, Magellan, Aliweb - anyone?) to automate this task. Around the millennium, Google exploded in popularity, leaving others in the dust. Today it’s the world's most used search engine, with more than 90 percent market share.

Alongside the growth in search engines came SEO: the practice of optimizing websites to make it easier for the search engines to find them. For many years SEO was an arcane, technical skill that companies paid experts - not always of the principled variety- to stay on top of. Fortunately those early days - which were all about ‘gaming’ the Google search algorithm - are over. And to be fair, Google has been moving away from this for several years now. However, with the recent introduction of Core Web Vitals, Google has quite rightly put the user experience of web pages at the heart of its new ranking. 

The Core Web Vitals are three metrics based on exhaustive research into what contributes to the optimal web user experience. Starting in June 2021, those metrics, which assess a website’s load time, interactivity, and visual stability, will influence websites’ search rankings on Google.

The three Core Web Vitals explained 

Let’s take a closer look at each of the Core Web Vitals. As with everything Google, the language can alienate non-techies, but the concepts are actually pretty simple. 

The first, Largest Contentful Paint (LCP), refers to how long the largest above-the-fold element on a site takes to appear. Usually, that element is the most important thing, visually, on the page, such as a  “hero image”. Google recommends keeping the LCP under 2.5 seconds.  According to HTTP Archive, 47 percent of desktop websites and 57 percent of mobile apps must improve their LCP, which means that half of all existing websites have an LCP metric of more than 2.5 seconds. There’s a 50/50 chance your website is one of them. 

The second Core Web Vital is called First Input Delay (FID). It measures the time it takes for your site to respond to user interaction, like clicking on a link or button. Google recommends that this takes less than 100 ms. 

Finally, the last Core Web Vital is the Cumulative Layout Shift (CLS). We’ve all come across this scenario: the page partially loads; you begin reading the content; and the page suddenly shifts, moving the portion you’ve been looking at out of view. CLS gauges how long it takes for a page’s elements to stop jumping around.

The dilemma: site beauty or efficiency? 

Stunning images and videos are proven online engagement boosters. The more images and videos an e-commerce website has, the more revenue it’s likely to generate through increased sales and conversions. 

However, as the largest, most resource-hungry web objects, images and videos have to be optimized in order to score well on Google’s Core Web Vitals. A report from HTTP Archive has shown that “unoptimized images are often the greatest contributor to page bloat”. According to its 2019 Web Almanac, media (images and video) account for two-thirds of the median homepage’s bytes.

Indeed, web visitors - much as they value beautiful aesthetics - will abandon your site if your images and videos slow your site down. Studies indicate that as many as 40 percent of visitors would abandon a site if a page takes more than three seconds to load. 

Fortunately, there’s a way to solve this dilemma and score high with your site visitors and Core Web Vitals at the same time.

The solution: optimization, automation & co 

As stated in the HTTP Archive, it is the unoptimized images that make the site heavy and slow. Optimizing images and videos is the low-hanging fruit to improve your LCP score and overall website performance.

Here are some things you can do to optimize images and videos:

  • Compress images while maintaining high visual fidelity.
  • Convert images and videos into newer, more lightweight formats and codecs, such as AVIF, JPEG 2000, WebP, AV1 or HEVC.
  • Generate responsive images whenever feasible.
  • Deliver media through multiple content delivery networks (CDNs) and caching media variants at the edge.

Doing those things manually would be tedious, not to mention time and resource-intensive. But just as no one is indexing websites manually anymore, there are tools that have automated the optimization of image and videos at scale.  

Take for example image compression: Many developers don’t want to compress images too aggressively for fear of degrading the visual quality. They tend to err on the side of caution, assigning higher quality values than are really needed. But adjusting the quality compression level doesn’t always lead to a loss of visual quality. 

AI-based tools can automatically determine the optimal file size and visual quality for an image or video, on-the-fly. They can also automatically convert image formats or video codecs into newer more lightweight formats. The most up-to-date tools also offer ways to automate image and video delivery in the best formats to your users based on their device specifications.

If Google’s prioritizing user experience, so should you 

Using lots of images and videos on your site and delivering great web performance at the same time no longer needs to pose a dilemma. To streamline your image and video-management workflow and raise your Core Web Vitals scores, do check out new automation tools that optimize both the quality and file size of media assets. 

The bottom line is this: If Google’s prioritizing user experience, so should you. Doing so will ensure people will find, visit, enjoy, and buy from your site. That will make it stand out in the modern web more like Bangkok, Boston or Berlin than Bouvet Island.

Eric Portis, Developer Evangelist, Cloudinary (opens in new tab)

Developer Evangelist

Eric is a Developer Evangelist at Cloudinary, where he works to build a better toolset for managing images on the web.