vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-07-01 15:50:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Media: Increase default for wp_omit_loading_attr_threshold to 3.

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@55816 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Felix Arntz
2023-05-16 18:50:11 +00:00
parent 35c0ab3c74
commit a56a83fc6c
2 changed files with 37 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-includes/media.php
View File

@@ -5435,7 +5435,7 @@ function wp_get_webp_info( $filename ) {
*
* Under the hood, the function uses {@see wp_increase_content_media_count()} every time it is called for an element
* within the main content. If the element is the very first content element, the `loading` attribute will be omitted.
* This default threshold of 1 content element to omit the `loading` attribute for can be customized using the
* This default threshold of 3 content elements to omit the `loading` attribute for can be customized using the
* {@see 'wp_omit_loading_attr_threshold'} filter.
*
* @since 5.9.0
@@ -5485,7 +5485,7 @@ function wp_get_loading_attr_default( $context ) {
/**
* Gets the threshold for how many of the first content media elements to not lazy-load.
*
* This function runs the {@see 'wp_omit_loading_attr_threshold'} filter, which uses a default threshold value of 1.
* This function runs the {@see 'wp_omit_loading_attr_threshold'} filter, which uses a default threshold value of 3.
* The filter is only run once per page load, unless the `$force` parameter is used.
*
* @since 5.9.0
@@ -5506,10 +5506,11 @@ function wp_omit_loading_attr_threshold( $force = false ) {
* for only the very first content media element.
*
* @since 5.9.0
* @since 6.3.0 The default threshold was changed from 1 to 3.
*
* @param int $omit_threshold The number of media elements where the `loading` attribute will not be added. Default 1.
* @param int $omit_threshold The number of media elements where the `loading` attribute will not be added. Default 3.
*/
$omit_threshold = apply_filters( 'wp_omit_loading_attr_threshold', 1 );
$omit_threshold = apply_filters( 'wp_omit_loading_attr_threshold', 3 );
}
return $omit_threshold;

61
tests/phpunit/tests/media.php
View File

@@ -3585,8 +3585,10 @@ EOF;
// and in the main query, and do not increase the content media count.
$this->assertSame( 'lazy', wp_get_loading_attr_default( 'wp_get_attachment_image' ) );
// Return `false` if in the loop and in the main query and it is the first element.
$this->assertFalse( wp_get_loading_attr_default( $context ) );
// Return `false` in the main query for first three element.
$this->assertFalse( wp_get_loading_attr_default( $context ), 'Expected first image to not be lazy-loaded.' );
$this->assertFalse( wp_get_loading_attr_default( $context ), 'Expected second image to not be lazy-loaded.' );
$this->assertFalse( wp_get_loading_attr_default( $context ), 'Expected third image to not be lazy-loaded.' );
// Return 'lazy' if in the loop and in the main query for any subsequent elements.
$this->assertSame( 'lazy', wp_get_loading_attr_default( $context ) );
@@ -3618,19 +3620,14 @@ EOF;
$this->reset_content_media_count();
$this->reset_omit_loading_attr_filter();
// Use the filter to alter the threshold for not lazy-loading to the first three elements.
add_filter(
'wp_omit_loading_attr_threshold',
function() {
return 3;
}
);
// Use the filter to alter the threshold for not lazy-loading to the first five elements.
$this->force_omit_loading_attr_threshold( 5 );
while ( have_posts() ) {
the_post();
// Due to the filter, now the first three elements should not be lazy-loaded, i.e. return `false`.
for ( $i = 0; $i < 3; $i++ ) {
// Due to the filter, now the first five elements should not be lazy-loaded, i.e. return `false`.
for ( $i = 0; $i < 5; $i++ ) {
$this->assertFalse( wp_get_loading_attr_default( 'the_content' ) );
}
@@ -3655,12 +3652,7 @@ EOF;
$lazy_iframe2 = wp_iframe_tag_add_loading_attr( $iframe2, 'the_content' );
// Use a threshold of 2.
add_filter(
'wp_omit_loading_attr_threshold',
function() {
return 2;
}
);
$this->force_omit_loading_attr_threshold( 2 );
// Following the threshold of 2, the first two content media elements should not be lazy-loaded.
$content_unfiltered = $img1 . $iframe1 . $img2 . $img3 . $iframe2;
@@ -3690,24 +3682,20 @@ EOF;
public function test_wp_omit_loading_attr_threshold() {
$this->reset_omit_loading_attr_filter();
// Apply filter, ensure default value of 1.
// Apply filter, ensure default value of 3.
$omit_threshold = wp_omit_loading_attr_threshold();
$this->assertSame( 1, $omit_threshold );
$this->assertSame( 3, $omit_threshold );
// Add a filter that changes the value to 1. However, the filter is not applied a subsequent time in a single
// page load by default, so the value is still 3.
$this->force_omit_loading_attr_threshold( 1 );
// Add a filter that changes the value to 3. However, the filter is not applied a subsequent time in a single
// page load by default, so the value is still 1.
add_filter(
'wp_omit_loading_attr_threshold',
function() {
return 3;
}
);
$omit_threshold = wp_omit_loading_attr_threshold();
$this->assertSame( 1, $omit_threshold );
$this->assertSame( 3, $omit_threshold );
// Only by enforcing a fresh check, the filter gets re-applied.
$omit_threshold = wp_omit_loading_attr_threshold( true );
$this->assertSame( 3, $omit_threshold );
$this->assertSame( 1, $omit_threshold );
}
/**
@@ -3725,6 +3713,7 @@ EOF;
// Do not add srcset, sizes, or decoding attributes as they are irrelevant for this test.
add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );
add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
$this->force_omit_loading_attr_threshold( 1 );
$img1 = get_image_tag( self::$large_id, '', '', '', 'large' );
$img2 = get_image_tag( self::$large_id, '', '', '', 'medium' );
@@ -3777,6 +3766,7 @@ EOF;
return $attr;
}
);
$this->force_omit_loading_attr_threshold( 1 );
$content_img = get_image_tag( self::$large_id, '', '', '', 'large' );
$lazy_content_img = wp_img_tag_add_loading_attr( $content_img, 'the_content' );
@@ -4012,6 +4002,19 @@ EOF;
}
}
/**
* Change the omit loading attribute threshold value.
*
* @param int $threshold Threshold value to change.
*/
public function force_omit_loading_attr_threshold( $threshold ) {
add_filter(
'wp_omit_loading_attr_threshold',
static function() use ( $threshold ) {
return $threshold;
}
);
}
}
/**