[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 needs-dev-note  |     Focuses:  performance
--------------------------------------+--------------------------
Changes (by flixos90):

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


Comment:

 In [changeset:"56037" 56037]:
 {{{
 #!CommitTicketReference repository="" revision="56037"
 Media: Automatically add `fetchpriority="high"` to hero image to improve
 load time performance.

 This changeset adds support for the `fetchpriority` attribute, which is
 typically added to a single image in each HTML response with a value of
 "high". This enhances load time performance (also Largest Contentful
 Paint, or LCP) by telling the browser to prioritize this image for
 downloading even before the layout of the page has been computed. In lab
 tests, this has shown to improve LCP performance by ~10% on average.

 Specifically, `fetchpriority="high"` is added to the first image that
 satisfies all of the following conditions:
 * The image is not lazy-loaded, i.e. does not have `loading="lazy"`.
 * The image does not already have a (conflicting) `fetchpriority`
 attribute.
 * The size of of the image (i.e. width * height) is greater than 50,000
 squarepixels.

 While these heuristics are based on several field analyses, there will
 always be room for optimization. Sites can customize the squarepixel
 threshold using a new filter `wp_min_priority_img_pixels` which should
 return an integer for the value.

 Since the logic for adding `fetchpriority="high"` is heavily intertwined
 with the logic for adding `loading="lazy"`, yet the features should work
 decoupled from each other, the majority of code changes in this changeset
 is refactoring of the existing lazy-loading logic to be reusable. For this
 purpose, a new function `wp_get_loading_optimization_attributes()` has
 been introduced which returns an associative array of performance-relevant
 attributes for a given HTML element. This function replaces
 `wp_get_loading_attr_default()`, which has been deprecated. As another
 result of that change, a new function
 `wp_img_tag_add_loading_optimization_attrs()` replaces the more specific
 `wp_img_tag_add_loading_attr()`, which has been deprecated as well.

 See https://make.wordpress.org/core/2023/05/02/proposal-for-enhancing-lcp-
 image-performance-with-fetchpriority/ for the original proposal and
 additional context.

 Props thekt12, joemcgill, spacedmonkey, mukesh27, costdev, 10upsimon.
 Fixes #58235.
 }}}

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