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.
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.
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.
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
- Lighthouse
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.
