Web Depot: Boost Perceived Page Speeds

Stephen Yagielowicz

Everyone wants a fast loading website, especially mobile users and others with slower connections — with “lazy loading” a way to make a site seem faster. According to its author, Michael Cavalea, Layzr.js is a small, fast, modern and dependency-free lazy loading library.

“Lazy loading boosts page speed by deferring the loading of images until they’re in (or near) the viewport. This library makes it completely painless — maximizing speed by keeping options to a minimum,” Cavalea explains. “The scroll event has been debounced to minimize the weight on the browser, and images are revealed [with] optimal rendering.”

Each image requires a placeholder in its SRC attribute, plus a URL for a regular and a Retina image, while a variable threshold rate adjustments to the speed at which images load. A callback function is invoked each time an image is loaded, enabling Layzr.js to be easily extended.