A Web Renderer Project loading pages Lazy vs. Eager - Episode 30

Marcio S Galli

A small visual experiment demonstrates how browsers load images differently when using loading="lazy" versus loading="eager". Both cases were captured automatically with Puppeteer, simulating a slow image stream.

In the lazy version, only visible images are requested — many stay blank when rendered by an automated tool:

In the eager version, all images load immediately, producing a complete render even though it takes longer.

Video

Project

You can explore the full demo and source code on GitHub – funevangelist-episode-030-rendering-lazy-and-eager

Prior episode

Fun Evangelist Season - Manipulating a webcam from the web - Episode 20

Marc S Galli © 2025 — mgalli.com — Since 1997 — All rights reserved.

Com por Marc & Weplex