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

Overlaying Glasses Or Masks on Avatars With Vue.js and Cloudinary

Deep learning, a subset of machine learning, breaks down tasks in ways that make all kinds of machine assists possible. With deep learning, you can identify images by machine, i.e., instead of hand-coding software with specific instructions for a task, you train the machine with large amounts of data and algorithms that enable it to learn how to perform the task.

Read more
On-Demand Viewing of Live Video Presents New Opportunities

In early 2020, Cloudinary was planning its fourth annual ImageCon conference, a two-day event in the heart of San Francisco, where we’d congregate with curious digital-media minds to brainstorm best practices for media management. Instead, the COVID-19 pandemic forced the entirety of ImageCon 2020 online. As with all other events being planned, we had to overhaul the content to be communicated on video. Gratifyingly, we found the right partner—the event platform Bizzabo—to turn that into a reality.

Read more
Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more