Lazy Loading

Definition

Lazy Loading is a design and development technique in which content or assets are only loaded when they are needed, rather than all at once when the page is first accessed. This improves performance by reducing initial load time and conserving bandwidth. It is commonly used for images, videos, or other media elements that are not immediately visible to the user as they scroll through a webpage.

Why it matters

Page load time is directly correlated with conversion rate — Google's data shows that for every extra second of load time, conversion drops by roughly 7%. Lazy loading is one of the most impactful technical optimizations for image-heavy pages like product galleries, blog posts, and portfolio pages. For SaaS applications with data-heavy tables or dashboards, lazy loading data on scroll prevents the initial load from becoming a performance bottleneck as datasets grow.

Real-world example

Instagram lazy loads images as you scroll through the feed — images below the viewport are replaced with placeholder boxes until they're needed, which is why Instagram feels fast on slow mobile connections despite displaying thousands of high-resolution photos.

All design terms
Confused about
Lazy Loading
?
Design is fun, but it's not easy.
Get help from a senior designer.
Start your project with us!
Start a project