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

Timestamp:

05/22/2023 07:11:36 PM (2 weeks ago)

Author:

flixos90

Message:

Media: Conditionally skip lazy-loading on images before the loop to improve LCP performance.

When the logic to exclude images that likely appear above the fold from being lazy-loaded was introduced in WordPress 5.9, initially only images that appear within the main query loop were being considered. However, there is a good chance that images above the fold are rendered before the loop starts, for example in the header template part.

It is particularly common for a theme to display the featured image for a single post in the header. Based on HTTP Archive data from February 2023, the majority of LCP images that are still being lazy-loaded on WordPress sites use the wp-post-image class, i.e. are featured images.

This changeset enhances the logic in wp_get_loading_attr_default() to not lazy-load images that appear within or after the header template part and before the query loop, using a new WP_Query::$before_loop property.

For block themes, this was for the most part already addressed in [55318], however this enhancement implements the solution in a more generally applicable way that brings the improvement to classic themes as well.

Props thekt12, flixos90, spacedmonkey, costdev, zunaid321, mukesh27.
Fixes #58211.
See #53675, #56930.

File:

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

trunk/tests/phpunit/tests/media.php

@@ -3560 +3560 @@
      */
     public function test_wp_get_loading_attr_default( $context ) {
-        global $wp_query, $wp_the_query;
-
         // Return 'lazy' by default.
         $this->assertSame( 'lazy', wp_get_loading_attr_default( 'test' ) );
@@ -3569 +3567 @@
         $this->assertSame( 'lazy', wp_get_loading_attr_default( $context ) );
 
-        $wp_query = new WP_Query( array( 'post__in' => array( self::$post_ids['publish'] ) ) );
+        $query = $this->get_new_wp_query_for_published_post();
         $this->reset_content_media_count();
         $this->reset_omit_loading_attr_filter();
@@ -3580 +3578 @@
 
             // Set as main query.
-            $wp_the_query = $wp_query;
+            $this->set_main_query( $query );
 
             // For contexts other than for the main content, still return 'lazy' even in the loop
@@ -3614 +3612 @@
      */
     public function test_wp_omit_loading_attr_threshold_filter() {
-        global $wp_query, $wp_the_query;
-
-        $wp_query     = new WP_Query( array( 'post__in' => array( self::$post_ids['publish'] ) ) );
-        $wp_the_query = $wp_query;
+        $query = $this->get_new_wp_query_for_published_post();
+        $this->set_main_query( $query );
         $this->reset_content_media_count();
         $this->reset_omit_loading_attr_filter();
@@ -3641 +3637 @@
      */
     public function test_wp_filter_content_tags_with_wp_get_loading_attr_default() {
-        global $wp_query, $wp_the_query;
-
         $img1         = get_image_tag( self::$large_id, '', '', '', 'large' );
         $iframe1      = '<iframe src="https://www.example.com" width="640" height="360"></iframe>';
@@ -3660 +3654 @@
         $content_expected   = wp_img_tag_add_decoding_attr( $content_expected, 'the_content' );
 
-        $wp_query     = new WP_Query( array( 'post__in' => array( self::$post_ids['publish'] ) ) );
-        $wp_the_query = $wp_query;
+        $query = $this->get_new_wp_query_for_published_post();
+        $this->set_main_query( $query );
         $this->reset_content_media_count();
         $this->reset_omit_loading_attr_filter();
@@ -3697 +3691 @@
         $omit_threshold = wp_omit_loading_attr_threshold( true );
         $this->assertSame( 1, $omit_threshold );
+    }
+
+    /**
+     * Tests that wp_get_loading_attr_default() returns the expected loading attribute value before loop but after get_header if not main query.
+     *
+     * @ticket 58211
+     *
+     * @covers ::wp_get_loading_attr_default
+     *
+     * @dataProvider data_wp_get_loading_attr_default_before_and_no_loop
+     *
+     * @param string $context Context for the element for which the `loading` attribute value is requested.
+     */
+    public function test_wp_get_loading_attr_default_before_loop_if_not_main_query( $context ) {
+        global $wp_query;
+
+        $wp_query = $this->get_new_wp_query_for_published_post();
+        $this->reset_content_media_count();
+        $this->reset_omit_loading_attr_filter();
+
+        do_action( 'get_header' );
+
+        // Lazy if not main query.
+        $this->assertSame( 'lazy', wp_get_loading_attr_default( $context ) );
+    }
+
+    /**
+     * Tests that wp_get_loading_attr_default() returns the expected loading attribute value before loop but after get_header in main query but header was not called.
+     *
+     * @ticket 58211
+     *
+     * @covers ::wp_get_loading_attr_default
+     *
+     * @dataProvider data_wp_get_loading_attr_default_before_and_no_loop
+     *
+     * @param string $context Context for the element for which the `loading` attribute value is requested.
+     */
+    public function test_wp_get_loading_attr_default_before_loop_in_main_query_but_header_not_called( $context ) {
+        global $wp_query;
+
+        $wp_query = $this->get_new_wp_query_for_published_post();
+        $this->set_main_query( $wp_query );
+        $this->reset_content_media_count();
+        $this->reset_omit_loading_attr_filter();
+
+        // Lazy if header not called.
+        $this->assertSame( 'lazy', wp_get_loading_attr_default( $context ) );
+    }
+
+    /**
+     * Tests that wp_get_loading_attr_default() returns the expected loading attribute value before loop but after get_header for main query.
+     *
+     * @ticket 58211
+     *
+     * @covers ::wp_get_loading_attr_default
+     *
+     * @dataProvider data_wp_get_loading_attr_default_before_and_no_loop
+     *
+     * @param string $context Context for the element for which the `loading` attribute value is requested.
+     */
+    public function test_wp_get_loading_attr_default_before_loop_if_main_query( $context ) {
+        global $wp_query;
+
+        $wp_query = $this->get_new_wp_query_for_published_post();
+        $this->set_main_query( $wp_query );
+        $this->reset_content_media_count();
+        $this->reset_omit_loading_attr_filter();
+
+        do_action( 'get_header' );
+        $this->assertFalse( wp_get_loading_attr_default( $context ) );
+    }
+
+    /**
+     * Tests that wp_get_loading_attr_default() returns the expected loading attribute value after get_header and after loop.
+     *
+     * @ticket 58211
+     *
+     * @covers ::wp_get_loading_attr_default
+     *
+     * @dataProvider data_wp_get_loading_attr_default_before_and_no_loop
+     *
+     * @param string $context Context for the element for which the `loading` attribute value is requested.
+     */
+    public function test_wp_get_loading_attr_default_after_loop( $context ) {
+        global $wp_query;
+
+        $wp_query = $this->get_new_wp_query_for_published_post();
+        $this->set_main_query( $wp_query );
+        $this->reset_content_media_count();
+        $this->reset_omit_loading_attr_filter();
+
+        do_action( 'get_header' );
+
+        while ( have_posts() ) {
+            the_post();
+        }
+        $this->assertSame( 'lazy', wp_get_loading_attr_default( $context ) );
+    }
+
+    /**
+     * Tests that wp_get_loading_attr_default() returns the expected loading attribute if no loop.
+     *
+     * @ticket 58211
+     *
+     * @covers ::wp_get_loading_attr_default
+     *
+     * @dataProvider data_wp_get_loading_attr_default_before_and_no_loop
+     *
+     * @param string $context Context for the element for which the `loading` attribute value is requested.
+     */
+    public function test_wp_get_loading_attr_default_no_loop( $context ) {
+        global $wp_query;
+
+        $wp_query = $this->get_new_wp_query_for_published_post();
+        $this->set_main_query( $wp_query );
+        $this->reset_content_media_count();
+        $this->reset_omit_loading_attr_filter();
+
+        // Ensure header and footer is called.
+        do_action( 'get_header' );
+        do_action( 'get_footer' );
+
+        // Load lazy if the there is no loop and footer was called.
+        $this->assertSame( 'lazy', wp_get_loading_attr_default( $context ) );
+    }
+
+    /**
+     * Data provider.
+     *
+     * @return array[]
+     */
+    public function data_wp_get_loading_attr_default_before_and_no_loop() {
+        return array(
+            array( 'wp_get_attachment_image' ),
+            array( 'the_post_thumbnail' ),
+        );
     }
 
@@ -4167 +4297 @@
         );
     }
+
+    /**
+     * Returns a new WP_Query.
+     *
+     * @global WP_Query $wp_query WordPress Query object.
+     *
+     * @return WP_Query a new query.
+     */
+    public function get_new_wp_query_for_published_post() {
+        global $wp_query;
+
+        // New query to $wp_query. update global for the loop.
+        $wp_query = new WP_Query( array( 'post__in' => array( self::$post_ids['publish'] ) ) );
+
+        return $wp_query;
+    }
+
+    /**
+     * Sets a query as main query.
+     *
+     * @global WP_Query $wp_the_query WordPress Query object.
+     *
+     * @param WP_Query $query query to be set as main query.
+     */
+    public function set_main_query( $query ) {
+        global $wp_the_query;
+        $wp_the_query = $query;
+    }
 }