How to Prepare for Core Web Vitals by Optimizing Rich Media

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:

• For e-commerce sites that met all three metrics of CWVs, consumers were 24% less likely to abandon the page.
• If the page-load time increases from one second to three seconds, the likelihood of a user bouncing rises by 32%.

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.

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?

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.

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.