Make WordPress Core

Changeset 56143


Ignore:
Timestamp:
07/05/2023 09:36:23 PM (22 months ago)
Author:
flixos90
Message:

Media: Ensure that large images before the main query loop are counted towards lazy-loading threshold.

Following [55318], [55847], and [56142], certain images in the header of the page have received support for potentially receiving fetchpriority="high" and having the loading="lazy" attribute omitted. However, these images being present did not affect the "content media count" which counts the images towards a certain threshold so that the first ones are not lazy-loaded.

This changeset also increases that count for such header images if they are larger than a certain threshold. The threshold is used to avoid e.g. a header with lots of small images such as icon graphics to skew the lazy-loading behavior.

Props thekt12, spacedmonkey, flixos90.
Fixes #58635.

Location:
trunk
Files:
2 edited

Legend:

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

    r56142 r56143  
    55895589        return $loading_attributes;
    55905590    };
     5591    // Closure to increase media count for images with certain minimum threshold, mostly used for header images.
     5592    $maybe_increase_content_media_count = static function() use ( $attr ) {
     5593        /** This filter is documented in wp-admin/includes/media.php */
     5594        $wp_min_priority_img_pixels = apply_filters( 'wp_min_priority_img_pixels', 50000 );
     5595        // Images with a certain minimum size in the header of the page are also counted towards the threshold.
     5596        if ( $wp_min_priority_img_pixels <= $attr['width'] * $attr['height'] ) {
     5597            wp_increase_content_media_count();
     5598        }
     5599    };
    55915600
    55925601    $loading_attrs = array();
     
    56415650    $header_area = WP_TEMPLATE_PART_AREA_HEADER;
    56425651    if ( "template_part_{$header_area}" === $context ) {
     5652        // Increase media count if there are images in header above a certian minimum size threshold.
     5653        $maybe_increase_content_media_count();
    56435654        return $postprocess( $loading_attrs, true );
    56445655    }
     
    56465657    // The custom header image is always expected to be in the header.
    56475658    if ( 'get_header_image_tag' === $context ) {
     5659        // Increase media count if there are images in header above a certian minimum size threshold.
     5660        $maybe_increase_content_media_count();
    56485661        return $postprocess( $loading_attrs, true );
    56495662    }
     
    56725685            && did_action( 'get_header' ) && ! did_action( 'get_footer' )
    56735686        ) {
     5687            // Increase media count if there are images in header above a certian minimum size threshold.
     5688            $maybe_increase_content_media_count();
    56745689            return $postprocess( $loading_attrs, true );
    56755690        }
  • trunk/tests/phpunit/tests/media.php

    r56065 r56143  
    50965096
    50975097    /**
     5098     * @ticket 58635
     5099     *
     5100     * @covers ::wp_get_loading_optimization_attributes
     5101     */
     5102    public function test_wp_get_loading_optimization_attributes_header_block_template_increase_media_count() {
     5103        $attr = $this->get_width_height_for_high_priority();
     5104        wp_get_loading_optimization_attributes( 'img', $attr, 'template_part_' . WP_TEMPLATE_PART_AREA_HEADER );
     5105
     5106        // Images with a certain minimum size in the header of the page are also counted towards the threshold.
     5107        $this->assertSame( 1, wp_increase_content_media_count( 0 ) );
     5108    }
     5109
     5110    /**
     5111     * @ticket 58635
     5112     *
     5113     * @covers ::wp_get_loading_optimization_attributes
     5114     */
     5115    public function test_wp_get_loading_optimization_attributes_header_image_tag_increase_media_count() {
     5116        $attr = $this->get_width_height_for_high_priority();
     5117        wp_get_loading_optimization_attributes( 'img', $attr, 'get_header_image_tag' );
     5118
     5119        // Images with a certain minimum size in the header of the page are also counted towards the threshold.
     5120        $this->assertSame( 1, wp_increase_content_media_count( 0 ) );
     5121    }
     5122
     5123    /**
     5124     * @ticket 58635
     5125     *
     5126     * @covers ::wp_get_loading_optimization_attributes
     5127     *
     5128     * @dataProvider data_wp_get_loading_attr_default_before_and_no_loop
     5129     *
     5130     * @param string $context Context for the element for which the `loading` attribute value is requested.
     5131     */
     5132    public function test_wp_get_loading_optimization_attributes_image_before_loop_increase_media_count( $context ) {
     5133        global $wp_query;
     5134
     5135        $wp_query = $this->get_new_wp_query_for_published_post();
     5136        $this->set_main_query( $wp_query );
     5137        do_action( 'get_header' );
     5138
     5139        $attr = $this->get_width_height_for_high_priority();
     5140        wp_get_loading_optimization_attributes( 'img', $attr, $context );
     5141
     5142        // Images with a certain minimum size in the header of the page are also counted towards the threshold.
     5143        $this->assertSame( 1, wp_increase_content_media_count( 0 ) );
     5144    }
     5145
     5146    /**
    50985147     * Helper method to keep track of the last context returned by the 'wp_get_attachment_image_context' filter.
    50995148     *
Note: See TracChangeset for help on using the changeset viewer.