Use if the iframe is a good candidate for lazy-loading. The browser will load the iframe when it is nearing the viewport. lazy: Indicates that the browser should defer loading the iframe.The loading attribute supports the following values: The loading attribute for is available in Chrome 77 and above and has also been introduced to other Chromium-based browsers. Native lazy-loading for #įor third-party embeds loaded through elements, you can use browser-level lazy-loading to defer loading offscreen iframes until users scroll near them. Depending on the requirements and the type of embed, you can use different lazy-loading techniques explained below.
#Iframe zoom download#
This not only helps optimize the initial page load but also reduces the download costs for users on fixed data plans and slow network connections.ĭelaying the download of content until it is actually needed is called lazy-loading. In that case, downloading third-party resources may be deferred until the user scrolls down to that part of the page. Since third-party content usually comes after the primary content, it may not be visible in the viewport when the page loads. Place third-party script tags after the key first-party tags and use async or defer attributes to load them asynchronously. Scripts can affect the loading sequence because the DOM construction pauses while scripts are executed. Requests for third-party embeds can get in the way of loading first-party content, so the position of a third-party script tag is important. For example, the news text on a news page should load before embeds for a Twitter feed or advertisements. In a well-designed page, the key first-party content will be the focus of the page, while the third-party embeds will occupy side-bars or appear after the first-party content.įor the best user experience, the main content should load quickly and before any other supporting content. To efficiently use third-party embeds and reduce their performance impact, follow the guidelines below. Third-party embeds can negatively impact performance, but they also offer important functionalities. You can use this opportunity to remove any redundant code.
#Iframe zoom code#
It is a good practice to periodically audit the performance impact of your embeds and third-party code because embed source code may change. The audit is available through Chrome DevTools under the Lighthouse tab. Reduce the impact of third-party code Lighthouse audit shows the list of third-party providers a page uses, with size and main-thread blocking time. Performance monitoring tools such as Lighthouse and Chrome DevTools help to measure the impact of third-party embeds on performance. They take more time to load and keep the main thread busy when executing. Many popular embeds include over 100 KB of JavaScript, sometimes even going up to 2 MB.
Performance impact of third-party embeds # This can make the third-party embeds heavy and affect the performance of the page by delaying its first-party content. Some providers also use a script snippet that dynamically injects an to pull other content in.
Third-party providers offer HTML snippets often consisting of an that pulls in a page composed of markup, scripts, and stylesheets. Third-party embeds are typically loaded in elements on the page.
It's best to use the techniques described in this post to load only offscreen or non-primary page content.
0 kommentar(er)
