Make WordPress Core

Opened 3 years ago

Last modified 2 months ago

#52990 new defect (bug)

Account for single quoted attributes when lazy loading images and iframes.

Reported by: peterwilsoncc's profile peterwilsoncc Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.5
Component: Embeds Keywords: needs-unit-tests needs-patch
Focuses: performance Cc:


wp_iframe_tag_add_loading_attr() and wp_img_tag_add_loading_attr() includes a check to ensure the elements have a src, width and height attribute before adding the lazy loading attribute.

In both functions the check only considers attributes using double quotes so the lazy loading tag is not added for elements using single quoted attributes. img ref, iframe ref.

As WordPress does not normalize attribute tags to use double quotes, single quoted attribute tags ought to be considered.

Image version 5.5, iframe version 5.7.

Follow up to #50756, #52768.

Change History (8)

This ticket was mentioned in PR #1358 on WordPress/wordpress-develop by pyronaur.

3 years ago

  • Keywords has-patch added; needs-patch removed

Trac ticket:

This PR accounts for attributes using single quotes in images and iframes to address the issue described in [ Trac:52990]

pyronaur commented on PR #1358:

3 years ago

Looked at the broken unit tests - it seems that they might be broken at a repository level and nothing to do with the patch?

ocean90 commented on PR #1358:

3 years ago

Hi @pyronaur, there are actually two failing tests. Here's the direct link:

pyronaur commented on PR #1358:

3 years ago

Thanks @ocean90

Curious - there are tests that assert that single quotes should fail 🤔 .

#6 follow-up: @pyronaur
3 years ago

The tests explicitly mention testing for regressions, so this might need some input from @azaozz and @flixos90

#7 in reply to: ↑ 6 @azaozz
3 years ago

Replying to pyronaur:

Right, this comes from edge case where a loading attribute was added to img tag that's inside js (and the double quotes broke the js). This seems to be very uncommon, but given the size of WordPress...

Version 1, edited 3 years ago by azaozz (previous) (next) (diff)

#8 @azaozz
3 years ago

  • Keywords needs-patch added; has-patch removed

The initial code in that conditional was without the double quote, false === strpos( $image, ' src=' ). That made it compatible with all attribute "styles" (double, single and no quotes). However that broke some inline js, see above comment.

There was a patch to support single quotes, see (scroll to the middle, ~line 1715 in the patched src/wp-includes/media.php). It can be adapted to implement that support now.

On the other hand the WordPress editor (both the block editor and TinyMCE) normalize HTML attributes to always use double quotes. The "template functions" also output HTML with double quotes.

Yes, the conditional where the quote is checked can have false positives. Its purpose is to bypass adding of the loading attribute, i.e. if src, width, or height are missing or in case of a false positive it falls back to the "safe" option of not changing the tag.

At the time #44427 was implemented it seemed that the slowdown of getting the quote style for each image would have larger negative impact than not adding the loading attribute when the tags attributes are with single quotes or no quotes.

Now that iframes are also lazy-loaded it may make sense to look for single quotes and take the slowdown. Perhaps that can be only for iframes as the overall improvements there are quite more significant, and iframes are quite rare in post_content compared to images.

Last edited 3 years ago by azaozz (previous) (diff)
Note: See TracTickets for help on using tickets.