Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen <iframe> (2)

Pre-study

<iframe>: The Inline Frame element
Window: load event
AbortController

Limitations of Lazy-Loading <iframe>

Based on the previous post Optimize Core Web Vitals - FCP and LCP: Lazy-Loading Offscreen <iframe>, we can defer loading the heavy resources of an HTML <iframe>. However, when the <iframe> contains many resources to load, it can block user interactions with other elements or take a long time to display its content — both of which negatively impact the user experience.

Solution: Delaying <iframe> resource load after page load

Although the resources of an offscreen <iframe> are given lower loading priority, we still need to ensure they are loaded before the user interacts with it.

According to the article Window: load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images, except those that are loaded lazily.

The idea is to initially render the <iframe> with an empty src attribute. Once the page has fully loaded, we then update the src with the actual URL. This approach ensures that the iframe’s resources are only loaded after all critical resources have finished loading, preventing them from blocking the initial rendering phase.

Additionally, because the iframe’s content is loaded before the user interacts with it, there's no delay when the user interact with it, resulting in a smoother experience.

Here is an example of how to implement it using React:

import { useEffect, useState } from 'react';

const iframeSrc = `${MY_AUTH_URL}/sso/iframePage.xhtml`;

const LazyIframeOnLoad = () => {
  const [src, setSrc] = useState('');
  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const handleLoad = () => {
      setSrc(iframeSrc);
    };

    window.addEventListener('load', handleLoad, { signal });
    return () => controller.abort();
  }, []);

  return (
    <iframe
      src={src}
      style={{ display: 'none' }}
      id='my-iframe'
      title='My iframe'
    />
  );
};

Adjusting Resource Load Order: Without Lazy-Loading vs. Delaying resource load after page load

By using this new approach method to load <iframe> resources after the page has fully loaded—instead of simply adding the loading="lazy" or omitting it altogether, we ensure that critical resources are prioritized during the initial load. At the same time, the iframe’s content is loaded before the user interacts with it.

As a result, there is no noticeable waiting time—either during the initial page load or when the user clicks a button or performs any action that requires the iframe’s resources.

Delaying resource load after page load