Changeset 55816

Timestamp:

05/16/2023 06:50:11 PM (5 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:

• src/wp-includes/media.php (modified) (3 diffs)
• tests/phpunit/tests/media.php (modified) (7 diffs)

trunk/src/wp-includes/media.php

@@ -5436 +5436 @@
  * 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.
  *
@@ -5486 +5486 @@
  * 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.
  *
@@ -5507 +5507 @@
          *
          * @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 );
     }
 

trunk/tests/phpunit/tests/media.php

@@ -3586 +3586 @@
             $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.
@@ -3619 +3621 @@
         $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' ) );
             }
@@ -3656 +3653 @@
 
         // 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.
@@ -3691 +3683 @@
         $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 );
-
-        // 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;
-            }
-        );
+        $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 );
+
         $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 );
     }
 
@@ -3726 +3714 @@
         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' );
@@ -3778 +3767 @@
             }
         );
+        $this->force_omit_loading_attr_threshold( 1 );
 
         $content_img      = get_image_tag( self::$large_id, '', '', '', 'large' );
@@ -4013 +4003 @@
     }
 
+    /**
+     * 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;
+            }
+        );
+    }
 }