Make WordPress Core

Opened 12 months ago

Closed 11 months ago

Last modified 9 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:

Description

[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 11 months ago.
Before Applying Patch 4424
after-applying-patch-ticket -58211.png (450.5 KB) - added by zunaid321 11 months ago.
After Applying Patch 4424

Download all attachments as: .zip

Change History (20)

#1 @flixos90
12 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.


12 months ago

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


12 months ago
#3

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

@mukesh27 commented on PR #4424:


11 months ago
#4

@kt-12 Can you please resolve the conflict?

kt-12 commented on PR #4424:


11 months ago
#5

@kt-12 Can you please resolve the conflict?

Resolved.

@flixos90 commented on PR #4424:


11 months ago
#6

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

#7 @flixos90
11 months ago

  • Keywords has-testing-info needs-testing added

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.

#8 @costdev
11 months ago

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

#9 @zunaid321
11 months ago

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

@zunaid321
11 months ago

Before Applying Patch 4424

@zunaid321
11 months ago

After Applying Patch 4424

kt-12 commented on PR #4424:


11 months ago
#11

@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
11 months ago

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

#13 @flixos90
11 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:


11 months ago
#14

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.

#15 @flixos90
11 months ago

  • Keywords needs-dev-note added; commit removed

#16 @asafm7
11 months ago

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

#18 @flixos90
9 months ago

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