How it works
Modern browsers support a simple loading="lazy" attribute on images and iframes. When added, the browser holds off downloading those items until they are about to appear on screen.
Why it helps
The page's first view loads faster because the browser downloads less upfront. Visitors who never scroll to the bottom never download those files, saving data on phones.
When not to use it
Don't lazy-load the main image or anything visible at the top of the page. Delaying it slows the first view and can hurt Largest Contentful Paint, one of the Core Web Vitals.
Why Lazy Loading matters
Long pages with many images can be slow on phones. Lazy loading is an easy win that makes pages feel faster without removing any content.
A gallery that loaded too much
A wedding photographer's portfolio page loaded dozens of large photos at once. Adding lazy loading to the gallery below the first screen made the page open far faster, while the top image still appeared immediately.
Common mistakes
Lazy-loading the hero image
Top images should load right away. Only lazy-load content further down.
Hiding content from search engines
Some custom lazy loading scripts only load content on scroll or click, which search engines may not trigger. Prefer the native browser attribute.
Layout jumps
Images without set dimensions make the page shift as they load. Always set width and height.
Where we work on this