ampproject / ampproject/amphtml
amp story player: lazy loading iframes
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
amp-story-player is currently loading all iframes in an eager way. After the first amp-story-player element is intersected, all the following players and their iframes are loaded at once.
There could be performance benefits by using Chromium-based browsers' [native support](https://addyosmani.com/blog/native-iframe-lazy-loading/) for lazy loading iframes. The `loading="lazy"` attribute could be set on each iframe via the `buildIframeFor_` method in `amp-story-player-impl.js` like this:
```
buildIframeFor_(story) {
const iframeEl = this.doc_.createElement('iframe');
if (story.posterImage) {
setStyle(iframeEl, 'backgroundImage', story.posterImage);
}
iframeEl.classList.add('story-player-iframe');
iframeEl.setAttribute('allow', 'autoplay');
iframeEl.setAttribute('loading', 'lazy');
applySandbox(iframeEl);
this.addSandboxFlags_(iframeEl);
this.initializeLoadingListeners_(iframeEl);
story.iframe = iframeEl;
}
```
Understanding that maybe not everybody wants their iframes to have lazy loading, could this be implemented as an optional parameter?
### Alternatives Considered
No feasible alternatives that I can think of
### Additional Context
_No response_
Contributor guide
Research direction
Start in amp-story-player-impl.js at buildIframeFor_, then inspect the amp-story-player tests for iframe creation and loading behavior. Determine how the lazy-loading option should be exposed, apply the expected iframe loading behavior, and update or add tests showing the selected behavior is preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100