Cloudinary Blog

Rules for Rich-Media Optimization

Rules for Rich-Media Optimization

Is your web page speed a pitfall or a profit driver? If you don’t stay on top of optimizing rich media on your website, chances are your web performance is actively (and financially) working against you.

Over the past few years, there has been an 85% rise in online page weight. For websites in the 90th percentile, three-fourths of their page weight is taken up by images and video, making it a tough trade-off between quick loading speeds and an engaging user experience. Why is this problematic? Because studies have shown that 40% of visitors would abandon a site if a page takes more than three seconds to load.

It’s clear: media optimization is critical to bottom-line success.

To further explore the ways that web performance impacts business outcomes and discuss best practices, I recently presented a webinar titled Performance is Money: Rules for Rich Media Optimization. Below is a recap of the high points, plus some links you’ll find useful as you pursue media optimization.

Prioritize Performance, But Be Ready to Test and Iterate.

Organizations today aim to embody a performance-driven culture, an environment where people are pushed to be as effective as possible in their roles and to tie their efforts to actual business outcomes. What this sometimes creates is an “engineering vs. marketing” scenario, where engineering creates a website or app using the newest framework, and marketing comes in and requests everything to be tracked for valuable engagement insights. Third-party JavaScript is then added, contributing to a slowed-down (read: not very engaging) site.

When establishing a performance culture internally, there must be agreement between engineering and marketing on what is important to measure in the digital space, checking these needs against its direct impact on loading speeds. For example, is it necessary for 15 or 20 tracking JavaScript files to a page? Maybe, but probably not. (In the rare cases when it is necessary, there are design patterns on how to add third-party JavaScript, as well as monitoring tools built into Chrome, to measure their performance.)

Prioritizing web performance will mean committing to a continuous cycle of testing and iterating on your website, requiring ongoing alignment between your engineering and marketing teams for what is necessary and what can be deprioritized in the name of speed.

Consider These Components and Their Impact on Web Performance.

Checklists are especially useful in important scenarios where you want to make sure no piece of the puzzle is overlooked. Here’s a list of considerations related to web performance I provided during the webinar:

  • Server– Utilize HTTP/2 or HTTP/3 if possible, and ensure compression is ‘on’ by default.
  • JavaScript – This is the second heaviest component of page weight, so ensure effective bundle management. Other best practices include applying lazy loading, removing unused code, and using “Modern JavaScript”.
  • CSS– CSS is a render-blocking resource. Keep the CSS lean, consider the critical rendering path and avoid repaints, as this could very well be slowing down your entire site.
  • Fonts– Preload fonts if possible, and look into leveraging font-display and font-loading APIs.
  • Images & Videos– It’s critical to encode your media assets. There are many best practices here:
    • Compress your images and lazy load when possible
    • Use video instead of GIFs
    • Make sure images are responsive in nature to the device they’re viewed on
    • Use image CDNs
    • Incorporate adaptive bitrate for streaming video
  • Third-Party Scripts– Review and monitor the tracking that’s injected into your website, outside of your organization. Google AdWords, is an example. While you may not have control over the code, you want to make sure that your site is not going to be slowed down by using these services.

Don’t Ignore Core Web Vital Metrics, For They Will Soon Be Indicators of SEO Success.

Google introduced its three Core Web Vitals in 2020, based on exhaustive research of web user experiences. This effort by the search-engine king puts actual numeric value to website performance, measured with field data like real user metrics (RUM), combined with speed tests and other lab data. Coming soon, in May of this year, Core Web Vitals will have a direct impact on a site’s search engine ranking on Google. This is hugely important. If your website is slower than these metrics, your website will not rank well for the search terms you’re working to be found for.

Core Web Vitals measure three key elements: load time, interactivity, and visual stability. As defined by SearchEngineJournal:

  • Largest Contentful Paint (LCP)– The time it takes for a page’s main content to load. An ideal LCP measurement is 2.5 seconds or less.
  • First Input Delay (FID)– The time it takes for a page to become interactive. An ideal measurement is less than 100 ms.
  • Cumulative Layout Shift (CLS)– The amount of unexpected layout shifts of visual page content. An ideal measurement is less than 0.1.

The metric directly linked to media optimization is LCP, since the largest element on a page is almost always a hero image, an image gallery or the poster image of a video. Ensuring your rich media loads quickly will directly impact your LCP score.

Tap into Resources to Improve Your Rich Media Optimization.

Half of our time together on the webinar was spent in a hands-on demo, where I walked through the backend code to really understand the elements at play. Especially if you’re a visual learner, catching the on-demand replay will help the best practices for media optimization to really hit home.

At the conclusion of the webinar, I shared a number of helpful links. Here they are again, to bookmark and find later:

The full webinar is now available for on-demand viewing in our Resource Library, or you can download the “Performance is Money” white paper here for your continued learning. And, as always, reach out to us at Cloudinary if you’re interested in more support with media optimization.

Recent Blog Posts

How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more

Building Display Ads With Transparent Video

By Afzaal Ahmad Zeeshan
Build Web Ads With Transparent Video to Attract User Engagement

Billions of views on the Internet every day drive one of the biggest industries on the planet: advertising. The sheer size of that market and the competitive nature of vying for consumer attention results in a constant need for innovation. Readers are jaded, and display ads are blind spots.

Read more