search

HTTPArchive / legacy.httparchive.org

<<THIS REPOSITORY IS DEPRECATED>> The HTTP Archive provides information about website performance such as # of HTTP requests, use of gzip, and amount of JavaScript. This information is recorded over time revealing trends in how the Internet is performing. Built using Open Source software, the code and data are available to everyone allowing researchers large and small to work from a common base.
https://legacy.httparchive.org
Other
328 stars 84 forks source link

Improved lazy in viewport #207

Closed kevinfarrugia closed 3 years ago

kevinfarrugia commented 3 years ago

Updated the Images custom metric inViewport property to check if the image is within the viewport, compared to simply checking the top position.

Will be used in 2021 Resource Hints chapter.

Reference discussion: https://github.com/HTTPArchive/legacy.httparchive.org/pull/202#discussion_r647905245

I opted against using the IntersectionObserver because its async nature would add unnecessary complexity to the custom metric. Ultimately we want to return true if the image is in the visible viewport and do not need to monitor for changes resulting from scroll events.

Sample WPT https://webpagetest.org/custom_metrics.php?test=210614_AiDcH0_5d6b574017a022b085beade79bf0deef&run=1&cached=0

[
  {
    "url": "https://placekitten.com/101/101",
    "width": 101,
    "height": 101,
    "naturalWidth": 101,
    "naturalHeight": 101,
    "loading": "lazy",
    "in-viewport": true
  },
  {
    "url": "https://placekitten.com/102/102",
    "width": 102,
    "height": 102,
    "naturalWidth": 102,
    "naturalHeight": 102,
    "loading": "lazy",
    "in-viewport": false
  }
]