component
Lazy Load Iframe
By Zlatko Marjanović
Details
- Zlatko MarjanovićAuthor
- componentType
- 2026-03-02Published
- 2026-09-10Updated
- 2026-02-21Added
- LoadersCategories
Summary
Keep Iframes and Your Website Speed
Description
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/
Introduction
Keep Iframes and Your Web Speed
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #4430