[wp-trac] [WordPress Trac] #64823: Image in navigation overlay or in viewport-conditional block can get `fetchpriority=high` and degrade LCP metric for page

[WordPress Trac]

#64823: Image in navigation overlay or in viewport-conditional block can get
`fetchpriority=high` and degrade LCP metric for page
--------------------------------------+--------------------------
 Reporter:  westonruter               |       Owner:  westonruter
     Type:  defect (bug)              |      Status:  closed
 Priority:  normal                    |   Milestone:  7.0
Component:  Media                     |     Version:  trunk
 Severity:  normal                    |  Resolution:  fixed
 Keywords:  has-patch has-unit-tests  |     Focuses:  performance
--------------------------------------+--------------------------
Changes (by westonruter):

 * status:  assigned => closed
 * resolution:   => fixed


Comment:

 In [changeset:"61934" 61934]:
 {{{
 #!CommitTicketReference repository="" revision="61934"
 Media: Add optimization support for `IMG` tags with `fetchpriority=low` or
 `fetchpriority=auto`.

 This updates `wp_get_loading_optimization_attributes()` and
 `wp_maybe_add_fetchpriority_high_attr()` to account for cases where an
 `IMG` has `fetchpriority=low` or `fetchpriority=auto`:

 * `IMG` tags with `fetchpriority=low` are not lazy-loaded since they may
 be in a Navigation overlay, Details block, or Accordion Item block and
 need to be loaded the instant the user toggles the block.
 * `IMG` tags with `fetchpriority=auto` do not increase the media count
 since they may be hidden in a viewport by block visibility settings.
 * Blocks with conditional visibility (such as hidden on mobile or desktop)
 now automatically add `fetchpriority="auto"` to their contained `IMG` tags
 to prevent them from erroneously receiving `fetchpriority=high` or
 affecting the lazy-loading of subsequent images.
 * An `IMG` with `fetchpriority=auto` which also surpasses the
 `wp_min_priority_img_pixels` threshold will prevent a subsequent image
 from getting `fetchpriority=high`.

 Developed in https://github.com/WordPress/wordpress-develop/pull/11196
 Includes backport of [https://github.com/WordPress/gutenberg/pull/76302
 Gutenberg#76302].

 See related Gutenberg issues:

 - [https://github.com/WordPress/gutenberg/issues/76181 76181]: Image in
 navigation overlay can get `fetchpriority=high` and degrade LCP metric for
 page.
 - [https://github.com/WordPress/gutenberg/issues/76268 76268]: Image in
 collapsed Details block may erroneously get `fetchpriority=high` even
 though hidden.
 - [https://github.com/WordPress/gutenberg/issues/76301 76301]: Block
 Visibility: `IMG` in viewport-conditional block may get
 `fetchpriority=high` even when not displayed.
 - [https://github.com/WordPress/gutenberg/issues/76335 76335]: Image in
 collapsed Accordion block may erroneously get `fetchpriority=high` even
 though hidden.

 Follow-up to r56347, r56037.

 Props westonruter, mukesh27, ramonopoly, wildworks.
 See #58235.
 Fixes #64823.
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64823#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform