Changeset 55816 for trunk/tests/phpunit/tests/media.php

Timestamp:

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

File:

• trunk/tests/phpunit/tests/media.php (modified) (7 diffs)

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;
+            }
+        );
+    }
 }