Building a Lazy-Loading Video Grid for Mobile Performance

A page with 30 YouTube iframe embeds loads 26MB of JavaScript and makes 467 network requests. Here's how I reduced that to 1.8MB and 42 requests on TopVideoHub . The Problem Each YouTube iframe embed loads: ~800KB of JavaScript 15+ network requests The full YouTube player interface Multiply by 30 videos on a category page and you get a page that's unusable on mobile connections — exactly where most of our Asia-Pacific users browse. The Facade Pattern Replace each iframe with a static thumbnail and CSS play button. The real iframe loads only when clicked. HTML Structure <div class= "video-grid" > <article class= "video-card" data-video-id= "dQw4w9WgXcQ" > <div class= "video-facade" > <img src= "https://i.ytimg.com/vi/dQw4w9WgXcQ/mqdefault.jpg" alt= "Video title here" loading= "lazy" width= "320" height= "180" decoding= "async" > <button class= "play-btn" aria-label= "Play video" > <svg width= "68" height= "48" viewBox= "0 0 68 48" > <path class= "play-bg" d= "M66.5 7.7s-.7-4.7-2.8-6.8C6