Featured image of post Boosting Initial Page Speeds with Lazy-Loaded Frames and Images Featured image of post Boosting Initial Page Speeds with Lazy-Loaded Frames and Images
Performance

Boosting Initial Page Speeds with Lazy-Loaded Frames and Images

Learn how to use native loading="lazy" on images and third-party iframes to reduce initial payloads and improve First Contentful Paint (FCP).

  1. Home
  2. web
  3. Boosting Initial Page Speeds with Lazy-Loaded Frames and Images

Introduction

An effective but frequently overlooked strategy for optimizing web page speeds is deferring off-screen asset loading.

By default, when a user loads a web page, the browser immediately requests all images and <iframe> elements (like YouTube embeds, interactive maps, social widgets, or advertising scripts) on the page, even if they are located far below the fold. This concurrent downloading blocks the main thread and slows down your page’s First Contentful Paint (FCP) time.

The HTML standard native lazy-loading (loading="lazy") addresses this issue. This article explains how to configure lazy-loading for images and iframes and notes key optimization rules.

1. What is Native Lazy-Loading?

Native lazy-loading allows you to defer the loading of off-screen images and iframes until the user scrolls near them, simply by adding an HTML attribute.

How It Works

  • Without Lazy-Loading (Default): The browser downloads all images and iframe scripts immediately on page load, even those hidden at the bottom of the page.
  • With Native Lazy-Loading (loading="lazy"): The browser only downloads assets inside or near the initial viewport, delaying the rest until the user scrolls down.

2. Implementation Examples

① Lazy-Loading Images

Add the loading="lazy" attribute directly to your <img> tag:

<!-- Lazy-loaded image -->
<img src="large-photo.jpg" 
     alt="Detailed product showcase" 
     width="800" 
     height="600" 
     loading="lazy">
  • Important: Always specify explicit width and height attributes (aspect ratios) on lazy-loaded images. Without these dimensions, the browser assumes the image height is 0 until it loads, which can cause elements to jump around once the image is retrieved. This jarring shift is flagged as Cumulative Layout Shift (CLS).

② Lazy-Loading iframes (Embedded Content)

You can apply the same attribute to third-party iframes, such as YouTube embeds or Google Maps:

<!-- Lazy-loaded YouTube video embed -->
<iframe src="https://www.youtube.com/embed/example" 
        width="560" 
        height="315" 
        loading="lazy" 
        title="Product Demo Video"
        frameborder="0" 
        allowfullscreen>
</iframe>
  • The Benefit: Third-party iframes often load heavy JavaScript libraries. Deferring these requests until the user scrolls to them improves the page’s initial block time (TBT).

3. When NOT to Use Lazy-Loading

Do not apply loading="lazy" to all images on your page. There is an important exception:

Above-the-Fold (Hero) Images

Never apply loading="lazy" to images in the initial viewport, such as your main header background or featured blog posts.

  • Why: The browser must calculate the element’s position before starting the download. For above-the-fold images, this extra processing step delays the image download, hurting your Largest Contentful Paint (LCP) score.

Optimizing Above-the-Fold Images

Instead of lazy-loading, remove the attribute and consider adding a preload link inside your HTML <head> tag to prioritize the LCP asset:

<!-- Preloading critical above-the-fold images -->
<link rel="preload" as="image" href="hero-image.jpg">

Conclusion

Implementing native lazy-loading is a straightforward way to improve initial page load performance.

  1. Apply loading="lazy" to all images and iframes located below the fold.
  2. Specify explicit width and height dimensions to prevent layout shifts (CLS).
  3. Do not lazy-load above-the-fold images; use preloading instead.

Incorporate these practices into your project templates to build high-performance web pages.

© 2022 - 2026 Commentary of Takao