Changeset 55318 for trunk/src/wp-includes/media.php

Timestamp:

02/13/2023 06:32:40 PM (2 years ago)

Author:

flixos90

Message:

Media: Enhance logic to determine LCP image in block themes and avoid lazy-loading it.

[52065] originally introduced the logic to guess the LCP image based on certain heuristics and to not lazy-load that image. However, with the introduction of block themes, that logic was not functioning correctly, resulting in all featured images to be lazy-loaded, regardless of whether it was the LCP image or not.

Together with an update to the core/post-featured-image block included in [55079], this changeset fixes the logic to correctly handle featured images in block themes as well.

Additionally, in combination with an update to the core/template-part block from [55246], this changeset includes an enhancement which uses the benefits of block template parts to avoid lazy-loading images in the header block template part, making the lazy-loading heuristics even more accurate for sites using a block theme.

Props flixos90, adamsilverstein, mamaduka, antonvlasenko, shahidul95, reduanmasud, costdev, mukesh27, ironprogrammer, manfcarlo, robinwpdeveloper, spacedmonkey.
Fixes #56930.

File:

• trunk/src/wp-includes/media.php (modified) (1 diff)

trunk/src/wp-includes/media.php

@@ -5445 +5445 @@
  */
 function wp_get_loading_attr_default( $context ) {
-    // Only elements with 'the_content' or 'the_post_thumbnail' context have special handling.
-    if ( 'the_content' !== $context && 'the_post_thumbnail' !== $context ) {
+    // Skip lazy-loading for the overall block template, as it is handled more granularly.
+    if ( 'template' === $context ) {
+        return false;
+    }
+
+    // Do not lazy-load images in the header block template part, as they are likely above the fold.
+    $header_area = WP_TEMPLATE_PART_AREA_HEADER;
+    if ( "template_part_{$header_area}" === $context ) {
+        return false;
+    }
+
+    /*
+     * The first elements in 'the_content' or 'the_post_thumbnail' should not be lazy-loaded,
+     * as they are likely above the fold.
+     */
+    if ( 'the_content' === $context || 'the_post_thumbnail' === $context ) {
+        // Only elements within the main query loop have special handling.
+        if ( is_admin() || ! in_the_loop() || ! is_main_query() ) {
+            return 'lazy';
+        }
+
+        // Increase the counter since this is a main query content element.
+        $content_media_count = wp_increase_content_media_count();
+
+        // If the count so far is below the threshold, return `false` so that the `loading` attribute is omitted.
+        if ( $content_media_count <= wp_omit_loading_attr_threshold() ) {
+            return false;
+        }
+
+        // For elements after the threshold, lazy-load them as usual.
         return 'lazy';
     }
 
-    // Only elements within the main query loop have special handling.
-    if ( is_admin() || ! in_the_loop() || ! is_main_query() ) {
-        return 'lazy';
-    }
-
-    // Increase the counter since this is a main query content element.
-    $content_media_count = wp_increase_content_media_count();
-
-    // If the count so far is below the threshold, return `false` so that the `loading` attribute is omitted.
-    if ( $content_media_count <= wp_omit_loading_attr_threshold() ) {
-        return false;
-    }
-
-    // For elements after the threshold, lazy-load them as usual.
+    // Lazy-load by default for any unknown context.
     return 'lazy';
 }