Last updated: Oct-07-2022
Media optimization involves delivering images and videos with the smallest possible file size while maintaining visual quality. Optimizing media means saving bytes and improving performance for your website: the fewer bytes per asset, the faster the browser can download and render the content on your users' screens. Media optimization also plays a big role in the three Core Web Vitals outlined by Google, a key component of SEO for your site. When loking at media optimization, research shows that site speed is directly related to visitor satisfaction and even monetary conversions.
- Half of web users expect a website to load within two seconds.
- A 1-second delay in page load time can decrease visitor satisfaction by 16% and can also lead to a drop in conversion of 7% or more.
- Load time is a major contributing factor to page abandonment, and the abandonment increases as a percentage with every second of load time, with nearly 40% of users abandoning a page after 3 seconds.
- 73% of mobile internet users report that they've experienced problems with page load times on their devices.
These statistics are from 2009 and 2010, and it's reasonable to assume that visitors' expectations have only increased over time.
Most of the time, it is media that has the most impact on slow load time.
Cloudinary's built-in fast CDN delivery helps to get all resources to your users quickly. Additionally, Cloudinary automatically performs certain optimizations on all transformed images and videos by default. But beyond this, Cloudinary also provides many features that enable you to further optimize your media to fit your needs.
- Image optimization: How to optimize the delivery of your images by resizing, adjusting the quality, and using the most optimal formats.
- Video optimization: How to optimize the delivery of your videos, including how to use optimal formats, codecs and bitrates as well as resizing and adjusting the visual quality.
See also: Responsive images
One of the best ways to optimize your website and boost your SEO is to adhere to the Core Web Vitals outlined by Google. The Core Web Vitals are a subset of the broader Web Vitals initiative and media optimization plays a big role in this.
The three Core Web Vitals, as documented by Google are:
- Largest Contentful Paint (LCP): measures the loading performance of your page. The LCP metric reports the render time of the largest image or text block visible within the viewport. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
Optimizing your media is an important component in improving the LCP time.
- Cumulative Layout Shift (CLS): measures the visual stability of your page when it loads. To provide a good user experience, pages should maintain a CLS of less than 0.1.
Loading your media assets in the right way can be key to ensuring the CLS is below 0.1.
- First Input Delay (FID): measures the interactivity of your page. To provide a good user experience, pages should have a FID of less than 100 milliseconds. While FID is an important metric to try and improve, your media is not directly related. We recommend reviewing the linked documentation to help you with this one.
Optimizing your media plays a big role in reducing the time it takes for your largest contentful paint. Here are a few techniques you can use to speed things up:
- Compress your media. Applying Cloudinary's q_auto and f_auto transformations to all of your delivered media ensures that it will be delivered to your users with the best visual quality and file format for their browser and device at the smallest possible size. Compressing your media using Cloudinary will easily and quickly improve LCP time.
- Make your images responsive. Delivering images responsively means ensuring they are the most optimal size for each user's device display. This will ensure faster speeds and a reduced LCP.
e_vectorizein URLs) here.
- Replace GIFs with videos. Animated GIFs are notoriously heavy components of a page and can cause your LCP time to be larger than it should be. Replacing your animated GIFs with looping videos means they load faster and only the poster image is included in the LCP measurement.
TipYou can apply the compression techniques listed above to your poster images too.
- Take a look at Akshay's blog post on Understanding and using Core Web Vitals
- Watch the MX Matters video podcast on How Google's Core Web Vitals Affect SEO and Visitor Traffic