How To Boost Media Performance On A Budget
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
This article has been kindly supported by our dear friends at Cloudinary who help the community quickly and easily create, manage and deliver their digital experiences across any browser, device and bandwidth. Thank you!
American scholar Mason Cooley deftly described a hard fact of life: “A budget takes the fun out of money.” Unquestionably, media enlivens websites, adding appeal, excitement, and intrigue, let alone enticements to stay on a page and frequently revisit it. However, just as out-of-control spending bodes ill in the long run, so does unbudgeted digital media decimate site performance.
A case in point: a page-load slowdown of a mere second could cost Amazon $1.6 billion in annual sales. Of the many factors that affect page-load speed, media is a significant one. Hence the dire need for prioritizing optimization of media. By spending your money right on that task and budgeting your media, you’ll reap significant savings and benefits in the long run.
Performance Budgets
“A performance budget is ‘... just what it sounds like: you set a ‘budget’ on your page and do not allow the page to exceed that. This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.”
— Tim Kadlec
A performance budget as a mechanism for planning a web experience and preventing performance decay might consist of the following yardsticks:
- Overall page weight,
- Total number of HTTP requests,
- Page-load time on a particular mobile network,
- First Input Delay (FID)
- First Contentful Paint (FCP),
- Cumulative Layout Shift (CLS),
- Largest Contentful Paint (LCP).
Vitaly Friedman has an excellent checklist that describes the components that affect web performance along with useful tips on optimization techniques. Becoming familiar with those components will enable you to set performance goals.
With clearly documented performance goals, various teams can have meaningful conversations about the optimal delivery of content. For example, a budget can help them decide if a page should contain five images — or three images and one video — and still remain within the planned limits.
However, having a performance budget as a standalone metric might not be of much help. That’s why we must correlate performance to organizational goals.
Business Performance
If you splurge a lot of bytes on nonoptimal videos and images, the rich-media experience will not be so rich anymore. An organization exists to achieve outcomes, such as enticing people to buy, educating them, motivating them, or seeking help and volunteers. Anyone with a web presence would appreciate the relationship between the effect of various performance measures on business metrics.
WPOStats highlights literally hundreds of case studies showing how a drop in perfrmance — from a few hundreds of milliseconds to seconds — might result in a massive drop in annual sales. Drawing that kind of relationship greatly helps track the effect of performance on business and, ultimately, build a performance culture for organizations.
Similarly, slow sites can have a dramatic impact on conversion. A tough challenge online businesses face is to find the right balance between engaging the audience while staying within the performance budget.
It’s not surprising then that a critical component for audience engagement is optimized visual media, e.g. a captivating video that weaves a story about your product or service along with relevant, interesting, and appealing visuals.
According to MIT neuroscientists, our brain can absorb and understand visual media in less than 13 milliseconds, whereas text can take the average reader over 3.3 mins to comprehend, often after re-reading it and cross-referencing other places. No wonder then that microvideo content (usually just 10–20 seconds long) often delivers big engagements and conversion gains.
Appeal Of Videos
While shopping online, we expect to see detailed product images. For years, I’ve come to prefer browsing products that are complemented by videos that show, for example, how to use the product or maybe how to assemble it, or that demonstrate real-life use cases.
Apart from my personal experience, a lot of research attests to the importance of video content:
- 96% of consumers find videos helpful when making online purchasing decisions.
- 79% of online shoppers prefer to watch a video for information on a product rather than reading the text on a webpage.
- The right product video can raise conversions by over 80%.
Speaking about the delivery of videos on the web,
“The average video weight is increasing dramatically every year, more so on mobile than on desktop. In some cases, that may be warranted since mobile devices often have high-resolution screens, but it may also be due to a lack of ability to offer different video sizes using HTML alone. Many large videos on the web are hand-placed in marketing pages and don’t have sophisticated media servers to deliver appropriate sizes, so I hope in the future we’ll see similar simple HTML features for video delivery that we see in responsive images.”
— Scott Jehl
The same sentiment was conveyed by Conviva’s Q4 2020 State of Streaming (registration required), which noted that mobile phones saw 20% more buffering issues, a 19% higher video-start failure and 5% longer start-time than other devices.
Apart from rendering troubles, video delivery can also raise bandwidth costs, especially if you cannot deliver the browser’s optimal formats. Also, if you are not using a content delivery network (CDN) or multiple CDNs to map users to the closest edge regions for reduced latencies — a practice called suboptimal routing — you might slow down the start of the video.
Similarly, unoptimized images were the leading cause of page bloat. According to the Web Almanac, the differential in image bytes sent to mobile or desktop devices is very small, which amounts to a further waste of bandwidth for devices that don’t really need all the extra bytes.
Doubtless, going overboard with an engaging yet unoptimized content hurts business goals, and that’s where the fine art of balancing comes into play.
The Art Of Balancing Performance With Media Content
Even though rich media can promote user engagement, we need to balance the cost of delivering them with your website performance and business goals. One alternative is to host and deliver video through a third party like YouTube or Vimeo.
Despite bandwidth savings, however, that approach comes at a cost. As the content owner, you can’t build a fully customized branded experience, or offer personalization. And of course, you need to host and deliver your images.
You don’t have to offload your content. There are also other options available. Consider revamping your system for optimal media delivery by doing the following:
Understand Your Current Usage
Study the weight of your webpages and the size of their media assets. Web-research expert Tammy Everts recommends ensuring that pages are less than 1 MB in size for mobile and less than 2 MB for everything else. In addition, identify the resources that are displayed on critical pages.
For example, can you replace a paragraph of text and the associated images with a short video? How would that decision affect your business goals? At this stage, you might need to review your Real User Monitoring (RUM) and Analytics and identify the critical pages that lead to higher conversion and engagement rates.
Also, be sure to synthetically track Google’s Core Web Vitals (CWVs) as part of your toolkit with tools like LightHouse. You can also measure CWVs through real-user monitoring (RUM) like CrUX. Since the CWVs will also be a signal for Google to crawlers, it makes sense to monitor and optimize for those metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
Serve The Right Format
Serve images or videos in the most appropriate format in terms of size and resolution for the viewing device or browser. You might need an image CDN for that purpose. Alternatively, create variants like WebM, AVIF, JPEG-XL, HEIC, etc. and selectively serve the right content type based on the requesting User-Agent and Accept headers.
For one-off conversions, you can try tools like Squoosh.app. A related practice is to convert animated GIFs to videos. For more insight, see this Web.dev article. Want to try setting up a workflow to handle video publishing? See the great tips in the article Optimizing Video For Size And Quality.
Serve The Right Size
Over 41% of images on mobile devices are improperly sized. So, rather than serving a fixed width, crop your images and videos to fit the container size with tools like Lazysizes. Better yet, AI tools that can detect areas of interest while cropping images could save you a load of time and effort. You could also leverage native lazy-loading for images that are below the fold.
Add Subtitles To Your Videos
Almost 85% of videos are played without sound. Adding subtitles to them doesn’t only provide an accessible experience, but it would capture audience attention and boost engagement. However, transcribing videos could be a tedious job; you can work with an AI-based transcription service and improve it instead to automate the workflow.
Deliver Through Multiple CDNs
CDNs can alleviate last-mile latency, shorten a video’s start time, and potentially reduce buffering issues. According to a study by Citrix, a multi-CDN strategy can reduce latency even further and offer continued availability in case of localized outages in the CDN’s edge nodes.
Instead of leveraging multiple discreet tools, you could explore a product like Cloudinary’s Media Optimizer, which effectively and efficiently optimizes media, delivering the right format and quality through multi-CDN edge nodes. In other words, Media Optimizer optimizes both quality and size, serving high visual fidelity in small files.
Progressively Render Video
Auto-playing preview videos on YouTube has shown to increase video watch time by over 90%. Video auto-play has few benefits and plenty of drawbacks, so it’s important to be careful when to use and when not to use it. It’s important to have the option to pause the video as a minimum.
A good way to balance the page-size budget would be to first serve AI-created video previews and poster images only, loading the full video only if the user clicks the video. That way, you can eliminate unnecessary downloads and accelerate page loads.
Alternatively, load a preview video at the beginning and let the player autoplay the full version. Once the preview completes, the player checks the connection type of the device with the Network Connection API and, if the user has good connectivity, swaps the source from preview to the actual video.
You can check a sample page for a demo. Here’s a tip: since CDNs can detect network connection types more reliably, your production-quality code could leverage the CDN to detect network speed, based on which your client code could progressively load the long-form video.
Wrapping Up
Down the road, thanks to its remarkable ability to tell stories in a way that words can’t, visual media will continue to be a dominant element for websites and mobile apps. However, determining the right content to deliver depends on both your business strategy and site performance.
“A performance budget doesn’t guide your decisions about what content should be displayed. Rather, it’s about how you choose to display that content. Removing important content altogether to decrease the weight of a page is not a performance strategy.”
— Tim Kadlec
That’s sound advice to keep in mind.
Further Reading
- Why Anticipatory Design Isn’t Working For Businesses
- Why Optimizing Your Lighthouse Score Is Not Enough For A Fast Website
- How To Monitor And Optimize Google Core Web Vitals
- Optimizing Video For Size And Quality
(vf, yk, il, mrn)