Skip to content

Iframe embedding code example default to lazy loading #2506

@BenjaminHofstetter

Description

@BenjaminHofstetter

Description

We have a dashboard that sometimes displays over 10 visualize iframes in a single view. Naturally, not all visualizations are visible simultaneously. You need to scroll down to view them. Initially, only a few are visible.

Lazy loading has the advantage of loading iframes when they are near the visible portion of the browser.

Solution

<iframe loading="lazy" src="..."></iframe>

Considered alternative

If you load the iFrames without loading lazy the browser fetches all IFrames at the same time.

Use cases and impact

This is a very low-hanging fruit to implement.

  • Visualizations that are visible are loaded first.
  • Less initial data download.
  • Less load on the visualize at the same time.
  • Newer load visualizations that are never shown in the browser viewport.
  • Load visualizations on scrolling.

Additional context

BLV Dashboard with lazy loading on visualize iFrames. (load on scrolling)

Image

https://web.dev/articles/iframe-lazy-loading

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions