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.
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.
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.
- 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.
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.
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:
- Design a Fast and Complete E-commerce User Experience
- Cloudinary Image Optimization
- Webpage Speed Test
- Website Speed Test Image Analysis Tool
- Responsive Image Breakpoints Generator
- Core Web Vitals
An ideal tool to leverage is Cloudinary’s Media Optimizer, which optimize both the quality and file size of media for delivery in the right format through multi-CDNs. For details, see the tool’s announcement and the post Confronting the Urgent Problem of Web Performance.
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.