Lazy-load iframes

[flixos90]

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.

• 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

[flixos90]

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

[archon810]

Too late for 5.6, right?

[flixos90]

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

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

Addressed the remaining feedback here.

[flixos90]

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.

Trac ticket closed with changeset https://core.trac.wordpress.org/changeset/49808

[audrasjb]

Dev note published: ​https://make.wordpress.org/core/2021/02/19/lazy-loading-iframes-in-5-7/