Cloudinary Blog

Faster Media = Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021

Faster Media, Faster Websites: a Recap of a Cloudinary Workshop at React Summit 2021

tl;dr;

Cloudinary conducted a workshop at React Summit 2021 to highlight the effect of media performance on websites by correlating it with Google’s Core Web Vitals and other performance measurements. Also presented were typical optimization techniques along with code samples. Here are the recording and the slides.


React Summit “is an annual conference on all things React, gathering thousands of front-end and full-stack engineers from around the world.” This year, Marissa, Pramod, and I presented at React Summit on behalf of Cloudinary. Our goal was to build on the foundation that media can help drive engagement and conversions on websites and that, if not optimized, media often causes poor user experience and hurts business revenue. Given that I’d already introduced this concept in my Smashing Magazine article How To Boost Media Performance On A Budget, our workshop focused on showcasing practical optimization steps through the React SDK.

Below are four of the common themes we addressed. Read on for the background and the solutions.

Four themes

Why Optimize?

The primary focus of developers is on building and delivering functionalities according to the project schedule. In many cases, media optimization takes a back seat in the face of other priorities. Yet, media is increasingly contributing to the overall performance metrics that are being used as a ranking factor for search results. In particular, Google's new Core Web Vitals (CWVs) comprise three performance metrics:

CWV

On most media-heavy sites like e-commerce, news articles, and blog posts, LCP might be the hero image or even a video. For example, in this test for the e-commerce site Rent the Runway, the LCP is a video:

Copy to clipboard
<video class="rent-my-style__video" id="rent-my-style__video" preload="auto" loop="" autoplay="" poster="https://cdn.rtrcdn.com/assets/imgs/031721_HP_hero.jpg">

Woman dress
Source

If the poster image or video is suboptimal, the page would be slow to load, resulting in a janky user experience and a lower Google Lighthouse score. Similarly, when combined with an HTML layout that misses the aspect ratio for images, suboptimal images could cause shifts—a phenomenon that frustrates users in addition to lowering the Lighthouse score.

Thus, not only is media optimization important, but it’s also an integral part of the development and build process. That was a key point highlighted at our workshop.

What and How to Optimize?

Optimization of media can be broadly classified into three main categories: format, quality, and size.

format, quality, and size

Format

Lara Hogan, formerly an engineering manager at Etsy, authored an excellent article in March 2015 titled Image Formats (The Nerdy Parts) with details of the various image formats and their common usage.

Over the six years since then, newer formats like AVIF and JPEG-XL have been introduced. With their tight schedules, developers are hard pressed to keep up with the changing landscape. Help is at hand, however: by leveraging Cloudinary's automatic-format (f_auto) mechanism for both images and videos, developers can offload to Cloudinary the task of determining the right format, saving bytes by an order of magnitude.

Quality

You can compress media resources by reducing their quality. For example, a general rule tools like WebPageTest apply is to lower the quality of a JPEG to 80. However, you can achieve higher compression levels by using perceptual metrics like SIMULACRA, which identify the correct lossy-compression level so that humans cannot perceive the artifacts in the images or videos. With Cloudinary's automatic-quality (q_auto) feature, you can ensure that your media is automatically and compressed just right for the most byte savings.

By combining both f_auto and q_auto, you can deliver the perfectly compressed image or video in the format that best suits your end-user's device or browser.

Size

It’s better to resize images or videos for the right dimension on the server side than to download them first and then resize them for display on the browser. You can display such dynamically generated images by using responsive elements like HTML5’s image srcset attribute and <picture> tag, as well as CSS media queries.

You can resize media in multiple ways based on your use case, for example:

  • For a standardized image size, say, on the category or product page of an e-commerce site, you could resize to a fixed dimension with the w_ (width) and h_ (height) parameters. Alternatively, you could set up named transformations.
  • For a responsive layout, you could implement responsive images by embedding URLs or with JavaScript.

For more details, see Eric Portis’s superb series on responsive images, complete with insights on how to architect the right methodology.

Delivery

Finally, be sure to deliver media assets as fast as possible with the least amount of latency through a content delivery network (CDN). To achieve optimal efficiency, CDNs can cache content closer to the end-user’s location and avoid repeated requests to your data center or cloud.

CDN

With Cloudinary, you can quickly access resources for delivery through multi-CDNs—a tremendous convenience and time-saver.

Why Not Try It Out Yourself?

Our workshop covered many concepts along with a simple project that I’d put together, which aggregates all the aspects of media optimization. Give the project a try yourself (see below).

Objective

Assume that you are the owner of an e-commerce store that sells T-shirts. However, the app, written in React, has media-optimization issues. To fix them, do the followingY:

  1. Take a baseline measurement of your site’s performance and CWVs.
  2. Identify the areas for improvement.
  3. Implement a fix with Cloudinary's React SDK.
  4. Measure the performance and gains in CWVs.

Code Samples

Here’s the code:

You could start by measuring the baseline on WebPageTest and enabling the Lighthouse score. Alternatively, jump ahead, as in this example:

Here's the postoptimization measurement on WebPageTest.

This video shows the homepage loading before and after optimization:

Source

What Do You Think?

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. Additionally, we described the options for handling responsive media.

Has this topic piqued your interest? If so, do listen to the recording of our workshop at React Summit 2021 and send us your thoughts.

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 roommates.com 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