Chrome’s Experimental Image Lazy Loading Flag

So how does it work?

Without Lazy Loading

  1. There is text, but none of the images are in place.
  2. One green above the fold placeholder image is in place, as is one from final viewport #3.
  3. The first fill image appears, but not at the top of the page. Text is still shifting.
  4. 3 of the 4 images at the top have loaded, as have many below the fold. Text is still shifting.
  5. All images loaded. All text is finally in place.

Lazy Loading

  1. Just the text.
  2. First 2 placeholder images (both in first Viewport)
  3. All of the background images are in place. Page fully laid out, and 3 of the images in the top viewport are loading.
  4. Top viewport compete
  5. 2nd and 3rd viewport complete
  6. Page complete.

Is Chrome Lazy Loading Faster?

Desktop Behaviour (Canary 71.0.3558.0)

WebPageTest Behaviour (Canary 71.0.3554.4 )

Conclusion:

--

--

--

Developer Relations. Web and Native Mobile Performance engineer. Passionate about making the web faster. Available for short/long term consultation.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How-to cache structs in Rust

Tutorial Fuzzy Logic Mamdani for Arduino

Tutorial Fuzzy Logic Mamdani for Arduino

CSS Flex box :align items on cross axis

Tutorial Fuzzy Logic Mamdani for Arduino

Tutorial Fuzzy Logic Mamdani for Arduino

Future of Java in 2021

AWS/Terraform Workshop #3: ELB, SNS, AutoScaling

CSS Basic: Background

Fidel in Focus — Creating a Card Linking Program with the Fidel APIs

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
Doug Sillars

Doug Sillars

Developer Relations. Web and Native Mobile Performance engineer. Passionate about making the web faster. Available for short/long term consultation.

More from Medium

Google Maps Clone Using Mapbox

Customising JSON Forms

Svelte Hacking #2 — client side imports

How to dynamically change the background image of a website in Vue/React