Make WordPress Core


Ignore:
Timestamp:
02/13/2023 06:32:40 PM (17 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/media.php

    r55251 r55318  
    54455445 */
    54465446function wp_get_loading_attr_default( $context ) {
    5447     // Only elements with 'the_content' or 'the_post_thumbnail' context have special handling.
    5448     if ( 'the_content' !== $context && 'the_post_thumbnail' !== $context ) {
     5447    // Skip lazy-loading for the overall block template, as it is handled more granularly.
     5448    if ( 'template' === $context ) {
     5449        return false;
     5450    }
     5451
     5452    // Do not lazy-load images in the header block template part, as they are likely above the fold.
     5453    $header_area = WP_TEMPLATE_PART_AREA_HEADER;
     5454    if ( "template_part_{$header_area}" === $context ) {
     5455        return false;
     5456    }
     5457
     5458    /*
     5459     * The first elements in 'the_content' or 'the_post_thumbnail' should not be lazy-loaded,
     5460     * as they are likely above the fold.
     5461     */
     5462    if ( 'the_content' === $context || 'the_post_thumbnail' === $context ) {
     5463        // Only elements within the main query loop have special handling.
     5464        if ( is_admin() || ! in_the_loop() || ! is_main_query() ) {
     5465            return 'lazy';
     5466        }
     5467
     5468        // Increase the counter since this is a main query content element.
     5469        $content_media_count = wp_increase_content_media_count();
     5470
     5471        // If the count so far is below the threshold, return `false` so that the `loading` attribute is omitted.
     5472        if ( $content_media_count <= wp_omit_loading_attr_threshold() ) {
     5473            return false;
     5474        }
     5475
     5476        // For elements after the threshold, lazy-load them as usual.
    54495477        return 'lazy';
    54505478    }
    54515479
    5452     // Only elements within the main query loop have special handling.
    5453     if ( is_admin() || ! in_the_loop() || ! is_main_query() ) {
    5454         return 'lazy';
    5455     }
    5456 
    5457     // Increase the counter since this is a main query content element.
    5458     $content_media_count = wp_increase_content_media_count();
    5459 
    5460     // If the count so far is below the threshold, return `false` so that the `loading` attribute is omitted.
    5461     if ( $content_media_count <= wp_omit_loading_attr_threshold() ) {
    5462         return false;
    5463     }
    5464 
    5465     // For elements after the threshold, lazy-load them as usual.
     5480    // Lazy-load by default for any unknown context.
    54665481    return 'lazy';
    54675482}
Note: See TracChangeset for help on using the changeset viewer.