Case study: Lazy-loading the Facebook's social plugins #įacebook's social plugins allow developers to embed Facebook content in their web pages. Lazy-loading Spotify embeds (saves 514KB on initial load): Īlthough the above embeds illustrate the potential benefits to lazy-loading iframes for media content, there's the potential to also see these benefits for ads. Given such embeds are often displayed below the viewport in most articles, this seems like a reasonable candidate for lazy-loading of their iframe. Lazy-loading this iframe avoids having to load all of the script necessary for the embed. Instagram embeds provide a block of markup and a script, which injects an iframe into your page. Lazy-loading Instagram embeds (saves >100KB gzipped on initial load): 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 loading=lazy to its embed code. Lazy-loading YouTube video embeds (saves ~500KB on initial page load): Īnecdote: when we switched to lazy-loading YouTube embeds for, we saved 10 seconds off of how soon our pages could be interactive on mobile devices. What if we could change the web at large so that lazy-loading offscreen iframes was the default? It would look a little like this: What impact might we see from lazy-loading popular iframe embeds? # Chrome shows a placeholder for lazy-loaded iframes that are still being fetched. iframes that aren't hidden will only load when they're within the load-in distance threshold.
![spotify web player chrome bug spotify web player chrome bug](https://forum.vivaldi.net/assets/uploads/files/1629883265972-spotify-vivaldi.png)
If an iframe meets any of these conditions, Chrome considers it hidden and won't lazy-load it in most cases.
![spotify web player chrome bug spotify web player chrome bug](https://i1.wp.com/www.techjunkie.com/wp-content/uploads/2019/04/What-to-do-if-your-Spotify-web-player-stops-working1.jpg)
If you need to dynamically create iframes via JavaScript, setting iframe.loading = 'lazy' on the element is also supported: var iframe = document. Not specifying the attribute at all will have the same impact as explicitly eagerly loading the resource, except for Lite Mode users, where Chrome will use the auto value to decide whether it should be lazy-loaded. Using the loading attribute on iframes works as follows: Chrome intends on bringing a proposal for this value to the standards table. auto: browser will determine whether or not to lazily load.Īuto is currently a non-standard value, but is the default in Chrome today.eager: is not a good candidate for lazy-loading.lazy: is a good candidate for lazy-loading.
![spotify web player chrome bug spotify web player chrome bug](https://beebom.com/wp-content/uploads/2020/05/Spotify-web-player-works-with-Safari.jpg)
The loading attribute allows a browser to defer loading offscreen iframes and images until users scroll near them. How does built-in lazy-loading for iframes work? # Despite this, users pay the cost of downloading data and costly JavaScript for each frame, even if they don't scroll to it.īased off Chrome's research into automatically lazy-loading offscreen iframes for Data Saver users, lazy-loading iframes could lead to 2-3% median data savings, 1-2% First Contentful Paint reductions at the median, and 2% First Input Delay (FID) improvements at the 95th percentile. Rather, it's only seen once they scroll further down the page. Often this content is not immediately visible in the user's viewport. Third-party embeds cover a wide range of use cases, from video players, to social media posts, to ads. This demo of shows lazy-loading video embeds: Why should we lazy-load iframes? # This saves data, speeds up the loading of other parts of the page, and reduces memory usage. Standardized lazy-loading of iframes defers offscreen iframes from being loaded until the user scrolls near them. We are happy to share that browser-level lazy-loading for iframes is now standardized and is also supported in Chrome and Chromium-based browsers.
![spotify web player chrome bug spotify web player chrome bug](https://res.cloudinary.com/practicaldev/image/fetch/s--b0PVHvbz--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://user-images.githubusercontent.com/6290720/90327669-19aabc00-dfd1-11ea-8d48-0042116ebafd.jpg)
Standardized lazy-loading for images landed in Chrome 76 via the loading attribute and later came to Firefox.