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)
https://web.dev/articles/iframe-lazy-loading
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
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.
Additional context
BLV Dashboard with lazy loading on visualize iFrames. (load on scrolling)
https://web.dev/articles/iframe-lazy-loading