WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 5 months ago

Last modified 5 months ago

#52139 closed defect (bug) (fixed)

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

Reported by: flixos90 Owned by: desrosj
Milestone: 5.6.1 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch, fixed-major, twenty-twenty-one-1.1
Focuses: Cc:

Description

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

Change History (13)

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


5 months ago

  • Keywords has-patch added

This ticket was mentioned in Slack in #core-themes by desrosj. View the logs.


5 months ago

#3 @desrosj
5 months ago

  • Milestone changed from 5.7 to 5.6.1

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.

#4 @poena
5 months ago

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.

Last edited 5 months ago by poena (previous) (diff)

#5 @flixos90
5 months ago

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.

#6 @ryelle
5 months ago

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.

This ticket was mentioned in Slack in #core-themes by desrosj. View the logs.


5 months ago

#8 @desrosj
5 months ago

  • Keywords commit added
  • Owner changed from flixos90 to desrosj

#9 @desrosj
5 months ago

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

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.

#10 @desrosj
5 months ago

  • Keywords fixed-major added; commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening to backport.

#12 @desrosj
5 months ago

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

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.

#13 @desrosj
5 months ago

  • Keywords twenty-twenty-one-1.1 added

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

Note: See TracTickets for help on using tickets.