I ran into a video performance problem while building a landing page. The demo video was 52MB, too large to load quickly, and it tanked the page’s speed. Lighthouse flagged it, load times spiked, and some users never saw an optimized version due to codec mismatches.

I needed a way to:

• Shrink the video without killing the quality.
• Serve the best format for each browser.
• Load the video only when it’s needed.

The final setup cut load times by 67%, reduced bandwidth usage by 52%, and improved Largest Contentful Paint by 45%, all without sacrificing visual quality.

In this post, I’ll walk you through the exact Cloudinary settings, transformation parameters, and reusable code that helped me reduce load times without compromising quality so that you can apply the same strategy to your site.

Create a free Cloudinary account to follow along.

To start, you’ll need to upload your video to Cloudinary. There are two simple ways to upload your video: using a no-code approach and programmatically. I used the no-code option because it was easier for me, but either one works. This makes applying Cloudinary’s transformations easy and delivers an optimized version directly to your website. 

1. Log in to your Cloudinary console.
2. Go to the Media Library tab.
3. Click Upload, select your video file, and wait for the upload to complete.

Once uploaded, Cloudinary will generate a URL for your video like the one below:

<code>[video src="https://res.cloudinary.com/your-cloud-name/video/upload/demo.mp4" /]</code>Code language: HTML, XML (xml)

If you want to upload from your app or project, Cloudinary’s SDK makes it easy. First, install your platform’s SDK and then send your video directly to Cloudinary.

For example, here’s how to do it in Node.js:

1. Install the SDK:
   
   npm install cloudinary

2. Configure Cloudinary:

// cloudinary-config.js

const cloudinary = require('cloudinary').v2;

cloudinary.config({

  cloud_name: 'your-cloud-name',

  api_key: 'your-api-key',

  api_secret: 'your-api-secret'

});

module.exports = cloudinary;Code language: JavaScript (javascript)

3. Upload the video:

// upload-video.js

const cloudinary = require('./cloudinary-config');

cloudinary.uploader.upload('path/to/video.mp4', {

  resource_type: 'video'

})

.then(result => {

  console.log('Upload successful!');

  console.log('Video URL:', result.secure_url);

})

.catch(error => {

  console.error('Upload failed:', error);

});Code language: JavaScript (javascript)

Once the video is uploaded, you’ll get a secure Cloudinary URL that looks like this:

[ video src="https://res.cloudinary.com/your-cloud-name/video/upload/video.mp4"/ ]

In the following sections, you’ll see how I optimized my video size and served the best format for any browser using Cloudinary’s smart URL transformations.

Once you’ve uploaded the video, you’ll want to shrink it without losing quality and make sure every user gets the best version for their browser. Cloudinary’s smart transformations will handle all of that with just a few parameters.

Cloudinary has a set of built-in transformation parameters that automatically optimize your videos for performance and compatibility. You can tweak the URL to apply on-the-fly optimizations without touching the original file. You can use these transformations by attaching a set of parameters to the video URL.

For example, using this sample URL:

[ video src="https://res.cloudinary.com/your-cloud-name/video/upload/video.mp4" /]

Transforming video.mp4 using its URL will look like this:

[ video src="https://res.cloudinary.com/your-cloud-name/video/upload/vc_auto,q_auto,f_auto/video.mp4" /]

Each of the transformation parameters is separated by a comma. These are the set of transformation parameters I used to optimize my 52MB video:

• q_auto. Automatically adjusts video quality to balance size and appearance based on network and device.
• f_auto. Delivers the best format for each browser (like WebM, MP4, AV1).
• vc_auto. Selects the best codec for the device (e.g., H.264, VP9, AV1).

Another thing I did was add a thumbnail poster frame to the video player while the video loaded in the background. This improves perceived performance as users see a preview instantly while the video loads behind the scenes. 

With Cloudinary, you can generate a poster frame from any point in the video by simply adding .jpg to the transformed video URL. By default, Cloudinary uses the middle frame of the video, but you can choose any frame using the start offset qualifier (so) in the video URL. For example, I wanted to use a specific frame from the video, at exactly 4.5 seconds, as the thumbnail. So I generated a JPG image of that frame using this URL:

https://res.cloudinary.com/your-cloud-name/video/upload/so_4.5/video.jpg

This is what the poster frame looked like:

Alternatively, I could let Cloudinary decide which frame to use as the thumbnail based on color distribution using automatic start offset:

https://res.cloudinary.com/your-cloud-name/video/upload/so_auto/video.jpg

This is how combining these transformation parameters in a video tag looks:

<video
  controls
  muted
  playsinline
  preload="metadata"
  poster="https://res.cloudinary.com/your-cloud-name/video/upload/so_4.5/video.jpg"
>
  <source src="https://res.cloudinary.com/your-cloud-name/video/upload/q_auto,f_auto,vc_auto/video.mp4" type="video/mp4" />
</video>Code language: HTML, XML (xml)

Applying this transformation significantly improved the performance of my website. 

Applying this transformation significantly improved the performance of my website. 

• The video file size was reduced from 38MB to just under 15MB without any loss in quality. 
• Page load time improved.
• Lighthouse performance score jumped from 60 to 98.
• First Contentful Paint (FCP) and Largest Contentful Paint (LCP) times were much faster.

Here’s a before-and-after snapshot using Lighthouse:

You can see in the images above how significant the improvement is — smaller file size, faster load times, and a smoother user experience, just by using Cloudinary’s video optimization parameters and not any compression script.

Applying Cloudinary’s transformation parameters to your videos can improve load times without sacrificing quality. The setup is simple, repeatable, and works across all browsers and devices. Whether you’re serving one video or hundreds, these optimizations help you ship faster pages, improve Core Web Vitals, and keep your users engaged.

Sign up on Cloudinary to use responsive video delivery and smart performance presets.

• Cloudinary Overall Media Documentation
• Cloudiary Video transformations