Make WordPress Core

Opened 4 years ago

Closed 3 years ago

Last modified 3 years ago

#50756 closed enhancement (fixed)

Lazy-load iframes

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


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 post provides more information on iframe lazy-loading.

Change History (10)

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

3 years 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:

#2 @flixos90
3 years ago

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

With 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 years ago

Too late for 5.6, right?

#4 @flixos90
3 years ago

@westonruter @azaozz I've addressed the code review feedback on the PR and refreshed against latest trunk. After some performance testing, it looks like the current patch is good to go.

azaozz commented on PR #703:

3 years ago

LGTM too, needs just a bit of copy/paste cleanup.

This ticket was mentioned in Slack in #core by flixos90. View the logs.

3 years ago

felixarntz commented on PR #703:

3 years ago

Addressed the remaining feedback here.

#8 @flixos90
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 49808:

Media: Enable lazy-loading of iframes by adding the loading="lazy" attribute to iframe tags on the front-end.

  • Expands the capabilities of wp_filter_content_tags() to add the attribute to iframe tags if enabled.
  • Modifies the default behavior of wp_lazy_loading_enabled() so that it returns true for iframe tags.
  • Introduces a wp_iframe_tag_add_loading_attr() function.
  • Introduces a wp_iframe_tag_add_loading_attr filter.

Like for images, the attribute is only added to iframes which have both width and height specified (see related #50367).

Props azaozz, flixos90, westonruter.
Fixes #50756.

hellofromtonya commented on PR #703:

3 years ago

Trac ticket closed with changeset

#10 @audrasjb
3 years ago

  • Keywords has-dev-note added; needs-dev-note removed
Note: See TracTickets for help on using tickets.