Cloudinary Blog

React Summit Recap: Web Performance, Media Optimization, and Core Web Vitals

WebPerf, Media Optimization, and Core Web Vitals

Optimized media assets have always been essential to website performance. To help developers measure, understand and improve website performance, Google created Core Web Vitals, a subset of Web Vitals that focuses on three aspects of the user experience: loading, interactivity, and visual stability. In June 2021, Google plans to make page experience a ranking factor—so Core Web Vitals and media asset optimization will become even more important.

Cloudinary had the chance to share tips and tricks for automating and improving media optimization at React Summit 2021, held remotely on April 14-16. Thousands of front-end and full-stack engineers from around the world joined the virtual event, which included three days of conferences, workshops, networking events, and challenges.

Cloudinary took part in two React Summit sessions:

  • A panel discussion on web performance and Core Web Vitals hosted by Tamas Piros, Developer Experience Engineer, Cloudinary, with participants Eric Portis, Developer Evangelist, Cloudinary; Cassidy Williams, Principal Developer Experience Engineer, Netlify; and Houssein Djirdeh, Developer Advocate, Google
  • A developer workshop called Faster Media = Faster Websites taught by Marissa Masangcay, Technical Marketing Specialist, Cloudinary; Pramod Shenoy, Solution Architect, Cloudinary; and Akshay Ranganath, Sr. Solution Architect, Cloudinary

Let’s take a look at what we covered at the event and consider what developers, retailers, publishers, and really any organization with a digital presence needs to know about Core Web Vitals and media optimization.

Why Web Performance Matters

Improving site performance increases time on site and decreases site abandonment. In fact, Google studies found that when website pages meet Core Web Vital thresholds, visitors are 24% less likely to abandon page loads. In June 2021, Core Web Vitals will become Google search ranking factors, so the user experience and page performance will also play a bigger role in website search ranking.

Optimizing page performance is about more than driving conversions or improving SEO. It comes down to accessibility. In the React Summit panel hosted by Cloudinary, Houssein Djirdeh, Developer Advocate at Google reminded participants that, "Automation is key, automating everything you can is going to be the best way to improve performance" as device and connection capabilities around the world vary. By ensuring your site meets a certain performance bar, you are ensuring as many people as possible can access your site content.

Understanding Core Web Vitals

In the workshop, Marissa Masangcay, Technical Marketing Specialist at Cloudinary gave a great overview of Core Web Vitals. View the recording here.

The Core Web Vitals are:

Core Web Vitals

  • LCP measures when the largest content element in the viewport, e.g., the hero image, becomes visible. Google advises that LCP should occur within 2.5 seconds of when a page first starts loading. Common causes of poor LCP are slow server response times, render-blocking JavaScript and CSS, slow resource times and client-side rendering.

  • FID measures the time from when a user first interacts with a page to the time when the browser is actually able to respond to that interaction. Website pages should have a FID of 100 milliseconds or less. Common causes of poor FID are heavy Javascript execution.

  • CLS measures the instability of content by summing shift scores across layout shifts that don’t occur within 500 milliseconds of user input. Common causes of poor CLS are images without dimensions; ads, embeds, and iframes without dimensions; dynamically injected content; and actions waiting for a network response before updating DOM. Core Web Vitals will evolve over time, but Google says they will always be user-centric, measurable elements that developers can use to improve the user experience. You can find Web Vital changes on these public Changelogs.

Optimizing Media to Improve Core Web Vitals and Web Performance

In the React Summit Web Performance and Core Web Vitals panel, panelists shared tips for improving web performance. For example, Eric Portis, Developer Evangelist at Cloudinary advised that the best way to optimize a site is to not load something in the first place. Likewise, Cassidy Williams, Principal Developer Experience Engineer at Netlify, suggested getting rid of code you are not using to improve performance.

The panelists discussed the benefits of Lighthouse, an open-source, automated ChromeDev tool for improving the quality of web pages. Lighthouse audits for performance, accessibility, progressive web apps, SEO and more. Because it's open source, developers can create and add their own tests. In the workshop, the Cloudinary team also recommended WebPageTest, a web performance tool that uses real browsers to access web pages and collect timing metrics, to test users’ real experience across locations, devices and browser versions.

