When a client approached us about slow load times and a poor Google PageSpeed score on their Divi-powered website, our first step was to run a full performance audit. The results immediately revealed a major bottleneck:

YouTube video embeds were dragging down the entire site.

Every embedded video was loading the full YouTube player (iframe, player UI, tracking scripts, thumbnails, JavaScript files) — even before a user interacted with the page. On pages with multiple videos, the site was loading several megabytes of unused JavaScript, resulting in:

• A PageSpeed score around 23
• Long initial load times
• Poor mobile performance
• Reduced Core Web Vitals metrics
  (especially First Contentful Paint and Total Blocking Time)

To solve this without compromising the client’s design or user experience, we implemented a lightweight, modern solution: Lite YouTube Embeds.

The Challenge

The client’s website relied on Divi’s Video module, which automatically outputs a YouTube <iframe>. While convenient, this approach forces the browser to download:

• base.js
• www-embed-player.js
• player framework scripts
• tracking resources
• styling assets

This added up to over 6 MB of third-party scripts across the homepage alone.

The goal was clear:

✔ Improve site speed
✔ Reduce unnecessary third-party requests
✔ Maintain the visual layout the client already loved
✔ Create a scalable solution for all current and future videos

Our Solution: Lite “Click-to-Play” YouTube Embeds

Instead of allowing YouTube to load heavy scripts on page load, we replaced each Divi video module with an optimized, custom-built click-to-play placeholder.

This approach loads:

🔹 Only a thumbnail image initially
🔹 A lightweight play button
🔹 The YouTube player only when clicked

This dramatically reduces JavaScript weight and improves performance.

Step-by-Step Implementation

1. Extracting the YouTube Video ID

Each video ID (e.g., AbCdEf123) allowed us to generate a clean thumbnail:

https://img.youtube.com/vi/AbCdEf123/hqdefault.jpg

We used this high-resolution thumbnail as the placeholder.

2. Replacing the Divi Video Module

We inserted a Divi Code Module with lightweight HTML:

<div class="yt-lite" data-video-id="AbCdEf123">
  <div class="yt-lite-thumb">
    <img src="https://img.youtube.com/vi/AbCdEf123/hqdefault.jpg" alt="Video thumbnail">
    <button class="yt-lite-play" aria-label="Play video">▶</button>
  </div>
</div>

3. Loading the Real Player Only When Needed

We added a small JavaScript file globally (once):

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.yt-lite').forEach(function(el) {
    el.addEventListener('click', function() {
      if (el.classList.contains('yt-loaded')) return;

      var videoId = el.dataset.videoId;
      var iframe = document.createElement('iframe');
      iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('allowfullscreen', '1');
      iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
      
      el.innerHTML = '';
      el.classList.add('yt-loaded');
      el.appendChild(iframe);
    });
  });
});
</script>

This ensured the heavy YouTube embed loads only on click — not on page load.

4. Styling the Lightweight Video Frame

We added responsive CSS to match Divi’s design standards:

.yt-lite {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  cursor: pointer;
  overflow: hidden;
}

.yt-lite-thumb,
.yt-lite iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.yt-lite-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yt-lite-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  padding: 14px 20px;
  font-size: 24px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  cursor: pointer;
}

The final result looked exactly like Divi’s video module — but loaded instantly.

The Results

Within minutes of replacing the heavy embeds, we re-tested the staging site.

Performance improved from a score of 23 → 65,

without adding a single optimization plugin.

More importantly:

• The homepage loaded much faster
• Mobile experience improved noticeably
• JavaScript execution time dropped significantly
• Largest Contentful Paint improved
• Visitors now get a smoother, cleaner experience

All while the videos still played perfectly once clicked.

Conclusion

By replacing Divi’s standard YouTube embeds with lightweight click-to-play placeholders, we delivered:

✔ Better performance
✔ Cleaner loading experience
✔ Lower third-party script overhead
✔ More control over visuals
✔ A scalable solution that can be applied to any video on the site

This small change created a major improvement in website speed and positioned the client for better SEO, stronger Core Web Vitals, and a more professional user experience.

If your Divi website relies heavily on video content, this optimization is one of the highest-impact upgrades you can make — and it can be implemented in under an hour.