Make WordPress Core

Opened 13 months ago

Closed 6 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:

Description

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
13 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 13 months ago by lovor (previous) (diff)

#2 @lovor
13 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
loop
  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
  imgcounter++
until (imgcounter = img.length || greatestHeightInRow > pageheight)
// mark the rest of images below the fold
for (i = imgcounter; i < imgcounter; i++) {
  img[i].aboveTheFold = false
}
Last edited 13 months ago by lovor (previous) (diff)

#3 @sabernhardt
13 months ago

  • Component changed from General to Media

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


6 months ago

#5 @joedolson
6 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.