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

Auto-Tag Videos With Cloudinary: A Tutorial

Video is one of the best ways for capturing audience attention. Product demonstrations, property tours, tutorials, and keynotes all make great content—provided that they’re readily searchable by your team and visitors alike. Even though tagging and categorization help organize videos and make them easy to find, the labeling process is labor intensive, taking time away from key tasks like creating new videos.

Read more
Video Uploads With Cloudinary

Setting up the infrastructure for video uploads can go from straightforward to complex real fast. Why? Because many challenges are involved in building a foolproof service for an efficient and smooth process.

Read more
Compressing, Resizing, and Optimizing Videos in Laravel

Videos are large media files—in most cases, at least four times larger than images—and are often created for ads, marketing campaigns, and instructional content to convey as much information as possible in a short time. Ensuring that videos do not buffer all the time and that the user’s data is protected from rapid consumption due to heavy page weight must be the modus operandi for all website builders and e-business owners.

Read more
Five Ways to Effectively Manage Online Media

The digital economy is driven by highly visual experiences. After all, viewers process images 60,000 times faster than text. Therefore, it’s no surprise that top-notch visual media has been an essential component of a captivating e-commerce experience for years. Nor is it surprising that visual media’s importance only rose during the COVID-19 pandemic, a reality for all retailers, including our client Levi’s.

Read more
Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more