Conditionally skip lazy-loading on images before the loop in classic themes

[flixos90]

[55318] includes an enhancement which for block themes avoids lazy-loading images that appear in the header block template part. While that resolves a common performance problem with lazy-loaded images in the header of a page for block themes, sites using a classic theme still run into this problem.

Specifically, in classic themes today only images that are rendered while in_the_loop() are eligible to have lazy-loading skipped on them. This ticket aims to introduce conditions to make images eligible for skipping lazy-loading that are included before the loop.

We can fix the problem by updating wp_get_loading_attr_default() to omit lazy-loading / return false if all of the following applies:

• $context is either "the_post_thumbnail" or "wp_get_attachment_image"
• the get_header action has already run
• the main query loop has not started yet
• the get_footer action has not yet run

This effectively results in images in the header but before the main query loop to not be lazy-loaded. In cases where a special page template does not contain a query loop, the get_footer action acts as a "fallback" to ensure that footer images are still lazy-loaded.

[flixos90]

Addressing the remaining lazy-loading related performance issues is a high priority for the performance team for the 6.3 cycle.

Trac ticket: https://core.trac.wordpress.org/ticket/58211

@kt-12 Can you please resolve the conflict?

@kt-12 Can you please resolve the conflict?

Resolved.

@kt-12 Now that https://core.trac.wordpress.org/changeset/55825 was committed, I updated the code here just to reuse the same condition ( 'the_post_thumbnail' === $context || 'wp_get_attachment_image' === $context ) that was already present from that commit.

It also makes the condition here a bit lighter as it's no longer all in one.

There's one outstanding comment thread in ​https://github.com/WordPress/wordpress-develop/pull/4424#discussion_r1196898347, please take a look and let us know your thoughts on it.

[flixos90]

Instructions to reproduce / test the PR ​https://github.com/WordPress/wordpress-develop/pull/4424:

1. Use a classic theme that renders a post's featured image before the main loop in its single.php template (e.g. Twenty Nineteen or Twenty Seventeen).
2. Create a post with a featured image.
3. View that post (in its single view, not an archive) in the frontend in trunk: Inspect the featured image and see how it has loading="lazy", which it shouldn't.
4. Load the branch from the PR and reload the URL: Now, the featured image should no longer have loading="lazy" on it.

[costdev]

Test Report

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/4424.diff

Expected Results

When reproducing a bug:

• ❌ loading="lazy" should appear on the featured image.

When testing a patch to validate it works as expected:

• ✅ loading="lazy" should not appear on the featured image.

Environment

• WordPress: 6.3-alpha-55505
• PHP: 7.4.33
• Server: Apache/2.4.56 (Ubuntu)
• Database: mysqli (Server: 5.7.41-0ubuntu0.18.04.1 / Client: mysqlnd 7.4.33)
• Browser: Chrome 113.0.0.0 (Windows 10/11)
• Theme: Twenty Nineteen 2.5
• MU-Plugins: None activated
• Plugins: None activated

Actual Results

When reproducing a bug/defect:

• ❌ loading="lazy" appeared on the featured image. Issue reproduced.

When testing the bugfix patch:

• ✅ loading="lazy" did not appear on the featured image. Issue resolved with the patch.

[zunaid321]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://patch-diff.githubusercontent.com/raw/WordPress/wordpress-develop/pull/4424.diff

Environment

• OS: Windows 11 (22H2)
• Web Server: nginx/1.23.4
• PHP: 7.4.33
• WordPress: 6.3-alpha-55505-src
• Browser: Chrome Version 113.0.5672.126 (Official Build) (64-bit)
• Theme: Twenty Nineteen 2.5
• Plugins: None Activated

Before Applying The Patch

• Followed the instructions of @flixos90
• ❌ loading="lazy" - does show up when inspecting the featured image

After Applying The Patch

• Followed the same instructions
• ✅ loading="lazy" - does not show up when inspecting the featured image

[zunaid321]

Before Applying Patch 4424

[zunaid321]

After Applying Patch 4424

@kt-12 ​https://github.com/WordPress/wordpress-develop/pull/4424#pullrequestreview-1433512063 is pending?

@kt-12 ​#4424 (review) is pending?

@mukeshpanchal27 thank you for pointing this out. I have added 3 new test cases to test $before_loop cc: @felixarntz

[flixos90]

In 55847:

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.

Committed in https://core.trac.wordpress.org/changeset/55847

Regarding ​https://github.com/WordPress/wordpress-develop/pull/4424#discussion_r1200848743, if the preference is to update this, I'm happy to do a quick follow up commit.

[flixos90]

Dev note published: ​https://make.wordpress.org/core/2023/07/13/image-performance-enhancements-in-wordpress-6-3/