The quicklink logo

The test

Apple and Google devices with 3x HiDPI displays (excluding “Max” versions)

Images x screen densities

A “Load more” button at the end of a list of images
  • CLS is measured continuously. In fact, its value is also updated while your users scroll your page, if the scroll generates some layout movement
  • CLS measurement is paused for 500ms whenever a user interaction like a click or a keyboard event occurs

Web vitals

Core Web Vitals

Wait… what?

<img loading="lazy" src="...">
<iframe loading="lazy" src="...">

  1. a picture
  2. a description
  3. a price
  • look like a list on small viewports, typically smartphones
  • look like a table on larger viewports, like tablets and computers
  • accessible (see accessibility), e.g. to blind users

Table markup


Man fast scrolling over images on a smartphone

The (slow) way without IntersectionObserver

  • watching browser’s scroll and resize events to call…

Andrea Verlicchi

Web performance geek. Front-end architect at YOOX NET-A-PORTER GROUP. Author of vanilla-lazyload.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store