[wp-trac] [WordPress Trac] #64823: Image in navigation overlay or in viewport-conditional block can get `fetchpriority=high` and degrade LCP metric for page (was: Image in navigation overlay 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:  assigned
 Priority:  normal                    |   Milestone:  7.0
Component:  Media                     |     Version:  trunk
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:  performance
--------------------------------------+--------------------------
Description changed by westonruter:

Old description:

> This ticket is a companion to the corresponding
> [https://github.com/WordPress/gutenberg/issues/76181 Gutenberg#76181]
> issue.
>
> When an `IMG` is added to the new Navigation Overlay in WP 7.0, it can
> get misidentified as deserving `fetchpriority=high` when the actual LCP
> element `IMG` is further down it the page.
>
> While the [https://github.com/WordPress/gutenberg/pull/76208 Gutenberg
> PR] addresses this issue by adding `fetchpriority=low` to such `IMG`
> tags, the logic in `wp_get_loading_optimization_attributes()` needs to be
> updated to account for such tags so that they do not get lazy-loaded.
> WHen an image is in the Navigation Overlay or somewhere else that is
> occluded from view (e.g. a Details block or non-initial carousel slide),
> it is very important for the `IMG` to not get lazy-loaded because it
> means there will be a delay when attempting to view the image since it
> isn't loaded yet. For the Navigation Overlay, there is no browser
> heuristic to know it should start to load the image prior to the user
> clicking on the nav menu button. So the images must be loaded
> unconditionally, but in a deprioritized way that does not compete with
> loading resources in the critical rendering path.
>
> For more, see docs on web.dev: https://web.dev/articles/fetch-priority
> #lower-carousel-priority

New description:

 This ticket is a companion to the corresponding
 [https://github.com/WordPress/gutenberg/issues/76181 Gutenberg#76181] and
 [https://github.com/WordPress/gutenberg/issues/76301 Gutenberg#76301]
 issues.

 When an `IMG` is added to the new Navigation Overlay in WP 7.0, it can get
 misidentified as deserving `fetchpriority=high` when the actual LCP
 element `IMG` is further down it the page.

 While the [https://github.com/WordPress/gutenberg/pull/76208 Gutenberg PR]
 addresses this issue by adding `fetchpriority=low` to such `IMG` tags, the
 logic in `wp_get_loading_optimization_attributes()` needs to be updated to
 account for such tags so that they do not get lazy-loaded. WHen an image
 is in the Navigation Overlay or somewhere else that is occluded from view
 (e.g. a Details block or non-initial carousel slide), it is very important
 for the `IMG` to not get lazy-loaded because it means there will be a
 delay when attempting to view the image since it isn't loaded yet. For the
 Navigation Overlay, there is no browser heuristic to know it should start
 to load the image prior to the user clicking on the nav menu button. So
 the images must be loaded unconditionally, but in a deprioritized way that
 does not compete with loading resources in the critical rendering path.

 For more, see docs on web.dev: https://web.dev/articles/fetch-priority
 #lower-carousel-priority

 Similarly, when a block is displayed conditionally in a viewport with
 block visibility, it may erroneously get `fetchpriority=high` even though
 it is not displayed. This is due to logic in
 `wp_get_loading_optimization_attributes()` and
 `wp_maybe_add_fetchpriority_high_attr()` and it can be avoided by adding
 `fetchpriority=auto` to `IMG` tags in such blocks. See
 [https://github.com/WordPress/gutenberg/issues/76301 Gutenberg issue]. A
 further needed improvement is to avoid `IMG` tags with
 `fetchpriority=auto` from contributing to the overall media count so that
 that don't cause lazy-loading to be added prematurely.

--

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