Make WordPress Core

Opened 15 months ago

Closed 14 months ago

Last modified 12 months ago

#58211 closed defect (bug) (fixed)

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

Reported by: flixos90's profile flixos90 Owned by: flixos90's profile flixos90
Milestone: 6.3 Priority: high
Severity: normal Version: 5.9
Component: Media Keywords: has-patch, has-unit-tests, has-testing-info, has-dev-note
Focuses: performance Cc:


[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.

Attachments (2)

before-applying-patch-ticket -58211.png (468.1 KB) - added by zunaid321 14 months ago.
Before Applying Patch 4424
after-applying-patch-ticket -58211.png (450.5 KB) - added by zunaid321 14 months ago.
After Applying Patch 4424

Download all attachments as: .zip

Change History (20)

#1 @flixos90
15 months ago

  • Priority changed from normal to high

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

This ticket was mentioned in Slack in #core-media by antpb. View the logs.

15 months ago

This ticket was mentioned in PR #4424 on WordPress/wordpress-develop by kt-12.

15 months ago

  • Keywords has-patch has-unit-tests added; needs-patch needs-unit-tests removed

@mukesh27 commented on PR #4424:

14 months ago

@kt-12 Can you please resolve the conflict?

kt-12 commented on PR #4424:

14 months ago

@kt-12 Can you please resolve the conflict?


@flixos90 commented on PR #4424:

14 months ago

@kt-12 Now that 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, please take a look and let us know your thoughts on it.

#7 @flixos90
14 months ago

  • Keywords has-testing-info needs-testing added

Instructions to reproduce / test the PR

  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.

#8 @costdev
14 months ago

Test Report

Patch tested:

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.


  • 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 (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.
Last edited 14 months ago by costdev (previous) (diff)

#9 @zunaid321
14 months ago

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested:


  • 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
Last edited 14 months ago by zunaid321 (previous) (diff)

14 months ago

Before Applying Patch 4424

14 months ago

After Applying Patch 4424

kt-12 commented on PR #4424:

14 months ago

@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

#12 @flixos90
14 months ago

  • Keywords commit added; needs-testing removed
  • Owner set to flixos90
  • Status changed from new to reviewing

#13 @flixos90
14 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

@flixos90 commented on PR #4424:

14 months ago

Committed in

Regarding, if the preference is to update this, I'm happy to do a quick follow up commit.

#15 @flixos90
14 months ago

  • Keywords needs-dev-note added; commit removed

#16 @asafm7
14 months ago

Last edited 14 months ago by asafm7 (previous) (diff)

#18 @flixos90
12 months ago

  • Keywords needs-dev-note removed
Note: See TracTickets for help on using tickets.