![]() 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. If an iframe meets any of these conditions, Chrome considers it hidden and won't lazy-load it in most cases. This criteria applies to both loading=lazy and loading=auto.The iframe is placed off-screen using negative X or Y positioning.display: none or visibility: hidden is applied.The iframe's width and height are 4px or smaller.(Hidden iframes are often used for analytics or communication purposes.) Chrome uses the following criteria to determine whether an iframe is hidden: The loading attribute affects iframes differently than images, depending on whether the iframe is hidden. appendChild (iframe ) iframe-specific lazy-loading behavior # 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. 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 images until users scroll near them. How does built-in lazy-loading for iframes work? # Because iframes can often require a significant amount of bandwidth in order to load all of their subresources, lazy-loading offscreen iframes can significantly reduce bandwidth contention on network-constrained devices, leaving more bandwidth to load resources which contribute to a page's LCP. LCP candidates, such as images or text dependent on web fonts in order to render. 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.Īdditionally, lazy-loading off-screen iframes can impart benefits to Largest Contentful Paint (LCP). 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. Standardized lazy-loading for images landed in Chrome 76 via the loading attribute and later came to Firefox.
0 Comments
Leave a Reply. |