GoogleChrome / GoogleChrome/lighthouse
Defer offscreen iframes
- Dominant language
- JavaScript
- Stars
- 30.8k
- Forks
- 9.8k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 19
Description
Offscreen iframes are iframes located outside of the visible browser viewport. As they are unseen by the user and slow down page load, they should be loaded later, closer to when the user is going to see them. Similarly to the audit performed for [offscreen images](https://github.com/GoogleChrome/lighthouse/blob/755ed095ba6d83d373fe99ba5c8c4c34940e34ca/lighthouse-core/audits/byte-efficiency/offscreen-images.js).
#### Provide a basic description of the audit
Checks to see if iframes are displayed only outside of the viewport. Iframes requested after TTI are not flagged as violations. Deferring iframes until all critical resources have been loaded can improve time to interactive.
#### How would the audit appear in the report?
If the audit passes, the user would see a message indicating that they have passed the audit.
If the audit fails, then the user would see a list table containing the columns, `src`, `size` and `potential savings (KBs)` where each row in the table would be an iframe node which did not have the `loading="lazy"` attribute and was outside of the viewport.
#### How is this audit different from existing ones?
Currently only images are checked for `loading="lazy"` attribute.
#### What % of developers/pages will this impact?
According to the data in HttpArchive, 3,559,362 pages have an iframe, of which only approximately ~2.5% take advantage of `loading="lazy"`. Currently HttpArchive does not record whether these iframes are within the initial viewport. If we use the same proportions as for images (albeit I do not think this is necessarily correct), ~35% of iframes would be outside of the visible viewport and may be able to take advantage of being lazily-loaded.
#### How is the new audit making a better web for end users?
iframes are used on almost 50% of pages in the HttpArchive and a number of them may possibly be lazily loaded. Deferring the loading of these iframes by adding `loading="lazy"` could improve TTI.
#### What is the resourcing situation?
If this is deemed valuable, I could work on this myself, however I have never contributed to Lighthouse and there would be a learning curve.
#### Any other links or documentation that we should check out?
Can provide HttpArchive data if needed.
Contributor guide
Assessment
This issue has not been assessed yet.