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:
Key takeaways
- Standard YouTube embeds can slow down WordPress and Divi pages by loading heavy scripts too early.
- Lite click-to-play video embeds improve perceived speed by loading the full player only when needed.
- Website performance supports SEO, user experience and conversion, especially on mobile.
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.jswww-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.
Frequently asked questions
Why do YouTube embeds slow down WordPress websites?
Standard YouTube embeds can load iframe code, scripts, tracking resources and player assets before a visitor clicks play, which adds unnecessary weight to the page.
What is a lite YouTube embed?
A lite embed shows a lightweight preview first and only loads the full YouTube player when the visitor clicks. This can improve initial page speed.
Does website speed affect SEO?
Yes. Speed and Core Web Vitals can influence user experience and search performance, especially on mobile devices.
Related reading
If you found this useful, these related articles continue the same hospitality website and SEO theme:
- JSON-LD Schema for Hotels — technical SEO for hotels.
- Backlinks Explained for Guesthouses — SEO visibility for accommodation businesses.
