youtube loading gif transparent background

Given such embeds are often displayed below Lazy-loading this iframe avoids having to load all of Instagram embeds provide a block of markup and a script, which injects an Lazy-loading Instagram embeds (saves around 100 KB gzipped on initial load): Note: If you are looking for more efficient ways to load YouTube embeds, you may be interested in the YouTube lite component. I have opened an internal bug with YouTube to discuss adding We saved 10 seconds off of how soon our pages could be interactive on mobileĭevices. Lazy-loading YouTube video embeds (saves around 500KB on initial page load): Īnecdote: when we switched to lazy-loading YouTube embeds for , Was the default, it would look a little like this: If the web changes so that lazy-loading offscreen iframes What could be the impact of lazy-loading popular iframe embeds? Supported: var iframe = document.createElement('iframe') Iframe.loading = 'lazy' on the element is also

If you need to dynamically create iframes via JavaScript, setting Not specifying the attribute at all will have the same impact as explicitly Using the loading attribute on iframes works as follows: eager: is not a good candidate for lazy-loading.lazy: is a good candidate for lazy-loading.The loading attribute allows a browser to defer loading offscreen iframes and How does built-in lazy-loading for iframes work? Resources which contribute to a page's LCP. Reduce bandwidth contention on network-constrained devices, leaving more bandwidth to load Order to load all of their subresources, lazy-loading offscreen iframes can significantly Because iframes can often require a significant amount of bandwidth in LCP candidates, such as images or text dependent on web fonts Lazy-loading iframes could lead to 2-3% median data savings, 1-2% FirstĬontentful Paint reductions at the median, and 2% First Inputĭelay (FID) improvements at the 95th percentile.Īdditionally, lazy-loading off-screen iframes can impart benefits to Largest Contentful Paint (LCP). JavaScript for each frame, even if they don't scroll to it.īased off Chrome's research into automatically lazy-loading offscreen iframes Despite this, users pay the cost of downloading data and costly Rather, it's only seen once they scroll further down the Often this content is not immediately visible in Third-party embeds cover a wide range of use cases, from video players, to Shows lazy-loading video embeds: Why lazy-load iframes? In the same way you indicate lazy-loading for images. You indicate to the browser that you want to lazy-load an iframe with the loading attribute,

Youtube loading gif transparent background