ampproject / ampproject/amphtml

amp story player: lazy loading iframes

Open
#35,299 2 comments 0 reactions 0 assignees View on GitHub
Components: amp-story-player Type: Feature Request WG: stories
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.