Changeset 55847 for trunk/src/wp-includes/class-wp-query.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/src/wp-includes/class-wp-query.php (modified) (4 diffs)

trunk/src/wp-includes/class-wp-query.php

@@ -108 +108 @@
      */
     public $current_post = -1;
+
+    /**
+     * Whether the caller is before the loop.
+     *
+     * @since 6.3.0
+     * @var bool
+     */
+    public $before_loop = true;
 
     /**
@@ -518 +526 @@
         $this->current_post = -1;
         $this->in_the_loop  = false;
+        $this->before_loop  = true;
         unset( $this->request );
         unset( $this->post );
@@ -3632 +3641 @@
 
         $this->in_the_loop = true;
+        $this->before_loop = false;
 
         if ( -1 == $this->current_post ) { // Loop has just started.
@@ -3672 +3682 @@
             $this->rewind_posts();
         } elseif ( 0 === $this->post_count ) {
+            $this->before_loop = false;
+
             /**
              * Fires if no results are found in a post query.