Make WordPress Core

Changeset 55816


Ignore:
Timestamp:
05/16/2023 06:50:11 PM (13 months ago)
Author:
flixos90
Message:

Media: Increase default for wp_omit_loading_attr_threshold to 3.

The previous default threshold for how many content images to skip lazy-loading on (which was just 1) has proven to be too strict: HTTP Archive data shows that >70% of sites have up to 3 equal-sized images in the initial viewport, each of which could be the LCP image and therefore should not be lazy-loaded. Lazy-loading too many images has adverse effects on load time performance, while increasing the default threshold will not negatively affect load time performance even for sites where a threshold of 1 would be the perfect choice.

The change of default value in this changeset will improve performance for more WordPress sites out of the box. The wp_omit_loading_attr_threshold filter can still be used to customize and fine tune the value where needed.

Props thekt12, spacedmonkey, westonruter, flixos90.
Fixes #58213.

Location:
trunk
Files:
2 edited

Legend:

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

    r55764 r55816  
    54365436 * Under the hood, the function uses {@see wp_increase_content_media_count()} every time it is called for an element
    54375437 * within the main content. If the element is the very first content element, the `loading` attribute will be omitted.
    5438  * This default threshold of 1 content element to omit the `loading` attribute for can be customized using the
     5438 * This default threshold of 3 content elements to omit the `loading` attribute for can be customized using the
    54395439 * {@see 'wp_omit_loading_attr_threshold'} filter.
    54405440 *
     
    54865486 * Gets the threshold for how many of the first content media elements to not lazy-load.
    54875487 *
    5488  * This function runs the {@see 'wp_omit_loading_attr_threshold'} filter, which uses a default threshold value of 1.
     5488 * This function runs the {@see 'wp_omit_loading_attr_threshold'} filter, which uses a default threshold value of 3.
    54895489 * The filter is only run once per page load, unless the `$force` parameter is used.
    54905490 *
     
    55075507         *
    55085508         * @since 5.9.0
     5509         * @since 6.3.0 The default threshold was changed from 1 to 3.
    55095510         *
    5510          * @param int $omit_threshold The number of media elements where the `loading` attribute will not be added. Default 1.
     5511         * @param int $omit_threshold The number of media elements where the `loading` attribute will not be added. Default 3.
    55115512         */
    5512         $omit_threshold = apply_filters( 'wp_omit_loading_attr_threshold', 1 );
     5513        $omit_threshold = apply_filters( 'wp_omit_loading_attr_threshold', 3 );
    55135514    }
    55145515
  • trunk/tests/phpunit/tests/media.php

    r55467 r55816  
    35863586            $this->assertSame( 'lazy', wp_get_loading_attr_default( 'wp_get_attachment_image' ) );
    35873587
    3588             // Return `false` if in the loop and in the main query and it is the first element.
    3589             $this->assertFalse( wp_get_loading_attr_default( $context ) );
     3588            // Return `false` in the main query for first three element.
     3589            $this->assertFalse( wp_get_loading_attr_default( $context ), 'Expected first image to not be lazy-loaded.' );
     3590            $this->assertFalse( wp_get_loading_attr_default( $context ), 'Expected second image to not be lazy-loaded.' );
     3591            $this->assertFalse( wp_get_loading_attr_default( $context ), 'Expected third image to not be lazy-loaded.' );
    35903592
    35913593            // Return 'lazy' if in the loop and in the main query for any subsequent elements.
     
    36193621        $this->reset_omit_loading_attr_filter();
    36203622
    3621         // Use the filter to alter the threshold for not lazy-loading to the first three elements.
    3622         add_filter(
    3623             'wp_omit_loading_attr_threshold',
    3624             function() {
    3625                 return 3;
    3626             }
    3627         );
     3623        // Use the filter to alter the threshold for not lazy-loading to the first five elements.
     3624        $this->force_omit_loading_attr_threshold( 5 );
    36283625
    36293626        while ( have_posts() ) {
    36303627            the_post();
    36313628
    3632             // Due to the filter, now the first three elements should not be lazy-loaded, i.e. return `false`.
    3633             for ( $i = 0; $i < 3; $i++ ) {
     3629            // Due to the filter, now the first five elements should not be lazy-loaded, i.e. return `false`.
     3630            for ( $i = 0; $i < 5; $i++ ) {
    36343631                $this->assertFalse( wp_get_loading_attr_default( 'the_content' ) );
    36353632            }
     
    36563653
    36573654        // Use a threshold of 2.
    3658         add_filter(
    3659             'wp_omit_loading_attr_threshold',
    3660             function() {
    3661                 return 2;
    3662             }
    3663         );
     3655        $this->force_omit_loading_attr_threshold( 2 );
    36643656
    36653657        // Following the threshold of 2, the first two content media elements should not be lazy-loaded.
     
    36913683        $this->reset_omit_loading_attr_filter();
    36923684
    3693         // Apply filter, ensure default value of 1.
     3685        // Apply filter, ensure default value of 3.
    36943686        $omit_threshold = wp_omit_loading_attr_threshold();
    3695         $this->assertSame( 1, $omit_threshold );
    3696 
    3697         // Add a filter that changes the value to 3. However, the filter is not applied a subsequent time in a single
    3698         // page load by default, so the value is still 1.
    3699         add_filter(
    3700             'wp_omit_loading_attr_threshold',
    3701             function() {
    3702                 return 3;
    3703             }
    3704         );
     3687        $this->assertSame( 3, $omit_threshold );
     3688
     3689        // Add a filter that changes the value to 1. However, the filter is not applied a subsequent time in a single
     3690        // page load by default, so the value is still 3.
     3691        $this->force_omit_loading_attr_threshold( 1 );
     3692
    37053693        $omit_threshold = wp_omit_loading_attr_threshold();
    3706         $this->assertSame( 1, $omit_threshold );
     3694        $this->assertSame( 3, $omit_threshold );
    37073695
    37083696        // Only by enforcing a fresh check, the filter gets re-applied.
    37093697        $omit_threshold = wp_omit_loading_attr_threshold( true );
    3710         $this->assertSame( 3, $omit_threshold );
     3698        $this->assertSame( 1, $omit_threshold );
    37113699    }
    37123700
     
    37263714        add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
    37273715        add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
     3716        $this->force_omit_loading_attr_threshold( 1 );
    37283717
    37293718        $img1      = get_image_tag( self::$large_id, '', '', '', 'large' );
     
    37783767            }
    37793768        );
     3769        $this->force_omit_loading_attr_threshold( 1 );
    37803770
    37813771        $content_img      = get_image_tag( self::$large_id, '', '', '', 'large' );
     
    40134003    }
    40144004
     4005    /**
     4006     * Change the omit loading attribute threshold value.
     4007     *
     4008     * @param int $threshold Threshold value to change.
     4009     */
     4010    public function force_omit_loading_attr_threshold( $threshold ) {
     4011        add_filter(
     4012            'wp_omit_loading_attr_threshold',
     4013            static function() use ( $threshold ) {
     4014                return $threshold;
     4015            }
     4016        );
     4017    }
    40154018}
    40164019
Note: See TracChangeset for help on using the changeset viewer.