ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.89k stars 3.89k forks source link

amp story player: lazy loading iframes #35299

Open jduran7 opened 3 years ago

jduran7 commented 3 years ago

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 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

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.