How I Boosted a Client’s Page Speed by 50+ points with One Simple Fix

Sometimes the slowest pages belong to the prettiest sites. A client’s homepage looked fantastic — big hero images, clean layout, great storytelling — but their desktop PageSpeed score was dragging in the 30s.

After a quick audit, I found the culprit: five YouTube embeds sitting right on the homepage. Each one was quietly loading megabytes of extra scripts and thumbnails before a single visitor ever hit “play.”

The Problem: Heavy YouTube Embeds

Webflow’s default YouTube component drops a full <iframe> into your page. That means every video calls the YouTube player, analytics, and thumbnail images immediately on load — five times over in this case.

Result: sluggish render, jumpy scroll, poor Core Web Vitals.

‍

‍

‍

‍

The Solution: Lazy Loading with a Lightweight Library

I swapped the default embeds for a smart, minimalist approach: Lite YouTube Embed by Paul Irish (https://github.com/paulirish/lite-youtube-embed).

This library renders a static thumbnail and play button, then loads the actual YouTube iframe only after someone clicks play. No autoplaying bloat, no five-megabyte payload before the first scroll.

Implementation was simple: a single script import and a quick markup change.

<div class="hero-video-block">
  <lite-youtube
    class="hero-lite-youtube"
    videoid="sUs-LuI_-z0"
    videotitle="Video Title"
    posterquality="maxresdefault"
    style="background-image: url('https://i.ytimg.com/vi/sUs-LuI_-z0/hqdefault.jpg');"
  >
    <a
      href="https://www.youtube.com/watch?v=sUs-LuI_-z0"
      class="hero-lyt-playbtn"
      title="Video Title"
    ></a>
  </lite-youtube>

  <div class="hero-video-title">
    Video Title Here
  </div>
</div>

<style>
.hero-video-block {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.hero-lite-youtube {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border: none;
}

.hero-video-title {
  margin-top: 0.75em;
  font-weight: 600;
  color: white;
  text-align: center;
  position: absolute;
  top:0px;
  left:20px;
  z-index: 2;
}

/* fallback styling for no-JS environments */
.hero-lite-youtube-fallback {
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

.hero-lite-youtube-fallback::before {
  display: block;
  content: '';
  border: solid transparent;
  border-width: 2em 0 2em 3em;
  border-left-color: red;
  transition: border-left-color 0.2s ease;
}

.hero-lite-youtube-fallback:hover::before {
  border-left-color: #fff;
}

.hero-lite-youtube-fallback:focus {
  outline: 2px solid red;
}
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.hero-video-block').forEach(block => {
      const title = block.querySelector('.hero-video-title');
      if (title) {
        block.addEventListener('click', () => {
          title.style.display = 'none';
        });
      }
    });
  });
</script>

‍

The Gotcha: Hidden ≠ Removed

Here’s where I tripped up: At first, I hid the YouTube videos with display-none styling, assuming that would stop them from loading. PageSpeed still showed no improvement.
Turns out, iframes in your source code load resources even when invisible. Until you actually remove them, browsers still fetch everything.

The Results

Once the default embeds were gone and Lite YouTube Embed was in place, the difference was instant.
Desktop PageSpeed Insights jumped from the 30s to the 80s.
Load times dropped, LCP and TBT scores improved, and the site felt snappier across every device.

‍

‍

Key Takeaways

• Don’t just hide embeds — remove them from your DOM.
• Use lightweight libraries like lite-youtube-embed to defer loading.
• Always verify changes by viewing your source and re-running PageSpeed Insights.
• Faster pages = better user experience + stronger SEO performance.

Resources:

• Lite YouTube Embed GitHub Repo: https://github.com/paulirish/lite-youtube-embed

• Google PageSpeed Insights: https://pagespeed.web.dev/

• Human Goodkind Designs — Site Health & Wellness Diagnostic (link)

Want a Faster Site?

If your homepage leans on YouTube videos (or any heavy embeds), this one change can free up serious performance gains.
I run detailed Page Speed Audits and full Site Health & Wellness Diagnostics for clients who want cleaner code, better SEO, and happier visitors.
Let’s make your site move like it means it. → Book a Quick Consultation

‍