lobipon.blogg.se - Iframe w3schools

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. 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, 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:

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? # 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. Standardized lazy-loading for images landed in Chrome 76 via the loading attribute and later came to Firefox.