[{"data":1,"prerenderedAt":1097},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-iframes":3,"surroundings:\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-iframes":1088},{"id":4,"title":5,"body":6,"description":1066,"extension":1067,"meta":1068,"navigation":1081,"path":1082,"seo":1083,"stem":1086,"__hash__":1087},"content\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-iframes\u002Findex.md","Lazy-Loading iframes",{"type":7,"value":8,"toc":1048},"minimark",[9,14,29,42,130,135,168,172,178,184,190,196,200,205,308,323,327,412,632,636,651,655,658,744,841,845,848,852,855,859,865,869,875,879,905,909,915,921,931,937,941,953,962,975,984,993,1006,1010,1033,1038,1041,1044],[10,11,13],"h1",{"id":12},"how-to-lazy-load-iframes","How to Lazy-Load iframes",[15,16,17,18,23,24,28],"p",{},"This guide extends ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002F","Lazy-Loading Images Without Hurting LCP",", part of ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002F","Image & Media Optimization",". An iframe is a whole document: a YouTube embed loads its own HTML, several hundred kilobytes of JavaScript, fonts and a poster image; a map embed loads tiles and scripts; a social post loads a widget runtime. Each one competes with your own page for network and CPU, and much of that work happens on the main thread of the same process for same-site or non-isolated frames.",[15,30,31,32,36,37,41],{},"Most embeds sit below the fold, and many are never scrolled to. Deferring them is one of the highest-return fixes on content pages. Browsers support ",[33,34,35],"code",{},"loading=\"lazy\""," on iframes natively, and a ",[38,39,40],"em",{},"facade"," — a static image that swaps in the real iframe on click — goes further by avoiding the embed entirely until the user asks for it.",[15,43,44],{},[45,46,52,53,52,60,52,64,52,67,52,76,52,82,52,89,52,97,52,102,52,105,52,111,52,115,52,119,52,126,52],"svg",{"viewBox":47,"width":48,"role":49,"ariaLabel":50,"style":51},"0 0 760 163","100%","img","Bar chart of initial page transfer size with eager iframes, native lazy iframes and click-to-load facades.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[54,55],"rect",{"className":56,"x":58,"y":58,"width":48,"height":48,"fill":59},[57],"svg-canvas","0","#ffffff",[61,62,63],"title",{},"Initial transfer for one article with three embeds",[65,66,50],"desc",{},[54,68],{"x":69,"y":69,"width":70,"height":71,"rx":72,"fill":73,"stroke":74,"style":75},"1","758","161","10","none","currentColor","stroke-opacity:0.18",[77,78,63],"text",{"x":79,"y":80,"fill":74,"style":81},"28.0","34.0","font-size:16px;font-weight:700",[77,83,88],{"x":84,"y":85,"fill":74,"style":86,"textAnchor":87},"160.3","70.0","font-size:13px","end","Eager iframes",[54,90],{"x":91,"y":92,"width":93,"height":94,"rx":95,"fill":73,"stroke":74,"style":96},"172.3","56.0","495.7","19","3","fill-opacity:0.7;stroke-opacity:0.35",[77,98,101],{"x":99,"y":85,"fill":74,"style":100},"674.0","font-size:12px;font-weight:600","2840KB",[77,103,35],{"x":84,"y":104,"fill":74,"style":86,"textAnchor":87},"101.0",[54,106],{"x":91,"y":107,"width":108,"height":94,"rx":95,"fill":109,"stroke":109,"style":110},"87.0","195.5","#0466c8","fill-opacity:0.55;stroke-opacity:0.9",[77,112,114],{"x":113,"y":104,"fill":74,"style":100},"373.8","1120KB",[77,116,118],{"x":84,"y":117,"fill":74,"style":86,"textAnchor":87},"132.0","Facades (click to load)",[54,120],{"x":91,"y":121,"width":122,"height":94,"rx":95,"fill":123,"stroke":124,"style":125},"118.0","45.4","#ffc300","#b8860b","fill-opacity:0.7;stroke-opacity:0.9",[77,127,129],{"x":128,"y":117,"fill":74,"style":100},"223.7","260KB",[131,132,134],"h2",{"id":133},"rapid-diagnosis","Rapid Diagnosis",[136,137,138,150,156,162],"ul",{},[139,140,141,145,146,149],"li",{},[142,143,144],"strong",{},"List iframes"," with ",[33,147,148],{},"document.querySelectorAll('iframe')"," and note which are below the fold.",[139,151,152,155],{},[142,153,154],{},"Group requests by domain"," in the Network panel; youtube.com, googlevideo, maps.googleapis and social widgets are typical heavy hitters.",[139,157,158,161],{},[142,159,160],{},"Check main-thread activity."," In the Performance panel, look for long tasks attributed to embed scripts during load.",[139,163,164,167],{},[142,165,166],{},"Check whether the embed is ever used."," Analytics on play or interaction rates show how much of the cost is wasted.",[131,169,171],{"id":170},"root-cause-analysis","Root Cause Analysis",[15,173,174,177],{},[142,175,176],{},"1. Iframes load eagerly by default."," Without an attribute, every iframe in the HTML starts loading immediately.",[15,179,180,183],{},[142,181,182],{},"2. Embeds are heavy."," A single video embed can exceed 1MB of transfer before anyone presses play.",[15,185,186,189],{},[142,187,188],{},"3. Third-party scripts run early."," Embed runtimes parse and execute JavaScript during the critical load window.",[15,191,192,195],{},[142,193,194],{},"4. Low interaction rates."," Most visitors never play the video or open the map, so the cost buys nothing for them.",[131,197,199],{"id":198},"step-by-step-resolution","Step-by-Step Resolution",[201,202,204],"h3",{"id":203},"_1-add-loadinglazy-to-below-the-fold-iframes","1. Add loading=\"lazy\" to below-the-fold iframes",[206,207,212],"pre",{"className":208,"code":209,"language":210,"meta":211,"style":211},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Ciframe src=\"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FVIDEO_ID\"\n        loading=\"lazy\" width=\"560\" height=\"315\" title=\"Product demo video\"\n        allow=\"accelerometer; encrypted-media; picture-in-picture\" allowfullscreen>\u003C\u002Fiframe>\n\u003C!-- trade-off: the browser still loads the full embed once it is near the\n     viewport, even if the user never plays it; facades avoid that cost. -->\n","html","",[33,213,214,238,273,295,302],{"__ignoreMap":211},[215,216,219,223,227,231,234],"span",{"class":217,"line":218},"line",1,[215,220,222],{"class":221},"saISM","\u003C",[215,224,226],{"class":225},"sZBmE","iframe",[215,228,230],{"class":229},"sPXB4"," src",[215,232,233],{"class":221},"=",[215,235,237],{"class":236},"sZ8jY","\"https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002FVIDEO_ID\"\n",[215,239,241,244,246,249,252,254,257,260,262,265,268,270],{"class":217,"line":240},2,[215,242,243],{"class":229},"        loading",[215,245,233],{"class":221},[215,247,248],{"class":236},"\"lazy\"",[215,250,251],{"class":229}," width",[215,253,233],{"class":221},[215,255,256],{"class":236},"\"560\"",[215,258,259],{"class":229}," height",[215,261,233],{"class":221},[215,263,264],{"class":236},"\"315\"",[215,266,267],{"class":229}," title",[215,269,233],{"class":221},[215,271,272],{"class":236},"\"Product demo video\"\n",[215,274,276,279,281,284,287,290,292],{"class":217,"line":275},3,[215,277,278],{"class":229},"        allow",[215,280,233],{"class":221},[215,282,283],{"class":236},"\"accelerometer; encrypted-media; picture-in-picture\"",[215,285,286],{"class":229}," allowfullscreen",[215,288,289],{"class":221},">\u003C\u002F",[215,291,226],{"class":225},[215,293,294],{"class":221},">\n",[215,296,298],{"class":217,"line":297},4,[215,299,301],{"class":300},"sjfSM","\u003C!-- trade-off: the browser still loads the full embed once it is near the\n",[215,303,305],{"class":217,"line":304},5,[215,306,307],{"class":300},"     viewport, even if the user never plays it; facades avoid that cost. -->\n",[15,309,310,311,314,315,318,319,322],{},"Always include ",[33,312,313],{},"width"," and ",[33,316,317],{},"height"," (or an ",[33,320,321],{},"aspect-ratio"," on a wrapper) to reserve space and prevent layout shifts.",[201,324,326],{"id":325},"_2-replace-video-embeds-with-a-facade","2. Replace video embeds with a facade",[206,328,330],{"className":208,"code":329,"language":210,"meta":211,"style":211},"\u003Cbutton class=\"yt-facade\" data-id=\"VIDEO_ID\" aria-label=\"Play: Product demo video\"\n        style=\"aspect-ratio:16\u002F9;background:#000 url(https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FVIDEO_ID\u002Fhqdefault.jpg) center\u002Fcover\">\n  \u003Cspan class=\"play-icon\" aria-hidden=\"true\">\u003C\u002Fspan>\n\u003C\u002Fbutton>\n",[33,331,332,363,375,403],{"__ignoreMap":211},[215,333,334,336,339,342,344,347,350,352,355,358,360],{"class":217,"line":218},[215,335,222],{"class":221},[215,337,338],{"class":225},"button",[215,340,341],{"class":229}," class",[215,343,233],{"class":221},[215,345,346],{"class":236},"\"yt-facade\"",[215,348,349],{"class":229}," data-id",[215,351,233],{"class":221},[215,353,354],{"class":236},"\"VIDEO_ID\"",[215,356,357],{"class":229}," aria-label",[215,359,233],{"class":221},[215,361,362],{"class":236},"\"Play: Product demo video\"\n",[215,364,365,368,370,373],{"class":217,"line":240},[215,366,367],{"class":229},"        style",[215,369,233],{"class":221},[215,371,372],{"class":236},"\"aspect-ratio:16\u002F9;background:#000 url(https:\u002F\u002Fi.ytimg.com\u002Fvi\u002FVIDEO_ID\u002Fhqdefault.jpg) center\u002Fcover\"",[215,374,294],{"class":221},[215,376,377,380,382,384,386,389,392,394,397,399,401],{"class":217,"line":275},[215,378,379],{"class":221},"  \u003C",[215,381,215],{"class":225},[215,383,341],{"class":229},[215,385,233],{"class":221},[215,387,388],{"class":236},"\"play-icon\"",[215,390,391],{"class":229}," aria-hidden",[215,393,233],{"class":221},[215,395,396],{"class":236},"\"true\"",[215,398,289],{"class":221},[215,400,215],{"class":225},[215,402,294],{"class":221},[215,404,405,408,410],{"class":217,"line":297},[215,406,407],{"class":221},"\u003C\u002F",[215,409,338],{"class":225},[215,411,294],{"class":221},[206,413,417],{"className":414,"code":415,"language":416,"meta":211,"style":211},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","document.addEventListener('click', (e) => {\n  const btn = e.target.closest('.yt-facade');\n  if (!btn) return;\n  const f = document.createElement('iframe');\n  f.src = `https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002F${btn.dataset.id}?autoplay=1`;\n  f.allow = 'autoplay; encrypted-media; picture-in-picture';\n  f.allowFullscreen = true; f.title = btn.getAttribute('aria-label');\n  f.style.cssText = 'width:100%;aspect-ratio:16\u002F9;border:0';\n  btn.replaceWith(f);\n});\n\u002F\u002F trade-off: the user waits for the embed to load after clicking (often under a\n\u002F\u002F second); warm the connection with preconnect on hover to shorten it.\n","javascript",[33,418,419,451,476,496,518,547,560,589,602,614,620,626],{"__ignoreMap":211},[215,420,421,424,428,431,434,437,441,444,448],{"class":217,"line":218},[215,422,423],{"class":221},"document.",[215,425,427],{"class":426},"smZ65","addEventListener",[215,429,430],{"class":221},"(",[215,432,433],{"class":236},"'click'",[215,435,436],{"class":221},", (",[215,438,440],{"class":439},"sQw3B","e",[215,442,443],{"class":221},") ",[215,445,447],{"class":446},"sPARh","=>",[215,449,450],{"class":221}," {\n",[215,452,453,456,459,462,465,468,470,473],{"class":217,"line":240},[215,454,455],{"class":446},"  const",[215,457,458],{"class":229}," btn",[215,460,461],{"class":446}," =",[215,463,464],{"class":221}," e.target.",[215,466,467],{"class":426},"closest",[215,469,430],{"class":221},[215,471,472],{"class":236},"'.yt-facade'",[215,474,475],{"class":221},");\n",[215,477,478,481,484,487,490,493],{"class":217,"line":275},[215,479,480],{"class":446},"  if",[215,482,483],{"class":221}," (",[215,485,486],{"class":446},"!",[215,488,489],{"class":221},"btn) ",[215,491,492],{"class":446},"return",[215,494,495],{"class":221},";\n",[215,497,498,500,503,505,508,511,513,516],{"class":217,"line":297},[215,499,455],{"class":446},[215,501,502],{"class":229}," f",[215,504,461],{"class":446},[215,506,507],{"class":221}," document.",[215,509,510],{"class":426},"createElement",[215,512,430],{"class":221},[215,514,515],{"class":236},"'iframe'",[215,517,475],{"class":221},[215,519,520,523,525,528,531,534,537,539,542,545],{"class":217,"line":304},[215,521,522],{"class":221},"  f.src ",[215,524,233],{"class":446},[215,526,527],{"class":236}," `https:\u002F\u002Fwww.youtube-nocookie.com\u002Fembed\u002F${",[215,529,530],{"class":221},"btn",[215,532,533],{"class":236},".",[215,535,536],{"class":221},"dataset",[215,538,533],{"class":236},[215,540,541],{"class":221},"id",[215,543,544],{"class":236},"}?autoplay=1`",[215,546,495],{"class":221},[215,548,550,553,555,558],{"class":217,"line":549},6,[215,551,552],{"class":221},"  f.allow ",[215,554,233],{"class":446},[215,556,557],{"class":236}," 'autoplay; encrypted-media; picture-in-picture'",[215,559,495],{"class":221},[215,561,563,566,568,571,574,576,579,582,584,587],{"class":217,"line":562},7,[215,564,565],{"class":221},"  f.allowFullscreen ",[215,567,233],{"class":446},[215,569,570],{"class":229}," true",[215,572,573],{"class":221},"; f.title ",[215,575,233],{"class":446},[215,577,578],{"class":221}," btn.",[215,580,581],{"class":426},"getAttribute",[215,583,430],{"class":221},[215,585,586],{"class":236},"'aria-label'",[215,588,475],{"class":221},[215,590,592,595,597,600],{"class":217,"line":591},8,[215,593,594],{"class":221},"  f.style.cssText ",[215,596,233],{"class":446},[215,598,599],{"class":236}," 'width:100%;aspect-ratio:16\u002F9;border:0'",[215,601,495],{"class":221},[215,603,605,608,611],{"class":217,"line":604},9,[215,606,607],{"class":221},"  btn.",[215,609,610],{"class":426},"replaceWith",[215,612,613],{"class":221},"(f);\n",[215,615,617],{"class":217,"line":616},10,[215,618,619],{"class":221},"});\n",[215,621,623],{"class":217,"line":622},11,[215,624,625],{"class":300},"\u002F\u002F trade-off: the user waits for the embed to load after clicking (often under a\n",[215,627,629],{"class":217,"line":628},12,[215,630,631],{"class":300},"\u002F\u002F second); warm the connection with preconnect on hover to shorten it.\n",[201,633,635],{"id":634},"_3-warm-connections-on-intent","3. Warm connections on intent",[15,637,638,639,642,643,646,647,650],{},"On ",[33,640,641],{},"pointerenter"," or ",[33,644,645],{},"focus"," of a facade, inject ",[33,648,649],{},"\u003Clink rel=\"preconnect\">"," for the embed's domains, so the click-to-play delay is shorter.",[201,652,654],{"id":653},"_4-use-static-images-for-maps","4. Use static images for maps",[15,656,657],{},"A static map image (from the provider's static API or a self-generated screenshot) linking to the interactive map is often enough. Load the interactive embed only on click.",[15,659,660],{},[45,661,52,664,52,667,52,670,52,672,52,675,52,677,52,683,52,688,52,693,52,698,52,700,52,703,52,706,52,709,52,712,52,715,52,719,52,723,52,725,52,729,52,731,52,734,52,736,52,739,52,741,52],{"viewBox":662,"width":48,"role":49,"ariaLabel":663,"style":51},"0 0 760 228","Comparison of the costs and benefits of native iframe lazy loading and click-to-load facades.",[54,665],{"className":666,"x":58,"y":58,"width":48,"height":48,"fill":59},[57],[61,668,669],{},"Native lazy iframe vs facade",[65,671,663],{},[54,673],{"x":69,"y":69,"width":70,"height":674,"rx":72,"fill":73,"stroke":74,"style":75},"226",[77,676,669],{"x":79,"y":80,"fill":74,"style":81},[54,678],{"x":79,"y":92,"width":679,"height":680,"rx":681,"fill":123,"stroke":124,"style":682},"340.0","150.0","6","fill-opacity:0.24;stroke-opacity:0.9",[77,684,35],{"x":685,"y":686,"fill":74,"style":687},"42.0","82.0","font-size:14px;font-weight:700",[77,689,692],{"x":685,"y":690,"fill":74,"style":691},"108.0","font-size:12.5px;font-weight:700","•",[77,694,697],{"x":92,"y":690,"fill":74,"style":695,"textAnchor":696},"font-size:12.5px","start","One attribute, no JavaScript",[77,699,692],{"x":685,"y":117,"fill":74,"style":691},[77,701,702],{"x":92,"y":117,"fill":74,"style":695,"textAnchor":696},"Full embed loads when near the viewport",[77,704,692],{"x":685,"y":705,"fill":74,"style":691},"156.0",[77,707,708],{"x":92,"y":705,"fill":74,"style":695,"textAnchor":696},"Instant playback when user arrives",[77,710,692],{"x":685,"y":711,"fill":74,"style":691},"180.0",[77,713,714],{"x":92,"y":711,"fill":74,"style":695,"textAnchor":696},"Cost paid by everyone who scrolls past",[54,716],{"x":717,"y":92,"width":679,"height":680,"rx":681,"fill":109,"stroke":109,"style":718},"392.0","fill-opacity:0.14;stroke-opacity:0.9",[77,720,722],{"x":721,"y":686,"fill":74,"style":687},"406.0","Facade",[77,724,692],{"x":721,"y":690,"fill":74,"style":691},[77,726,728],{"x":727,"y":690,"fill":74,"style":695,"textAnchor":696},"420.0","Small script and a poster image",[77,730,692],{"x":721,"y":117,"fill":74,"style":691},[77,732,733],{"x":727,"y":117,"fill":74,"style":695,"textAnchor":696},"Embed loads only on click",[77,735,692],{"x":721,"y":705,"fill":74,"style":691},[77,737,738],{"x":727,"y":705,"fill":74,"style":695,"textAnchor":696},"Short delay before playback starts",[77,740,692],{"x":721,"y":711,"fill":74,"style":691},[77,742,743],{"x":727,"y":711,"fill":74,"style":695,"textAnchor":696},"Cost paid only by users who engage",[15,745,746],{},[45,747,52,750,52,753,52,756,52,758,52,775,52,778,52,780,52,784,52,790,52,795,52,798,52,802,52,805,52,808,52,812,52,815,52,818,52,822,52,825,52,833,52,837,52],{"viewBox":748,"width":48,"role":49,"ariaLabel":749,"style":51},"0 0 760 133","Sequence of a click-to-load facade from initial render to a playing embed.",[54,751],{"className":752,"x":58,"y":58,"width":48,"height":48,"fill":59},[57],[61,754,755],{},"Facade lifecycle",[65,757,749],{},[759,760,761],"defs",{},[762,763,770],"marker",{"id":764,"viewBox":765,"refX":766,"refY":767,"markerWidth":768,"markerHeight":768,"orient":769},"faac1540e8","0 0 10 10","9","5","7","auto-start-reverse",[771,772],"path",{"d":773,"fill":74,"style":774},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[54,776],{"x":69,"y":69,"width":70,"height":777,"rx":72,"fill":73,"stroke":74,"style":75},"131",[77,779,755],{"x":79,"y":80,"fill":74,"style":81},[54,781],{"x":79,"y":92,"width":782,"height":783,"rx":681,"fill":109,"stroke":109,"style":718},"146.0","55.0",[77,785,789],{"x":104,"y":786,"fill":74,"style":787,"textAnchor":788},"78.0","font-size:13px;font-weight:700","middle","Render poster",[77,791,794],{"x":104,"y":792,"fill":74,"style":793,"textAnchor":788},"96.0","font-size:12px","small thumbnail",[54,796],{"x":797,"y":92,"width":782,"height":783,"rx":681,"fill":109,"stroke":109,"style":718},"214.0",[77,799,801],{"x":800,"y":786,"fill":74,"style":787,"textAnchor":788},"287.0","Hover or focus",[77,803,804],{"x":800,"y":792,"fill":74,"style":793,"textAnchor":788},"preconnect domains",[54,806],{"x":807,"y":92,"width":782,"height":783,"rx":681,"fill":123,"stroke":124,"style":682},"400.0",[77,809,811],{"x":810,"y":786,"fill":74,"style":787,"textAnchor":788},"473.0","Click",[77,813,814],{"x":810,"y":792,"fill":74,"style":793,"textAnchor":788},"create iframe",[54,816],{"x":817,"y":92,"width":782,"height":783,"rx":681,"fill":109,"stroke":109,"style":718},"586.0",[77,819,821],{"x":820,"y":786,"fill":74,"style":787,"textAnchor":788},"659.0","Embed loads",[77,823,824],{"x":820,"y":792,"fill":74,"style":793,"textAnchor":788},"autoplay starts",[217,826],{"x1":827,"y1":828,"x2":829,"y2":828,"stroke":74,"strokeWidth":830,"style":831,"markerEnd":832},"174.0","83.5","212.0","1.5","stroke-opacity:0.6","url(#faac1540e8)",[217,834],{"x1":835,"y1":828,"x2":836,"y2":828,"stroke":74,"strokeWidth":830,"style":831,"markerEnd":832},"360.0","398.0",[217,838],{"x1":839,"y1":828,"x2":840,"y2":828,"stroke":74,"strokeWidth":830,"style":831,"markerEnd":832},"546.0","584.0",[131,842,844],{"id":843},"verification","Verification",[15,846,847],{},"Reload with the cache cleared and confirm no requests to the embed domain occur before scrolling (lazy) or before clicking (facade). Check that the iframe area keeps its size so CLS does not change. In the Performance panel, total blocking time during load should drop. Confirm that keyboard users can focus the facade and activate it with Enter or Space.",[131,849,851],{"id":850},"worked-example-a-recipe-blog","Worked Example: A Recipe Blog",[15,853,854],{},"A recipe site embedded a YouTube video and an Instagram post in every recipe, both well below the ingredients list. Initial transfer was 3.1MB, TBT on a mid-range phone was 980ms, and INP p75 was 340ms because the embed scripts ran during the user's first interactions. Video play rate was 6%. The team swapped the video for a facade and the Instagram post for a static image linking to the post. Initial transfer fell to 640KB, TBT to 210ms, and INP p75 to 170ms. Video plays did not decrease — they rose slightly, possibly because the poster image loaded faster than the embed had.",[131,856,858],{"id":857},"choosing-between-lazy-and-facade","Choosing Between Lazy and Facade",[15,860,861,862,864],{},"Use native ",[33,863,35],{}," when the embed is likely to be used by most visitors who reach it, or when instant interactivity matters (a booking widget, a payment frame, an interactive calculator). Use a facade when the embed is optional and heavy, and interaction rates are low — videos, maps and social posts are the classic cases. For iframes that are part of the core page above the fold, such as a checkout payment frame, load them eagerly and focus on keeping the embed itself lean, since deferring them would delay the main task.",[131,866,868],{"id":867},"auditing-embeds-across-a-site","Auditing Embeds Across a Site",[15,870,871,872,874],{},"Embeds accumulate through content editors rather than code reviews, so they are easy to miss. Crawl a sample of templates and count iframes per page with their domains, or log ",[33,873,226],{}," elements found on load from RUM with a one-line script. Rank embed types by total transfer multiplied by page views, and handle the top few with facades or static images. Then add a guard: a content component (a video or map shortcode) that renders the facade by default, so editors cannot paste raw embed code into articles. This keeps pages fast after the cleanup, rather than drifting back one pasted embed at a time.",[131,876,878],{"id":877},"common-mistakes","Common Mistakes",[136,880,881,887,893,899],{},[139,882,883,886],{},[142,884,885],{},"Lazy-loading an above-the-fold iframe."," Delays content the user sees first.",[139,888,889,892],{},[142,890,891],{},"Facades without accessible labels."," Screen reader users cannot tell what the button does.",[139,894,895,898],{},[142,896,897],{},"No reserved space."," The iframe pops in and shifts the layout.",[139,900,901,904],{},[142,902,903],{},"Using a full-size poster image."," A facade with a 300KB poster loses part of its benefit; use a sized thumbnail.",[131,906,908],{"id":907},"edge-cases","Edge Cases",[15,910,911,914],{},[142,912,913],{},"Autoplay requirements."," After a click, browsers usually allow autoplay with sound; mobile browsers may still require a second tap in some cases.",[15,916,917,920],{},[142,918,919],{},"Privacy and consent."," Facades also help consent flows — no third-party requests happen until the user acts.",[15,922,923,926,927,930],{},[142,924,925],{},"Hidden iframes."," Iframes with ",[33,928,929],{},"display: none"," or zero size may be loaded eagerly regardless of the attribute; avoid relying on lazy loading for hidden tracking frames.",[15,932,933,936],{},[142,934,935],{},"Print and reader modes."," Facades show the poster; include a text link to the video for those contexts.",[131,938,940],{"id":939},"faq","FAQ",[942,943,946,950],"details",{"className":944},[945],"faq-item",[947,948,949],"summary",{},"Do all browsers support loading=\"lazy\" on iframes?",[15,951,952],{},"Current versions of the major browsers support it. Unsupported browsers simply load the iframe eagerly, so it is safe to add.",[942,954,956,959],{"className":955},[945],[947,957,958],{},"Is there a ready-made YouTube facade?",[15,960,961],{},"Yes — lightweight web components such as lite-youtube-embed implement the facade pattern with accessibility and preconnect warming built in.",[942,963,965,968],{"className":964},[945],[947,966,967],{},"Does a facade hurt SEO for videos?",[15,969,970,971,974],{},"Search engines can understand videos from structured data (",[33,972,973],{},"VideoObject",") and links. Add structured data if video search visibility matters.",[942,976,978,981],{"className":977},[945],[947,979,980],{},"How far ahead does native lazy loading start?",[15,982,983],{},"Browsers use a distance threshold that depends on connection speed, typically a few viewport heights. You cannot configure it.",[942,985,987,990],{"className":986},[945],[947,988,989],{},"Does lazy loading affect INP?",[15,991,992],{},"Yes, positively. Embed scripts running during load often cause long tasks that delay the first interactions. Deferring them frees the main thread.",[942,994,996,999],{"className":995},[945],[947,997,998],{},"Should I sandbox embeds?",[15,1000,1001,1002,1005],{},"The ",[33,1003,1004],{},"sandbox"," attribute restricts what an iframe can do, which is good for security, but many embeds need specific permissions to work. Test carefully and grant only what is needed.",[131,1007,1009],{"id":1008},"related","Related",[136,1011,1012,1019,1026],{},[139,1013,1014,1018],{},[19,1015,1017],{"href":1016},"\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Fnative-lazy-loading-vs-intersection-observer\u002F","Native lazy loading vs IntersectionObserver"," — the same choice for images.",[139,1020,1021,1025],{},[19,1022,1024],{"href":1023},"\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-css-background-images\u002F","Lazy-loading CSS background images"," — the other element type without native lazy loading.",[139,1027,1028,1032],{},[19,1029,1031],{"href":1030},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fthird-party-script-performance\u002Freplacing-youtube-embeds-with-a-facade\u002F","Replacing YouTube embeds with a facade"," — a deeper look at video facades.",[1034,1035,1037],"script",{"type":1036},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Lazy-Load iframes\",\n  \"description\": \"How to defer iframes for videos, maps and widgets with native lazy loading and facades, and when an iframe should not be deferred.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Add loading=\\\"lazy\\\" to below-the-fold iframes\",\n      \"text\": \"Always include width and height (or an aspect-ratio on a wrapper) to reserve space and prevent layout shifts.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Replace video embeds with a facade\",\n      \"text\": \"Replace video embeds with a facade\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Warm connections on intent\",\n      \"text\": \"On pointerenter or focus of a facade, inject for the embed's domains, so the click-to-play delay is shorter.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Use static images for maps\",\n      \"text\": \"A static map image (from the provider's static API or a self-generated screenshot) linking to the interactive map is often enough.\"\n    }\n  ]\n}\n",[1034,1039,1040],{"type":1036},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Lazy-Load iframes\",\n  \"description\": \"How to defer iframes for videos, maps and widgets with native lazy loading and facades, and when an iframe should not be deferred.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-iframes\u002F\"\n  }\n}\n",[1034,1042,1043],{"type":1036},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Image & Media Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Lazy Loading Images Without Hurting LCP\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Lazy-Loading iframes\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-iframes\u002F\"\n    }\n  ]\n}\n",[1045,1046,1047],"style",{},"html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}",{"title":211,"searchDepth":240,"depth":240,"links":1049},[1050,1051,1052,1058,1059,1060,1061,1062,1063,1064,1065],{"id":133,"depth":240,"text":134},{"id":170,"depth":240,"text":171},{"id":198,"depth":240,"text":199,"children":1053},[1054,1055,1056,1057],{"id":203,"depth":275,"text":204},{"id":325,"depth":275,"text":326},{"id":634,"depth":275,"text":635},{"id":653,"depth":275,"text":654},{"id":843,"depth":240,"text":844},{"id":850,"depth":240,"text":851},{"id":857,"depth":240,"text":858},{"id":867,"depth":240,"text":868},{"id":877,"depth":240,"text":878},{"id":907,"depth":240,"text":908},{"id":939,"depth":240,"text":940},{"id":1008,"depth":240,"text":1009},"How to defer iframes for videos, maps and widgets with native lazy loading and facades, and when an iframe should not be deferred.","md",{"slug":1069,"type":1070,"breadcrumb":1071,"datePublished":1080,"dateModified":1080},"lazy-loading-iframes","article",[1072,1075,1076,1078],{"name":1073,"url":1074},"Home","\u002F",{"name":27,"url":26},{"name":1077,"url":21},"Lazy Loading Images Without Hurting LCP",{"name":5,"url":1079},"\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-iframes\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-iframes",{"title":1084,"description":1085},"Lazy-Loading iframes: Embeds, Maps and Videos","Defer YouTube embeds, maps and widgets with loading=“lazy” and click-to-load facades, cutting megabytes of third-party script from the initial page load.","image-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-iframes\u002Findex","mN6ZUBJzCTcO5et11AQ5jtUfqIVREXTfISTiC93S5Hw",[1089,1093],{"title":1090,"path":1091,"stem":1092},"Lazy-Loading CSS Background Images","\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-css-background-images","image-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-css-background-images\u002Findex",{"title":1094,"path":1095,"stem":1096},"Lazy-Loading Images in Carousels","\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-images-in-carousels","image-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-images-in-carousels\u002Findex",1791308079697]