{"id":38146,"date":"2025-08-11T07:00:00","date_gmt":"2025-08-11T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=38146"},"modified":"2025-10-31T13:07:53","modified_gmt":"2025-10-31T20:07:53","slug":"my-fastest-video-load-setup-yet","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/my-fastest-video-load-setup-yet","title":{"rendered":"My Fastest Video Load Setup Yet (and How You Can Copy It)"},"content":{"rendered":"\n

Recently, I ran into a video performance problem while building a landing page. The demo video was 52MB, which was way too large to load quickly, and it tanked the page\u2019s speed. Lighthouse flagged it, load times spiked, and some users never saw an optimized version due to codec mismatches.<\/p>\n\n\n\n

I needed a way to shrink the video, serve the best format for each browser, and then load the video only when it\u2019s needed. The final setup cut load times by 67%, reduced bandwidth usage by 52%, and improved Largest Contentful Paint by 45%,<\/strong> all without sacrificing visual quality.<\/p>\n\n\n\n

In this post, I\u2019ll walk you through the exact Cloudinary settings, transformation parameters, and reusable code that helped me reduce my video load times.<\/p>\n\n\n\n

Create a free Cloudinary account<\/a> to follow along.<\/p>\n\n\n\n

Uploading Your Video to Cloudinary<\/h2>\n\n\n\n

To start, you\u2019ll 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. <\/p>\n\n\n\n

Using the Cloudinary Upload UI (No Code)<\/h3>\n\n\n\n
    \n
  1. Log in to your Cloudinary console<\/a>.<\/li>\n\n\n\n
  2. Go to the Media Library<\/strong> tab.<\/li>\n\n\n\n
  3. Click Upload<\/strong>, select your video file, and wait for the upload to complete.<\/li>\n<\/ol>\n\n\n\n

    Once uploaded, Cloudinary will generate a URL for your video like the one below:<\/p>\n\n\n

    <code<\/span>><\/span>[video src=\"https:\/\/res.cloudinary.com\/your-cloud-name\/video\/upload\/demo.mp4\" \/]<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Uploading via Code (Cloudinary SDK or API)<\/h2>\n\n\n\n
    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.<\/p>\n\n\n\n
    For example, here’s how to do it in Node.js<\/strong>:<\/p>\n\n\n\n
      \n
    1. Install the SDK: 

      npm install cloudinary<\/code><\/li>\n<\/ol>\n\n\n\n
        \n
      1. Configure Cloudinary:<\/li>\n<\/ol>\n\n\n
        \/\/ cloudinary-config.js<\/span>\n\nconst<\/span> cloudinary = require<\/span>('cloudinary'<\/span>).v2;\n\ncloudinary.config({\n\n\u00a0 cloud_name<\/span>: 'your-cloud-name'<\/span>,\n\n\u00a0 api_key<\/span>: 'your-api-key'<\/span>,\n\n\u00a0 api_secret<\/span>: 'your-api-secret'<\/span>\n\n});\n\nmodule<\/span>.exports = cloudinary;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
          \n
        1. Upload the video:<\/li>\n<\/ol>\n\n\n
          \/\/ upload-video.js<\/span>\n\nconst<\/span> cloudinary = require<\/span>('.\/cloudinary-config'<\/span>);\n\ncloudinary.uploader.upload('path\/to\/video.mp4'<\/span>, {\n\n\u00a0 resource_type<\/span>: 'video'<\/span>\n\n})\n\n.then(result<\/span> =><\/span> {\n\n\u00a0 console<\/span>.log('Upload successful!'<\/span>);\n\n\u00a0 console<\/span>.log('Video URL:'<\/span>, result.secure_url);\n\n})\n\n.catch(error<\/span> =><\/span> {\n\n\u00a0 console<\/span>.error('Upload failed:'<\/span>, error);\n\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
          Once the video is uploaded, you’ll get a secure Cloudinary URL that looks like this:<\/p>\n\n\n\n
          [ video src=\"https:\/\/res.cloudinary.com\/your-cloud-name\/video\/upload\/video.mp4\"\/ ]<\/code><\/p>\n\n\n\n
          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.<\/p>\n\n\n\n
          Using Smart Transformations in the URL<\/h2>\n\n\n\n
          Once you\u2019ve uploaded the video, you\u2019ll want to shrink it without losing quality and make sure every user gets the best version for their browser. Cloudinary\u2019s smart transformations will handle all of that with just a few parameters.<\/p>\n\n\n\n
          Cloudinary has a set of built-in transformation parameters<\/a> 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.<\/p>\n\n\n\n
          For example, using this sample URL:<\/p>\n\n\n\n
          [ video src=\"https:\/\/res.cloudinary.com\/your-cloud-name\/video\/upload\/video.mp4\" \/]<\/code><\/p>\n\n\n\n
          Transforming video.mp4 using its URL will look like this:<\/p>\n\n\n\n
          [ video src=\"https:\/\/res.cloudinary.com\/your-cloud-name\/video\/upload\/vc_auto,q_auto,f_auto\/video.mp4\" \/]<\/code><\/p>\n\n\n\n
          Each of the transformation parameters is separated by a comma. These are the set of transformation parameters I used to optimize my 52MB video:<\/p>\n\n\n\n