Cloudinary Blog

How to Prepare for Core Web Vitals by Optimizing Rich Media

Optimize Media to Get Ready for Google’s Core Web Vitals

For years, Google has been updating its search algorithm to prioritize end-user experience, displaying the most relevant and helpful content at the top of search results. The latest—and maybe the most significant—update so far is Core Web Vitals (CWVs), which are new metrics announced a year ago that will, starting in June, begin determining search rankings. With this update, Google is being abundantly clear that visual experience of webpages is paramount.

Adhering to CWVs will have a direct effect on whether you can retain visitors on your site and—in the case of B2B enterprises, retailers, and direct-to-consumer brands—convert visitors to buyers. Need convincing? Consider these statistics:

What Are Core Web Vitals?

CWVs are a set of three metrics that Google believes directly reflect a webpage’s user experience, as follows:

  • Largest Contentful Paint (LCP), which measures the time it takes to load a page’s main content—usually a large visual element, such as a hero image. Ideally, that element should load in less than 2.5 seconds.

    Given that in 2011, Kissmetrics found that 47% of consumers expected a site to load in two seconds or less, it makes perfect sense that now, ten years later, consumers demand even faster performance.

  • First Input Delay (FID), which measures the amount of time it takes a webpage to become interactive, such as when a visitor engages with a video, fills out a form, or clicks through a menu. Ideally, FID should be less than 100 milliseconds.

    A short FID depicts a positive user experience because we expect that, when a page appears to be “loaded,” it responds to interactions.

  • Cumulative Layout Shift (CLS), which assesses any unexpected shift of visual content that occurs during page load and assigns a corresponding score. The lower a webpage’s score, the more stable the layout. Ideally, CLS should be below 0.1.

    Mobile users are familiar with the disorientation that occurs when a page moves unexpectedly, which greatly sours the experience. By measuring unexpected visual shifts, CLS gauges the likelihood of users bouncing.

Core Web Vitals Scores Will Affect Customer Acquisition

Even though it does not override great content, an ideal page experience gives you a competitive advantage. If your website falls into the “Needs Improvement” or “Poor windows” of measurement, the effectiveness of your on-page SEO efforts will dwindle. Not to mention that you’re already starting from behind, investing more in paid search initiatives your site is actively working against, which ultimately increases your overall cost per acquisition.

For all that visual media is an excellent storytelling tool, it delivers the intended result only if it does not negatively impact user experience. HTTP Archive found an 85% rise in online page weight over the last few years; for websites in the 90th percentile, three-fourths of the page weight is composed of photos, graphics, and video.

Therefore, optimizing visual media is an assured and proactive way to shorten page-load time and, correspondingly, reduce the LCP score. After all, 47% of websites have an LCP score of more than 2.5 seconds, which means that nearly half of all websites must lower their LCP score. Is your site one of them?

Optimizing LCP Creates a Positive User Experience

Don’t panic—especially now that Google has delayed the launch of CWVs from May to mid-June. You can enhance both user experience and LCP with three simple practices:

  • Optimize your image and video assets: Foster page loads by optimizing your image assets. Compress images so that they take up less bandwidth but still display in high quality. Also, convert them to newer formats, such as AVIF, JPEG XL, JPEG 2000, and WebP.
  • Automate your image workflow: By automating your image workflow, you ensure that the correct file size is applied, preserving visual fidelity. Plus, automation frees up your team to focus on creative processes instead of manual, labor intensive chores like manually creating asset variants, cropping, reformatting, and resizing files.
  • Use a Content Delivery Network (CDN) and cache images: Google recommends delivering media through a Content Delivery Network (CDN) or even multi-CDNs to enhance site reliability and scalability. In addition, be sure to cache page elements instead of loading them from the original source. Those two steps will significantly improve your LCP score.

Enhancing Sites for CWVs Leads to Long-Term Success

Ultimately, mastering CWVs is absolutely within your grasp. By taking the steps described above, you’re bound to improve your site’s user experience and SEO ranking.

An ideal tool to leverage is Cloudinary’s Media Optimizer, which optimize both the quality and file size of media for delivery in the right format through multi-CDNs. For details, see the tool’s announcement and the post Confronting the Urgent Problem of Web Performance.

To learn more about CWVs’ effect on SEO ranking and traffic, check out the 15-minute Episode 4 of our MX Matters podcast, in which Cloudinary’s product marketing manager Satarupa Chatterjee interviews developer-experience engineer Tamas Piros for his insight and suggestions.

Note
The podcast refers to a May 2021 deadline for CWVs. However, Google announced on April 20 that the rollout will now take place in mid-June instead.

Recent Blog Posts

Partner news: Cloudinary-Getty Images Integration

Supported by intelligent automation, Cloudinary serves as an effective conduit between media asset management and delivery so you can take maximum advantage of assets, compress workflows, and build and coordinate engaging and inspiring customer experiences. Through Cloudinary’s Digital Asset Management (DAM) solution, which employs the company’s innovative image and video APIs, creative and marketing teams can benefit from them, as well as from many AI-powered and automated capabilities. As a result, you can transform, optimize, and deliver media at scale on an intuitive UI.

Read more
Why Audio in Video Matters

Many content creators and consumers tend to regard video as visuals, but that’s only part of the experience. Immersive video content includes strong audio. Just like in a movie, the audio for video content comprises many components: the narrator or subjects, the background music that sets the mood and draws viewers in, sound effects, and so forth.

Read more

For Developers: the HTML <picture> Element Explained

By Amarachi Amaechi
For Developers: the HTML <picture> Element Explained

We all know the good ol', tireless <img> element, which has been a long-time go-to for inserting graphics into webpages. Time doesn’t stop, however, and neither do technological advancements. So, let’s get you up to speed with the element’s modern alternative: the <picture> element.

Read more