How many iframes is too many

JavaScript collisions — This happens the host and the embed use the same library. That and other limitations make embedding a third-party widget solely via iFrame a challenge. Multiple Modules, Multiple Troubles The other problem with using an iFrame arises when you have several interconnected, yet separate UI Modules on a single page.

Caching can mitigate this, but I still need to make sure the versions are in sync. For example: If a user changes their avatar, the iFrame would need to notify the host, which in turn will notify all other active iFrames.

The syncing state could add significant complexity to each module. So the only way to know an iFrame failed to load is waiting for a postMessage event for an X amount of time and treat timeouts as failures.

Overhead — The last challenge is the overhead of creating multiple iFrames on the page. Even with everything cached, this is a significant overhead over creating a div and making an API call. Overcoming the Challenges: Life without an iFrame The safety of an iFrame comes with a price, so we decided to explore how we could step out of the iFrame and overcome the challenges that come along with it. CSS Specify — We created a webpack plugin that duplicates classes several times for each class.

We also prefixed classes with a unique id for each module, further increasing specificity. This allows you to enjoy the isolation of an iframe, without the overhead. 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 of iframes defers offscreen iframes from being loaded until the user scrolls near them. This saves data, speeds up the loading of other parts of the page, and reduces memory usage. Third-party embeds cover a wide range of use cases, from video players, to social media posts, to ads.

Often this content is not immediately visible in the user's viewport. Rather, it's only seen once they scroll further down the page. Despite this, users pay the cost of downloading data and costly JavaScript for each frame, even if they don't scroll to it. The loading attribute allows a browser to defer loading offscreen iframes and images until users scroll near them.

Chrome intends on bringing a proposal for this value to the standards table. 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.

If you need to dynamically create iframes via JavaScript, setting iframe. The loading attribute affects iframes differently than images, depending on whether the iframe is hidden. Hidden iframes are often used for analytics or communication purposes. Chrome uses the following criteria to determine whether an iframe is hidden:. If an iframe meets any of these conditions, Chrome considers it hidden and won't lazy-load it in most cases. Chrome shows a placeholder for lazy-loaded iframes that are still being fetched.

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:. Anecdote: when we switched to lazy-loading YouTube embeds for Chrome. If you are looking for more efficient ways to load YouTube embeds, you may be interested in the YouTube lite component. A malicious user can hijack your users' clicks. A malicious user can hijack your users' keystrokes. Don't put your visitors at risk to the XSS attacks.

Reason 2. Iframe Cause Usability Issues The iframe tag is notorious for creating usability annoyances. Among most common of them are: It tends to break the browsers' "Back" button. It confuses visually impaired visitors, using screen readers. It confuses users, suddenly opening the iframe content in a new browser window. Content within the iframe doesn't fit in and looks odd.

Content within the iframe is missing since the source URL changed. Navigation of the site in the iframe stops working. Reason 3. At there Webmasters Help Forum, Google clearly stated that iframes may cause problems for them : IFrames are sometimes used to display content on web pages.