There is a very high chance that your slow & just-okay web and app performance is affecting your business negatively.
Studies have shown that 47% of consumers expect a web page to load in 2 seconds or less, and 40% of people abandon a website that takes more than 3 seconds to load.
These days, many websites and apps are loaded with significant media assets. Page (web) and Screen (mobile) weight are increasing heavily by the day and contribute heavily to performance. Shoppers will enjoy exploring your online store and are more likely to purchase if their experience is fast!
Two weeks ago, I composed a 45-page word document that had a lot of pictures and exported it to PDF. It was ~75 MB. I needed it to be below 15MB because the submission website had a hard requirement of 15 MB. I ran the images through Cloudinary’s image performance technique to obtain high-quality compressed photos and replaced them with the initial pictures. The result was a 13MB PDF!
Understanding that performance is money gives you immense confidence and justification to invest deeply in the performance optimization of your app.
In this article, I’ll share some performance optimization techniques to engineer faster web & app experiences with Cloudinary.
Every media asset in your app contributes to increased page weight and decreases load time. Raw photos and videos should not make their way to your platform. So, ensure all your videos and images are compressed & optimized before delivery.
Rolling out your compression techniques & modules comes with its challenges, some human resources & continuous maintenance. However, you can leverage Cloudinary’s optimization tech to auto-optimize all your media assets.
These two Cloudinary parameters,f_auto and q_auto, added to your media assets URL or applied before upload, do an excellent job of auto-compression and auto-optimizing your media assets.
The parameter, vc_auto, normalizes and optimizes a video by automatically selecting the most appropriate codec based on the output format.
Your users, in many instances, are scattered all over the world. They access your services and browse your website from their devices in different geographical locations. So, in turn, affects the delivery and load time of your website for other users.
A user in Canada might load your website in less than 2 seconds, while another in Nigeria might witness it load in 7 seconds.
Worthy of Note is that Cloudinary serves all media assets via a CDN. However, Cloudinary offers the option of multi-CDNs.
Multiple CDNs speed up and enhance content delivery to your end users. And Cloudinary customers can take advantage of one of two multi-CDN optimization solutions:
-
Dynamic multi-CDN switching: Uses real-time data to automatically select the best performing or most appropriate of the supported CDN services for every user request and every location.
-
Smart CDN selection: Dedicated support engineers help you determine which of the supported CDN services best fit your required features and target audience.
These options allow you and your team to focus on your business while Cloudinary handles the effortless delivery of optimized media assets to your customers across the globe.
These two solutions above are available to Enterprise-level customers, and the dynamic multi-CDN feature affects pricing.
One way to achieve faster load times is to resize and crop media assets before they reach the user’s devices.
Many times, I see instances of resized images and videos by CSS. This means the original media asset has already been downloaded to the client. Resizing should never be done on the browser. Not good and results in slower load times!
Resizing videos to 1,080 px., 720 px., or fewer pixels saves millions per frame, concurrently generating gratifyingly smaller files. For example, if you resize a 45 seconds video that is 1,350px in width, 720px in height and 50MB to 1012 x 540 px with a size of 22MB video, then it means the new video will start playing way faster than the former.
Cloudinary is smart enough to resize images and crop them with several parameters dynamically. Dynamic cropping in Cloudinary is done through intelligent responsive breakpoints. You have two options:
Automatic breakpoints: Cloudinary’s intelligent algorithm can calculate the settings for optimal breakpoints by accounting for the number of generated image versions and the file-size reduction that occurred with each version. For more details, see this documentation on responsive images.
Cloudinary API: You can programmatically request breakpoints for uploaded images through the Cloudinary API by specifying settings like width range and requesting a transformation. Furthermore, you can order multiple image transformations, including cropping, image effects, filters, and optimization. Read more in this excellent article: Introducing Intelligent Responsive Breakpoints Solutions.
Cloudinary offers a parameter, w_auto that you can add to the asset URL to scale the image and video to fit the various layout widths and send users the versions that display best on their browsers from the same URL.
A sprite is a single image that is composed of many smaller images. For example, the web page is modified to download only a single image from the server, and the page’s HTML uses alternative CSS class names to point to the small images within the larger image.
Sprites significantly reduce the number of HTTP requests to the server to fetch images by fetching just one image, thus resulting in faster asset delivery.
For more , technical details, check out Sprite Generation with Cloudinary.
Lazy loading for image assets improves your website and app performance a lot! With lazy loading, only the user can see important images at a time.
With lazy loading, images are only loaded once the user reaches the point of scrolling the website/app where they need to view them.
If your site home page has 100 images and you load only 3 depending on the user’s viewport-specific location at a time, then you are lazy loading the assets.
For more details, check out this excellent article with several lazy loading options.
If you want to start delivering images that are half the size of JPEGs, opt for AVIF by adding f_avif,q_auto to your media asset URLs and delivering them—along with the appropriate fallbacks—using the
AVIF is an image format spun from the AV1 video format developed by the Alliance for Open Media (AOM). As an open-source and royalty-free video codec, AVIF delivers much higher compression rates than the older image codecs like JPEG and WebP and is on par with the brand-new JPEG-XL format, which does not work on any browser yet.
Worthy of Note is that the format does not enjoy universal support by browsers, and encoding AVIF images is costly. Therefore, the easiest way to adopt this format is with Cloudinary.
<picture>
<source type="image/avif" srcset="dog.avif"/>
<source type="image/webp" srcset="dog.webp"/>
<img src= "dog.jpg" alt= "A dog chasing a ball."/>
</picture>
Code language: HTML, XML (xml)Note: AVIF does not excel at lossless compression.
WebM, with its VP8 and VP9 encodings, are newer formats that deliver similar quality with smaller-sized videos. But, again, you can leverage Cloudinary to deliver such optimized video formats.
Cloudinary’s optimization capabilities for video result in at least a 50% reduction in file size. You can change vc_auto in the video URL to vc_vp8, vc_vp9 or vc_h265.
That’s all Cloudinary requires to re-encode the videos for optimization.
GIFs are expensive. So, instead of using GIFs on your page, use videos. All you need to convert your GIFs to videos is to change the extension of the video URL from .gif to .mp4.
51KB video format
2.83MB gif format
I recommend you use a couple of tools to measure your web and app performance.
It’s an open secret that optimizing rich media drives revenue in e-commerce. So, again, performance is money!
Performance optimization is not a one-time thing. It’s intentional, deliberate and continuous. You can download the “Performance is Money” whitepaper here for your continued learning. And, as always, reach out to us at Cloudinary if you’re interested in more support with media optimization.
