Changeset 52065 for trunk/src/wp-includes/post-thumbnail-template.php

Timestamp:

11/09/2021 12:34:17 AM (3 years ago)

Author:

flixos90

Message:

Media: Refine the heuristics to exclude certain images and iframes from being lazy-loaded to improve performance.

This changeset implements the refined lazy-loading behavior outlined in ​https://make.wordpress.org/core/2021/07/15/refining-wordpress-cores-lazy-loading-implementation/ in order to improve the Largest Contentful Paint metric, which can see a regression from images or iframes above the fold being lazy-loaded. Adjusting this so far has been possible for developers via filters and still is, however this enhancement brings a more accurate behavior out of the box for the majority of themes.

Specifically, this changeset skips the very first "content image or iframe" on the page from being lazy-loaded. "Content image or iframe" denotes any image or iframe that is found within content of any post in the current main query loop as well as any featured image of such a post. This applies both to "singular" as well as "archive" content: On a "singular" page the first image/iframe of the post is not lazy-loaded, while on an "archive" page the first image/iframe of the _first_ post in the query is not lazy-loaded.

This approach refines the lazy-loading behavior correctly for the majority of themes, which use a single-column layout for post content. For themes with multi-column layouts, a new wp_omit_loading_attr_threshold filter can be used to change how many of the first images/iframes are being skipped from lazy-loaded (default is 1). For example, a theme using a three-column grid of latest posts for archives could use the filter to override the threshold to 3 on archive pages, so that the first three content images/iframes would not be lazy-loaded.

Props adamsilverstein, azaozz, flixos90, hellofromtonya, jonoaldersonwp, mte90, rviscomi, tweetythierry, westonruter.
Fixes #53675. See #50425.

File:

• trunk/src/wp-includes/post-thumbnail-template.php (modified) (1 diff)

trunk/src/wp-includes/post-thumbnail-template.php

@@ -187 +187 @@
         }
 
+        // Get the 'loading' attribute value to use as default, taking precedence over the default from
+        // `wp_get_attachment_image()`.
+        $loading = wp_get_loading_attr_default( 'the_post_thumbnail' );
+
+        // Add the default to the given attributes unless they already include a 'loading' directive.
+        if ( empty( $attr ) ) {
+            $attr = array( 'loading' => $loading );
+        } elseif ( is_array( $attr ) && ! array_key_exists( 'loading', $attr ) ) {
+            $attr['loading'] = $loading;
+        } elseif ( is_string( $attr ) && ! preg_match( '/(^|&)loading=', $attr ) ) {
+            $attr .= '&loading=' . $loading;
+        }
+
         $html = wp_get_attachment_image( $post_thumbnail_id, $size, false, $attr );