[wp-trac] [WordPress Trac] #58235: Enhance hero image loading performance with Fetchpriority

[WordPress Trac]

#58235: Enhance hero image loading performance with Fetchpriority
-------------------------------------------------+-------------------------
 Reporter:  flixos90                             |       Owner:  flixos90
     Type:  enhancement                          |      Status:  closed
 Priority:  high                                 |   Milestone:  6.3
Component:  Media                                |     Version:
 Severity:  normal                               |  Resolution:  fixed
 Keywords:  has-patch commit has-dev-note add-   |     Focuses:
  to-field-guide                                 |  performance
-------------------------------------------------+-------------------------

Comment (by westonruter):

 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/58235#comment:43>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform