Lazy Load Iframe

Keep Iframes and Your Website Speed

What This Component Solves

Most iframe embeds load instantly, even if the visitor never scrolls to them. That can trigger heavy third-party scripts too early, increase network work, and hurt speed metrics.

Lazy IFrame delays the embed until it is actually needed, so your above-the-fold experience stays lightweight and responsive.

Core Features

• Loads the iframe only when it enters view using IntersectionObserver

• Loads once per URL to avoid duplicate work

• Uses requestIdleCallback when available to mount during idle time

• Holds layout space to avoid layout shift while loading

• Works responsively inside Framer layouts

• No external dependencies

Loading Experience

Instead of a blank box, Lazy IFrame can show a minimal glass-style loader that looks like a lightweight dashboard placeholder. This makes the loading state feel intentional and premium, without distracting motion.

• Structured UI skeleton placeholder

• Subtle shimmer animation

• Customizable surface, accent, and shimmer speed

• Keeps the page stable while the iframe initializes

Work with me: https://www.upwork.com/freelancers/webflowzlatko

My website: zlatkomarjanovic.com

Insights: zlatkomarjanovic.com/blog

Follow me on X: https://x.com/thezlatkom

Follow me on Linkedin: https://www.linkedin.com/in/zlatkomarjanovic/