🎉 hey, I shipped skillcraft.ai
It's like Reddit, but for tech courses. Discover what developers actually recommend.
Up to date
Published
2 min read

Improve PageSpeed Insights Score with Lazy Loading Iframes

How to save bandwidth and speed up your site by lazy-loading iframes

Lazy-loading images is pretty common these days, but did you know you can do the same thing with iframes?

By deferring offscreen iframes from being loaded until the user scrolls near them, you can significantly improve your site’s performance.

Let’s break down how to implement lazy-loading iframes, why it’s useful, and what browser support looks like.

Before and After: Adding Lazy Loading to Iframes

Here’s an iframe before adding lazy-loading:

<iframe
src="https://trevorlasn.substack.com/embed"
class="w-full"
height="320"
title="Trevor I. Lasn newsletter"
frameborder="0"
scrolling="no"
>
</iframe>

Now, let’s add the loading="lazy" attribute:

<iframe
loading="lazy"
src="https://trevorlasn.substack.com/embed"
class="w-full"
height="320"
title="Trevor I. Lasn newsletter"
frameborder="0"
scrolling="no"
>
</iframe>

That’s it! With just one attribute, the iframe will load only when the user scrolls near it.

Why Lazy-Load Iframes?

Iframes are often used to embed third-party content, like YouTube videos, social media posts, or ads. Most of this content doesn’t appear immediately in the user’s viewport. But when loaded eagerly, users still pay the cost of downloading the iframe’s data and JavaScript, even if they never scroll down to it.

For example, loading a YouTube embed upfront can pull in over 500 KB of resources that users might not even need. By lazy-loading iframes, you defer loading them until users scroll near them. This saves bandwidth and improves page performance, especially for mobile users or those on slower connections.

How Lazy Loading Works

When you add loading="lazy" to an iframe, the browser delays loading it until it’s close to the user’s viewport. This is particularly useful for content that appears below the fold.

Here’s an example:

<iframe
src="https://www.youtube.com/embed/YJGCZCaIZkQ"
loading="lazy"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>

Without lazy-loading, this iframe would load as soon as the page starts loading, even if the user never scrolls down to it. But with the loading="lazy attribute, it only loads when the user approaches it, saving bandwidth and improving your site’s Time to Interactive (TTI).

Browser Support

Lazy-loading for iframes is supported in most modern browsers:

  • Chrome: 77+
  • Edge: 79+
  • Firefox: 121+
  • Safari: 16.4+

This wide browser support means you can confidently implement lazy-loading without worrying about breaking your site for most users.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.


Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
5 min read

Add Auth to Astro 5 with Clerk in 5 Minutes

The simplest setup for adding Clerk authentication to your Astro project, with minimal code

Dec 18, 2024
Read article
Webdev
3 min read

CSS :has() - The Parent Selector We've Always Wanted

Transform your CSS with :has(), the game-changing selector that finally lets us style elements based on their children.

Dec 4, 2024
Read article
Webdev
3 min read

NPQ: Open source CLI tool that audits and protects your npm installs from malicious packages

A CLI tool that checks packages for security issues and social engineering attacks before they hit your project

Jul 26, 2025
Read article
Webdev
4 min read

Understanding Vue's Suspense

How the Suspense component manages async dependencies and improves loading states in Vue apps

Aug 23, 2024
Read article
Webdev
3 min read

HTML Details Element: The Native Accordion You're Not Using

Discover how the HTML details element can replace your JavaScript accordions and why it might be better than your current solution

Dec 10, 2024
Read article
Webdev
4 min read

The What, Why, and How of Using a Skeleton Loading Screen

Skeleton loading screens enhance user experience and make your app feel faster

Nov 12, 2020
Read article
Webdev
8 min read

Invisible columns in SQL

It’s a small feature, but it can make a big difference.

Aug 26, 2024
Read article
Webdev
13 min read

10 Essential Terminal Commands Every Developer Should Know

List of useful Unix terminal commands to boost your productivity. Here are some of my favorites.

Aug 21, 2024
Read article
Webdev
3 min read

The HTML Native Search Element

The search HTML element is a container that represents the parts of the web page with search functionality

Dec 2, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/lazy-loading-iframes. It was written by a human and polished using grammar tools for clarity.