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

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more