标签：#lazyload

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry . 🎭 The Recurring Villain If you've built WordPress sites long enough, you know this bug. It doesn't show up as an error in your console. It doesn't throw a fatal exception. It just quietly sits there, page after page, client after client — and it's called video bloat . Nine years into web development, I lost count of how many times a client sent me a site with a message like "it's just... slow." And nine times out of ten, when I opened DevTools and checked the waterfall, the story was the same: three, four, sometimes ten embedded YouTube videos, each one dragging in its own iframe, its own set of scripts, its own chunk of megabytes — all loading the second the page rendered, whether the visitor scrolled past them or not. One video embed alone can pull in 500KB–1MB+ before a user even presses play. Multiply that by a landing page stacked with testimonials, product demos, and a hero video, and you've got a page that fights your Core Web Vitals before it's even finished loading. 🔁 The Manual Fix (Every. Single. Time.) For years, my solution was the same tedious ritual: Find every video embed on the page. Replace the iframe with a static thumbnail image. Write a bit of custom JavaScript to swap the thumbnail for the real embed on click or scroll. Repeat it for YouTube. Repeat it again for Vimeo, because Vimeo's oEmbed API works differently. Repeat it again for self-hosted <video> tags, because now you're dealing with <source> tags instead of iframes. Test it across whatever page builder the client was using — Elementor, Divi, WPBakery, or straight-up Gutenberg blocks — because every one of them nests the video markup slightly differently. It worked. But it was never reusable. Every project meant writing the lazy-load script again, half from memory, half copy-pasted from my own old projects, tweaked just enough to fit the new theme's markup. It was the same bug, wearing a different site's c