For retailers, most performance optimization is focused on the home page, listing page, and product detail page. Optimizing media assets is an important part of improving performance and Core Web Vitals, as images and video account for two-thirds of total website bytes, Portis noted in the panel. In both the panel and the workshop, our speakers shared a number of tips for media optimization, including:

  • To optimize assets, you must consider format, quality, and image size. For developers managing a large volume of media assets, manually making these choices at scale is time-consuming and challenging. Cloudinary automates this process to create faster website experiences.
  • Developers can save time and improve the user experience by using Cloudinary’s AI-based tool for smart cropping. The AI automatically recognizes the focal point of the image so you don’t need to manually verify it.
  • Using a Content Delivery Network (CDN)—a network of servers linked together with the goal of delivering content as quickly, cheaply, reliably and securely as possible—improves website load times, reduces bandwidth costs, increases content availability and redundancy, and improves website security. Developers can derive even more advantages by using a Multi-CDN approach in which they leverage a combination of CDNs from different providers to deliver content even faster and decrease the chance of downtime. Check out the Cloudinary Multi-CDN delivery demo to understand what a big difference it can make.

Besides the techniques described above, we also discussed other optimization approaches offered by Cloudinary, e.g, Media Optimizer, the Product Gallery widget, and the upload widget.

Frankly, all the page optimization tips in the world won’t help if organizational barriers will prevent you from applying them. Perhaps the most important advice is to make your team understand why media optimization is so important and commit to making media performance tracking part of your process. In the workshop, we also used Lighthouse to demonstrate the effect of different media optimization techniques on page performance and Core Web Vitals. And, as always, reach out to us anytime if you’d like support with media optimization.

Recent Blog Posts

Automate the Staging Process of Videos for Social Media

Rich and engaging media helps build customer engagement and trust but can be time consuming to stage. Developers save a tremendous amount of time by preparing videos for social media with Cloudinary. That’s because Cloudinary’s interface, widgets, and application programming interface (API) transform raw media into polished content, optimizing footage and enabling effortless customization and publishing.

Read more

Top Five Web-Video Formats of 2021

By William Imoh
The Five Most Popular Web-Video Formats and Streaming Protocols

Over the past 15 years, the video industry has undergone a significant change in video formats on the web. In particular, in the early 2010s, the 3GP format, which the 3rd Generation Partnership Project (3GPP) created for 3G-enabled mobile devices, went nearly extinct. The advancement of mobile devices and cellular networks has brought about the need for pioneers to build better formats for a faster user experience.

Read more
Cloudinary Introduces Integration With SAP Commerce Cloud

We’re excited to announce Cloudinary’s integration with SAP Commerce Cloud, through which the latter’s customers can significantly boost the visual media experience on their website or app.

SAP Commerce Cloud powers some of the largest e-commerce sites (B2C, B2B, and B2B2C businesses), complete with building blocks like storefront design and order management. Reinforced with Cloudinary’s laser-sharp focus on optimizing, managing, and delivering images and videos, the new extension will enable SAP Commerce Cloud customers to create unique and engaging visual experiences effortlessly.

Read more
Personalizing Video Email for Marketing Campaigns With Cloudinary

As critical as it is to engage with shoppers in order to succeed in e-commerce, old-style, boring emails are far from being effective. In fact, they tend to be annoying because no one likes to read formulaic, generic messages that are sent en masse. For better results, rethink your email marketing campaigns and try out creative strategies.

Read more
Muted Videos and Subtitles

The bane of our existence is the lack of efficient ways for tackling the plethora of recurring tasks in our lives. One of those tasks is surfing the internet. We consume a lot of web content daily, of which a large percentage are images and videos. We’re constantly quickly scrolling through 30-second videos or checking out pictures of cute items we’d like to buy in our free time.

Read more

Building a Roommate-Matching App With Cloudinary and Jamstack

By Marcelo Ricardo de Oliveira
Building a Roommate-Matching App With Cloudinary and Jamstack

Roommate matching can be a pain—especially during the COVID pandemic when people don't want to meet in person. Matching apps like Flatmates, Roomster, and are helpful, and if you're in the roommate-matching space, you know that great video is essential for those seeking roommates. Fortunately, Cloudinary can help.

Read more