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

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more