Twenty Twenty-One: Skip loading attribute on featured image instead of loading=eager

[flixos90]

The new default theme is providing a loading="eager" for featured images displayed, however this is a discouraged pattern per ​this section:

For example, if an image is placed within the header.php template and is very likely to be in the initial viewport, it is advisable to skip the loading attribute for that image.

To clarify, "skip" means omit the loading attribute, not set it to "eager". The reason is that specifying "eager" explicitly requires the browser to load the image right away rather than leaving control to the browser, which means that even in special modes like e.g. Chrome Lite mode for slow network connections these images would be forced to load right away, causing a potentially worse experience.

We therefore should remove the loading attribute for featured images instead of specifying it as "eager".

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

[desrosj]

Thanks @flixos90! This looks good to me. I think we can consider including this in the 1.1 version being released today as well. Moving to 5.6.1 and I'll hold off to allow more time for another theme focused contributor to review.

[poena]

If I remember correctly this was added to prevent layout shifting. I don't know enough to determine what should be prioritized here.

I would rather wait to 5.7 or 5.6.1 so that all opinions can be heard, in the ticket.

[flixos90]

Lazy-loading an image in the initial viewport can have a negative impact on the Largest Contentful Paint Metric (also see ​https://web.dev/browser-level-lazy-loading-for-cmss/#avoid-lazy-loading-above-the-fold-elements).

The change made in this ticket doesn't affect that though: The image not being lazy-loaded is maintained, it's only about the implementation, where passing loading="eager" is discouraged for the reason outlined in the description.

[ryelle]

The reasoning for not adding loading="eager" ​described here makes sense to me.

While using loading="eager" is a supported alternative, this would tell the browser explicitly to always load the image right away, which would prevent potential benefits if browsers implemented further mechanisms and heuristics to automatically decide which elements to lazy-load.

While eager is the default value for loading, explicitly setting it communicates something to the browser that might block future performance benefits.

Setting loading to false removes the lazy-loading from the image, which should prevent any layout shift.

[desrosj]

In 49860:

Twenty Twenty-One: Do not specify loading=“eager” for single post thumbnails.

While loading=“eager” is a supported alternative to omitting the attribute entirely, browsers follow the value of this attribute explicitly when specified.

Specifying eager would prevent the user from receiving any additional potential benefits implemented at the browser level, such as further mechanisms to automatically decide which elements to lazy-load.

Props flixos90, ryelle, poena.
Fixes #52139.

[desrosj]

Reopening to backport.

Merged into core in https://core.trac.wordpress.org/changeset/49860.

[desrosj]

In 49861:

Twenty Twenty-One: Do not specify loading=“eager” for single post thumbnails.

While loading=“eager” is a supported alternative to omitting the attribute entirely, browsers follow the value of this attribute explicitly when specified.

Specifying eager would prevent the user from receiving any additional potential benefits implemented at the browser level, such as further mechanisms to automatically decide which elements to lazy-load.

Props flixos90, ryelle, poena.
Merges [49860] to the 5.6 branch.
Fixes #52139.

[desrosj]

Adding a custom keyword for querying tickets included in the Twenty Twenty-One version 1.1 release in the future.