[wp-trac] [WordPress Trac] #58773: Lazy load oEmbed iframes

[WordPress Trac]

#58773: Lazy load oEmbed iframes
-------------------------------------+-------------------------------------
 Reporter:  adamsilverstein          |       Owner:  adamsilverstein
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  6.4
Component:  Embeds                   |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  needs-testing has-patch  |     Focuses:  performance,
  has-unit-tests                     |  sustainability
-------------------------------------+-------------------------------------
Description changed by adamsilverstein:

Old description:

> == Why lazy load oEmbed iframes?
> * Lazy loading prevents wasted resources from loading if the user never
> scrolls down to view the oEmbed
> * Iframe lazy loading is handled directly by the browser, making the
> change simple (add a single attriute) and ensuring users get a great
> experience
>

> ==  Lazy loaded oEmbeds history
> WordPress has [https://make.wordpress.org/core/2021/02/19/lazy-loading-
> iframes-in-5-7/ lazy loaded iframes] since version 5.7 and the original
> proposal included lazy loading for oEmbed iframes (as long as the
> provider also included width and height attributes).
>
> Ultimately, dynamic addition of lazy loading of oEmbeds was removed from
> core because it was found to create issues, especially with embeds of
> other WordPress posts.
>
> == Proposed Solution
> This ticket proposes new approach relies on altering the cached iframe
> instance we store for each oEmbed. In particular:
> * When the oEmbed iframe HTML is retrieved, if it doesn't already contain
> a `loading` attribute, it is run through `wp_iframe_tag_add_loading_attr`
> to add the lazy loading iframe under the correct conditions
>   * Will not add lazy loading to WordPress iframes because of the `data-
> secret` check
>   * Only adds lazy loading to iframes with the height and width present.
>   * Runs before the `oembed_result` filter, so developers can remove the
> attribute if desired.

New description:

 == Why lazy load oEmbed iframes?
 * Lazy loading prevents wasted resources from loading if the user never
 scrolls down to view the oEmbed
 * Iframe lazy loading is handled directly by the browser, making the
 change simple (add a single attriute) and ensuring users get a great
 experience


 ==  Lazy loaded oEmbeds history
 WordPress has [https://make.wordpress.org/core/2021/02/19/lazy-loading-
 iframes-in-5-7/ lazy loaded iframes] since version 5.7 and the original
 proposal included lazy loading for oEmbed iframes (as long as the provider
 also included width and height attributes).

 Ultimately, dynamic addition of lazy loading of oEmbeds was removed from
 core because it was found to create issues, especially with embeds of
 other WordPress posts.

 == Proposed Solution
 This ticket proposes slightly different approach that relies on altering
 the iframe instance on the fly for each oEmbed. In particular:
 * When the oEmbed iframe HTML is displayed, if it doesn't already contain
 a `loading` attribute, it is run through `wp_iframe_tag_add_loading_attr`
 to add the lazy loading iframe under the correct conditions
   * Will not add lazy loading to WordPress iframes because of the `data-
 secret` check
   * Only adds lazy loading to iframes with the height and width present.
   * Runs before the `oembed_result` filter, so developers can remove the
 attribute if desired.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58773#comment:9>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform