Make WordPress Core


Ignore:
Timestamp:
06/26/2023 04:15:12 PM (20 months ago)
Author:
flixos90
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/pluggable.php

    r55990 r56037  
    28162816            'force_display' => false,
    28172817            'loading'       => null,
     2818            'fetchpriority' => null,
    28182819            'extra_attr'    => '',
    28192820            'decoding'      => 'async',
    28202821        );
    28212822
    2822         if ( wp_lazy_loading_enabled( 'img', 'get_avatar' ) ) {
    2823             $defaults['loading'] = wp_get_loading_attr_default( 'get_avatar' );
    2824         }
    2825 
    28262823        if ( empty( $args ) ) {
    28272824            $args = array();
     
    28402837            $args['width'] = $args['size'];
    28412838        }
     2839
     2840        // Update args with loading optimized attributes.
     2841        $loading_optimization_attr = wp_get_loading_optimization_attributes( 'img', $args, 'get_avatar' );
     2842
     2843        $args = array_merge( $args, $loading_optimization_attr );
    28422844
    28432845        if ( is_object( $id_or_email ) && isset( $id_or_email->comment_ID ) ) {
     
    28932895        }
    28942896
    2895         // Add `loading` and `decoding` attributes.
     2897        // Add `loading`, `fetchpriority` and `decoding` attributes.
    28962898        $extra_attr = $args['extra_attr'];
    28972899
     
    29142916
    29152917            $extra_attr .= "decoding='{$args['decoding']}'";
     2918        }
     2919
     2920        // Add support for `fetchpriority`.
     2921        if ( in_array( $args['fetchpriority'], array( 'high', 'low', 'auto' ), true )
     2922            && ! preg_match( '/\bfetchpriority\s*=/', $extra_attr )
     2923        ) {
     2924            if ( ! empty( $extra_attr ) ) {
     2925                $extra_attr .= ' ';
     2926            }
     2927
     2928            $extra_attr .= "fetchpriority='{$args['fetchpriority']}'";
    29162929        }
    29172930
Note: See TracChangeset for help on using the changeset viewer.