To get started, it\u2019s helpful to understand the foundational problem with videos and Core Web Vitals, then dive into the practical solutions. Make sure to complete the prerequisites below to follow along.<\/p>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
You should have:<\/p>\n\n\n\n
- \n
- Basic knowledge of HTML, CSS, and JavaScript.<\/li>\n\n\n\n
- Understanding of web performance concepts.<\/li>\n\n\n\n
- A free Cloudinary account<\/a> for video optimization.<\/li>\n\n\n\n
- A local development server (Python, Node.js, or VS Code Live Server).<\/li>\n<\/ul>\n\n\n\n
You can also view the complete source code on GitHub<\/a> to see the end result.<\/p>\n\n\n\n
Videos impacts the critical metrics Google uses to evaluate your site’s performance, which is known as the Core Web Vitals triad. Let\u2019s break down how and why:<\/p>\n\n\n\n
- \n
- Largest Contentful Paint<\/strong><\/a> (LCP).<\/strong> This measures loading performance, i.e., how long the most significant element in the visible viewport takes to load. Videos that serve as hero elements are often the LCP element, and slow-loading videos directly increase this metric.<\/li>\n\n\n\n
- First Input Delay<\/strong><\/a> (FID)<\/strong>. This measures interactivity, as heavy video processing can block the main thread, increasing input delay. <\/li>\n\n\n\n
- Cumulative Layout Shift<\/strong><\/a> (CLS)<\/strong>. This measures visual stability. Videos without reserved dimensions cause significant layout shifts as they load. To provide a good user experience, pages should maintain a cumulative layout shift (CLS) of less than 0.1 layout shift score.<\/li>\n<\/ul>\n\n\n\n
With critical impact metrics Google uses to evaluate site performance, poorly optimized videos can compromise all three metrics, reducing your overall page performance score and negatively impacting SEO rankings and user experience.<\/p>\n\n\n\n
Next, let’s tackle the problem. The key to maintaining fast performance while using engaging video content is lazy loading<\/strong>. In other words, ensuring videos only load when users need to see them. This prevents unnecessary bandwidth consumption and keeps your initial page load lightning-fast.<\/p>\n\n\n\n
In the next section, you’ll implement three progressively lazy loading methods, starting with simple native HTML attributes and advancing to intelligent, connection-aware optimization with Cloudinary.<\/p>\n\n\n\n
Set Up the Project and Install Dependencies<\/h2>\n\n\n\n
First, create the project using the following command to build a hands-on demo page to test each method side by side, with live performance feedback so you can see the differences in action using vanilla HTML, CSS, and JavaScript.<\/p>\n\n\n
# Create project directory<\/span>\n\nmkdir video-optimization-tutorial\n\ncd video-optimization-tutorial<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nNext, create the basic file structure:<\/p>\n\n\n
# Create the basic file structure<\/span>\n\nmkdir css js images videos\n\ntouch index.html css\/styles.css js\/main.js js\/cloudinary-config.js<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nThen start or set up your local server with the following command:<\/p>\n\n\n
# Using Live Server extension in VS Code (recommended)<\/span>\n\n# Just right-click index.html and select \"Open with Live Server\"<\/span>\n\n# Option 2: Using Node.js http-server<\/span>\n\nnpm install -g http-server\n\nhttp-server<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nYour project structure should look like this:<\/p>\n\n\n
video-optimization-tutorial\/\n\n\u251c\u2500\u2500 index.html\n\n\u251c\u2500\u2500 css\/\n\n\u2502 \u00a0 \u2514\u2500\u2500 styles.css\n\n\u251c\u2500\u2500 js\/\n\n\u2502 \u00a0 \u251c\u2500\u2500 main.js\n\n\u2502 \u00a0 \u2514\u2500\u2500 cloudinary-config.js\n\n\u251c\u2500\u2500 images\/\n\n\u2514\u2500\u2500 videos\/<\/code><\/span><\/pre>\n\n\nGet Environment Variables From Cloudinary<\/h2>\n\n\n\n
You need environment credentials from your Cloudinary dashboard to use Cloudinary video transformations and create optimized video delivery.<\/p>\n\n\n\n
Log in to your Cloudinary dashboard<\/a> to retrieve environment credentials such as the cloud name<\/strong>, API key<\/strong>, and API secret<\/strong>.<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1753214121\/blog-How_to_Lazy_Load_and_Autoplay_Videos_Without_Killing_Your_Core_Web_Vitals-1.png\")
Get product environment credentials on Cloudinary<\/figcaption><\/figure>\n\n\n\n Add your environment credentials inside the
js\/cloudinary-config.js<\/code> file:<\/p>\n\n\n\/\/ js\/cloudinary-config.js<\/span>\n\nconst<\/span> CLOUDINARY_CONFIG = {\n\n\u00a0 cloudName<\/span>: 'your-cloud-name'<\/span>, \/\/ Replace with your actual cloud name<\/span>\n\n\u00a0 apiKey<\/span>: 'your-api-key'<\/span> \/\/ Only needed for uploads, not transformations<\/span>\n\n};\n\n\/\/ Initialize Cloudinary (we'll add this script tag to HTML)<\/span>\n\nconst<\/span> cloudinary = window<\/span>.cloudinary ? window<\/span>.cloudinary.Cloudinary.new({\n\n\u00a0 cloud_name<\/span>: CLOUDINARY_CONFIG.cloudName,\n\n\u00a0 secure<\/span>: true<\/span>\n\n}) : null<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nReplace
your-cloud-name<\/code> with your actual Cloudinary cloud name.<\/p>\n\n\nNote:<\/strong>For client-side implementations, you only need the cloud name. API keys and secrets are only required for server-side uploads and sensitive operations.<\/p>\n<\/div>\n\n\n
Add any video of your choice to the videos folder. For experimentation, you can use these examples: demo-video<\/a> and hero-video<\/a>.<\/p>\n\n\n\n
Implement Lazy Loading for Videos<\/h2>\n\n\n\n
Lazy loading ensures videos don’t load until needed, saving bandwidth and improving initial page load times. There are three main approaches you can use:<\/p>\n\n\n\n
- \n
- Native Lazy Loading<\/strong><\/a>.<\/strong> Using HTML5’s built-in
loading=\"lazy\"<\/code> attribute.<\/li>\n\n\n\n- Intersection Observer API<\/strong><\/a>.<\/strong> JavaScript-based approach for advanced control.<\/li>\n\n\n\n
- Cloudinary SDK Lazy Loading<\/strong><\/a>.<\/strong> Automated optimization with intelligent loading.<\/li>\n<\/ul>\n\n\n\n
Let’s implement each approach step by step.<\/p>\n\n\n\n
Method 1: Native Lazy Loading<\/strong><\/h3>\n\n\n\n
Native lazy loading is the most straightforward approach, but it has some limitations. Let’s implement it by creating the base HTML structure.<\/p>\n\n\n\n
To create the base HTML structure, add this code snippet<\/a> to your
index.html<\/code>. Then add this CSS styles<\/a> to your css\/styles.css.<\/p>\n\n\n\nTest the Lazy Load Implementation<\/strong><\/h4>\n\n\n\n
- \n
- Open Chrome DevTools (F12) and go to the Network tab.<\/li>\n\n\n\n
- Refresh the page and don’t scroll yet.<\/li>\n\n\n\n
- Check the Network<\/strong> tab. You should only see the hero-demo video loading.<\/li>\n\n\n\n
- Scroll down towards the demo section.<\/li>\n\n\n\n
- Watch the Network<\/strong> tab. The lazy video should load when you get close (~1000px away).<\/li>\n\n\n\n
- Notice the timing. The
demo-video<\/code> loads automatically before you can see it.<\/li>\n<\/ol>\n\n\n\nYou should observe that the second video only loads when you scroll near it, saving bandwidth on initial page load.<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1753214131\/blog-How_to_Lazy_Load_and_Autoplay_Videos_Without_Killing_Your_Core_Web_Vitals-2.gif\")
Method 1: Native Lazy Loading<\/figcaption><\/figure>\n\n\n\n Method 2: Intersection Observer API<\/strong><\/h3>\n\n\n\n
While native lazy loading is simple, it offers limited control over when the video loads and provides no feedback on the loading process. For more precise control, real-time status updates, and coordination with autoplay, the Intersection Observer API is a powerful JavaScript-based solution.<\/p>\n\n\n\n
This method allows you to define exactly when a video should start loading based on its visibility within the viewport or a specified margin around it.<\/p>\n\n\n\n
Next, you should modify the index.html to set up the demonstration for the Intersection Observer. This includes a dedicated section for this method, status display elements to provide real-time feedback, and a video element that will be controlled by our JavaScript.<\/p>\n\n\n\n
Update the index.html file with this code snippet<\/a>. Then, add these specific styles<\/a> inside the css\/styles.css file for the new elements introduced in Method 2, particularly for the status display and its dynamic coloring. Some styles might be similar to Method 1.<\/p>\n\n\n\n
Implement JavaScript Logic<\/strong><\/h4>\n\n\n\n
This is where the Intersection Observer comes into play. You’ll write a script to observe the lazy-load video. When it’s about to enter the viewport (within a 200px<\/strong> margin), your script will dynamically load its source and attempt to autoplay it. It will also update the status display elements to show what’s happening.<\/p>\n\n\n\n
First, you must ensure your script waits for the HTML to be fully loaded before it tries to find elements on the page. You also need a way to check if the user’s browser even supports the Intersection Observer API.<\/p>\n\n\n\n
To do this, add the following code to your js\/main.js file. This sets up an event listener for when the page is ready and includes a helper function to check for Intersection Observer support. If it’s not supported, the status display will be updated accordingly.<\/p>\n\n\n
\/\/ js\/main.js - Method 2: Intersection Observer API<\/span>\n\ndocument<\/span>.addEventListener(\"DOMContentLoaded\"<\/span>, function<\/span> (<\/span>) <\/span>{\n\n\u00a0 console<\/span>.log(\"\ud83c\udfac Method 2: Intersection Observer loaded\"<\/span>);\n\n\u00a0 if<\/span> (!isIntersectionObserverSupported()) {\n\n\u00a0 \u00a0 console<\/span>.warn(\"\u26a0\ufe0f Intersection Observer not supported in this browser\"<\/span>);\n\n\u00a0 \u00a0 const<\/span> statusElement = document<\/span>.getElementById(\"observer-status\"<\/span>);\n\n\u00a0 \u00a0 if<\/span> (statusElement) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ This relies on updateStatus, which you'll add soon.<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ For now, you could use: statusElement.textContent = \"Browser not supported\";<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ statusElement.className = \"value error\";\u00a0<\/span>\n\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ We'll define updateStatus next to handle this more cleanly.<\/span>\n\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 const<\/span> distanceElem = document<\/span>.getElementById(\"observer-distance\"<\/span>);\n\n\u00a0 \u00a0 if<\/span> (distanceElem) distanceElem.textContent = \"-\"<\/span>;\n\n\u00a0 \u00a0 \/\/ The call to updateStatus will be fully functional after you add that function.<\/span>\n\n\u00a0 \u00a0 \/\/ For now, this structure prepares for it.<\/span>\n\n\u00a0 \u00a0 return<\/span>;\u00a0\n\n\u00a0 }\n\n\u00a0 \/\/ Initialize the Intersection Observer for lazy loading<\/span>\n\n\u00a0 setupIntersectionObserver(); \/\/ You'll define this function next.<\/span>\n\n});\n\nfunction<\/span> isIntersectionObserverSupported<\/span>(<\/span>) <\/span>{\n\n\u00a0 return<\/span> \"IntersectionObserver\"<\/span> in<\/span> window<\/span>;\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\nNote:<\/strong>The updateStatus call inside the if block will make more sense once you add the updateStatus function in the next step. For now, it sets the stage.<\/p>\n<\/div>\n\n\n
To give users clear feedback, you need functions to update the status messages (like “Loading…”, “Playing”) and the distance display. <\/p>\n\n\n\n
Add the
updateStatus<\/code> function to yourjs\/main.js<\/code>. This helper will change the text and apply a CSS class to the status element on your page, making it easy to see the current state.<\/p>\n\n\n\/\/...<\/span>\n\nfunction<\/span> updateStatus<\/span>(statusElement, text, className<\/span>) <\/span>{\n\n\u00a0 if<\/span> (!statusElement) return<\/span>;\n\n\u00a0 statusElement.textContent = text;\n\n\u00a0 const<\/span> classesToRemove = [\"not-loaded\"<\/span>, \"loading\"<\/span>, \"loaded\"<\/span>, \"playing\"<\/span>, \"error\"<\/span>, \"paused\"<\/span>];\n\n\u00a0 statusElement.classList.remove(...classesToRemove);\n\n\u00a0 if<\/span> (className) {\n\n\u00a0 \u00a0 statusElement.classList.add(className);\n\n\u00a0 }\n\n\u00a0 console<\/span>.log(`\ud83d\udcca Status updated: ${text}<\/span>`<\/span>);\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nNow that
updateStatus<\/code> is defined, you can complete the browser support check. Go back to yourDOMContentLoaded<\/code> listener and ensure theupdateStatus<\/code> call is present if the browser isn’t supported:<\/p>\n\n\n\/\/...<\/span>\n\n\/\/ Inside your DOMContentLoaded listener, update the if block:<\/span>\n\n\u00a0 if<\/span> (!isIntersectionObserverSupported()) {\n\n\u00a0 \u00a0 console<\/span>.warn(\"\u26a0\ufe0f Intersection Observer not supported in this browser\"<\/span>);\n\n\u00a0 \u00a0 const<\/span> statusElement = document<\/span>.getElementById(\"observer-status\"<\/span>);\n\n\u00a0 \u00a0 \/\/ NOW THIS WILL WORK:<\/span>\n\n\u00a0 \u00a0 if<\/span> (statusElement) updateStatus(statusElement, \"Browser not supported\"<\/span>, \"error\"<\/span>);\n\n\u00a0 \u00a0 const<\/span> distanceElem = document<\/span>.getElementById(\"observer-distance\"<\/span>);\n\n\u00a0 \u00a0 if<\/span> (distanceElem) distanceElem.textContent = \"-\"<\/span>;\n\n\u00a0 \u00a0 return<\/span>;\u00a0\n\n\u00a0 }<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nNext, add the
updateDistanceDisplay<\/code> function. This will calculate the distance of the video from the viewport and update the corresponding element on your page, visually indicating when the video is approaching the loading trigger point.<\/p>\n\n\n\/\/...<\/span>\n\n
- Intersection Observer API<\/strong><\/a>.<\/strong> JavaScript-based approach for advanced control.<\/li>\n\n\n\n
- First Input Delay<\/strong><\/a> (FID)<\/strong>. This measures interactivity, as heavy video processing can block the main thread, increasing input delay. <\/li>\n\n\n\n
- A local development server (Python, Node.js, or VS Code Live Server).<\/li>\n<\/ul>\n\n\n\n