WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 3 days ago

#50756 assigned enhancement

Lazy-load iframes

Reported by: flixos90 Owned by: flixos90
Milestone: 5.7 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch has-unit-tests needs-dev-note
Focuses: Cc:

Description

As part of #44427, it was considered to lazy-load iframes in addition to images, however at that point the loading attribute on iframe tags was not yet formalized as part of the living HTML standard. This has changed a few weeks ago (see the iframe loading attribute), so we should consider adding a loading="lazy" attribute to iframes as well.

Likely the biggest surface area here will be oEmbed content, which is probably the most common way that WordPress sites include iframes.

We should generally try to follow a similar implementation like we did for images, relying on wp_lazy_loading_enabled() and wp_filter_content_tags(), which were intentionally built and named in a way that they are not limited to images only.

Another principle that we should follow is that the attribute should only be added to iframes which have width and height attributes specified.

This web.dev post provides more information on iframe lazy-loading.

Change History (3)

This ticket was mentioned in PR #703 on WordPress/wordpress-develop by felixarntz.


3 weeks ago

  • Keywords has-patch has-unit-tests added; needs-patch needs-unit-tests removed
  • Modifies wp_filter_content_tags() (which was specifically made to support different tags) to also scan for iframe tags in the content.
  • Update wp_filter_content_tags() logic to iterate through found img and iframe tags separately, making necessary modifications.
  • Introduce wp_iframe_tag_add_loading_attr(), and a filter of the same name, similar to wp_img_tag_add_loading_attr().
  • Modify wp_lazy_loading_enabled() to return true by default for iframe tags.

Trac ticket: https://core.trac.wordpress.org/ticket/50756

#2 @flixos90
3 weeks ago

  • Keywords needs-dev-note added
  • Milestone changed from Future Release to 5.7

With https://github.com/WordPress/wordpress-develop/pull/703 I've taken a first pass on a PR for this, including tests.

The main use-case for iframes in WordPress content today is oEmbed, which automatically transforms e.g. URLs. Since that filter runs (with priority 8) before wp_filter_content_tags() (priority 10) on the_content, no extra thinking was necessary to support those, it just works by adding iframe support to wp_filter_content_tags().

Note that not all oEmbed providers produce server-side iframe output. Furthermore, note that not all oEmbed iframe output contains width and height attributes which, like for images, are necessary to add a loading attribute in order to avoid content shifting.

cc @azaozz

#3 @archon810
3 days ago

Too late for 5.6, right?

Note: See TracTickets for help on using tickets.