Make WordPress Core

Opened 10 months ago

Closed 3 months ago

#59421 closed enhancement (duplicate)

loading="lazy" attribute is not applied at all

Reported by: lovor's profile lovor Owned by:
Milestone: Priority: normal
Severity: minor Version: 6.3.1
Component: Media Keywords: needs-patch needs-testing
Focuses: Cc:


Steps to reproduce:

Start new WordPress 6.3.1 instance. Use default twenty-twenty-three theme. Create new post. Insert some images. None of the images (including below the fold ones) get loading attribute.

It is expected that below the fold images get loading="lazy" attribute.

Change History (5)

#1 @lovor
10 months ago

  • Type changed from defect (bug) to enhancement

After going superficially through the code in media.php, I understood that only the fourth and subsequent images get loading="lazy" attribute, which is not stated in any docs. I will change this to "enhancement" with following suggestions:

  • describe in docs exactly how it functions
  • change algorithm to take into account image heights and widths to calculate what is above and below the fold - for screen size the most used screen dimension would be taken
Last edited 10 months ago by lovor (previous) (diff)

#2 @lovor
10 months ago

Proposal of algorithm for above the fold detection:
Most used screen size is 1920×1080. This may change over time, so put this width and height in variables (perhaps array) and make it filterable.
Assume that images are tiled in a mosaic. In reality, it could be different, according to css, but this is conservative assumption and some images below the fold may omit loading="lazy", and load eagerly, but this is fine.

Calculate, from images widths and heights when image is completely below the fold like this (pseudo-code):

pagewidth = 1920
pageheight = 1080
calcheight = 0
calcwidth = 0
imgcounter = 0
greatestHeightInRow = 0

calcwidth = calcwidth + img[imgcounter].width
if (img[imgcounter].height > greatestHeightInRow)

greatestHeightInRow = img[imgcounter].height

if (calcwidth > pagewidth) {

calcwidth = img[imgcounter].width
calcheight += greatestHeightInRow
greatestHeightInRow = 0

mark image above the fold
img[imgcounter].aboveTheFold = true

until (imgcounter = img.length
greatestHeightInRow > pageheight)

mark the rest of images below the fold
for (i = imgcounter; i < imgcounter; i++) {

img[i].aboveTheFold = false


Version 0, edited 10 months ago by lovor (next)

#3 @sabernhardt
10 months ago

  • Component changed from General to Media

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

3 months ago

#5 @joedolson
3 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Thanks for reporting! This issue is being tracked in #59550.

Note: See TracTickets for help on using tickets.