Changeset 55847 for trunk/src/wp-includes/class-wp-query.php

Timestamp:

05/22/2023 07:11:36 PM (3 years 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.