Native Image Lazy Loading in Chrome Is Way Too Eager

UPDATE 2020.07: the thresholds have been adjusted to be less eager:

For the Web Performance Calendar Advent, Aaron Peters took a close look at Chrome’s Native Lazy Image Loading, and noticed that it’s a bit too eager:

I see the lazy-loaded images being fetched at ~ window.pageYOffset = 8500 on desktop and they become visible at ~ window.pageYOffset = 11500. So, the image lazy-load logic of Chrome seems to be: if the image is 3000 or less pixels below the viewport, load it.

3000 pixels… that is a lot!

Google’s documentation on Native Lazy Loading clearly states that the distance threshold depends on several factors:

  • The type of resource being fetched (image or iframe)
  • Whether Lite mode is enabled on Chrome for Android
  • The effective connection type

Checking the relevant Chromium Source, I see these values for the difference connection types:

//
    // Lazy image loading distance-from-viewport thresholds for different effective connection types.
    //
    {
      name: "lazyImageLoadingDistanceThresholdPxUnknown",
      initial: 5000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPxOffline",
      initial: 8000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPxSlow2G",
      initial: 8000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPx2G",
      initial: 6000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPx3G",
      initial: 4000,
      type: "int",
    },
    {
      name: "lazyImageLoadingDistanceThresholdPx4G",
      initial: 3000,
      type: "int",
    }

Yes that’s right: the slower your connection, the more eager lazy loading will work. Seems a bit of a conundrum: on one hand you don’t want images to load too soon (push for a lower distance threshold), but on the other hand you want to have the images present when scrolling (pushing for a higher distance threshold).

Native Image Lazy Loading in Chrome Is Way Too Eager →

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.