DEV Community

Rahil Khan
Rahil Khan

Posted on

Your Google Maps and YouTube embeds are slowing your homepage. Load them on click instead

A lot of small-business homepages embed a Google Map in the footer and a YouTube video in the middle. Each embed is an iframe that pulls in its own scripts, fonts and images, often more than the rest of the page combined, and it loads even for visitors who never scroll that far.

Two easy fixes, from least to most effort:

1. Lazy-load the iframe

Browsers support native lazy loading on iframes. Add one attribute and the embed waits until the visitor scrolls near it:

<iframe src="https://www.google.com/maps/embed?pb=..."
        width="600" height="400"
        loading="lazy"
        title="Map to our shop"
        style="border:0"></iframe>
Enter fullscreen mode Exit fullscreen mode

Keep the width/height so the layout doesn't jump when it loads, and add a title for screen readers.

2. Show a placeholder and load the real embed on click

For YouTube, show the thumbnail with a play button and only swap in the iframe when someone taps it:

<button class="yt" data-id="VIDEO_ID" aria-label="Play video">
  <img src="https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg"
       alt="" width="480" height="360" loading="lazy">
</button>
<script>
document.querySelectorAll('.yt').forEach(b => b.addEventListener('click', () => {
  const f = document.createElement('iframe');
  f.src = `https://www.youtube-nocookie.com/embed/${b.dataset.id}?autoplay=1`;
  f.width = 480; f.height = 360; f.allow = 'autoplay; encrypted-media';
  f.title = 'Video'; f.allowFullscreen = true;
  b.replaceWith(f);
}));
</script>
Enter fullscreen mode Exit fullscreen mode

For the map, a static screenshot of your location linked to https://maps.google.com/?q=Your+Business+Name often does the job just as well, and it opens the Maps app directly on phones.

How to check the difference

Run your homepage through PageSpeed Insights before and after. On sites with both embeds above the fold, the "Reduce unused JavaScript" warning usually shrinks a lot and the page becomes usable sooner on mobile.


NEXCOD builds and fixes fast websites for small businesses: https://nexcod.vercel.app · WhatsApp +1 289 902 5119

Top comments (0)