What is Lazy Loading?
Lazy loading is a technique that delays loading images and videos until they're visible on screen.
How does it work?
Instead of loading all images on a page at once, only those visible on screen are loaded. Others load as the user scrolls.
Implementation
Advantages
- ●Reduces initial loading time
- ●Saves bandwidth
- ●Improves LCP and Core Web Vitals
- ●Better mobile experience
Warning
- ●Don't lazy-load images above the fold
- ●Always define dimensions (width/height) to avoid CLS
SEO Impact
Lazy loading directly improves Core Web Vitals, which are a Google ranking factor.
Related Terms
What are Core Web Vitals?
Core Web Vitals are 3 Google metrics measuring the speed, responsiveness, and visual stability of a web page.
What is CLS (Cumulative Layout Shift)?
CLS measures a page's visual stability. A poor CLS means elements move around during loading.
What is LCP (Largest Contentful Paint)?
LCP measures the loading time of the largest visible element on a page. Target: under 2.5 seconds.
What is Page Loading Speed?
Loading speed measures the time needed to fully display a web page. It's a Google ranking factor.
What is Google Lighthouse?
Lighthouse is a Google tool that audits a web page's performance, accessibility, SEO, and best practices.
What is TBT (Total Blocking Time)?
TBT measures the total time a page is blocked and unresponsive to user interactions.