Lazy Loading

Lazy loading delays the loading of non-critical resources—such as images or videos—until they are needed. This reduces initial page load time and improves perceived performance.

Lazy loading allows browsers to focus on above-the-fold content first, improving both user experience and performance metrics.

A blog with long-form articles implemented native image lazy loading. Initial load time decreased by 35%, while scroll performance remained smooth.

What Should Be Lazy Loaded

  • Below-the-fold images
  • Embedded videos
  • Third-party widgets

Avoid lazy loading elements that impact LCP, such as hero images.

Best Practices

  • Use native lazy loading (loading="lazy") where possible
  • Ensure content remains crawlable
  • Test behavior across devices and browsers

Lazy loading should enhance speed—not hide content from users or crawlers.

Common Lazy Loading Issues

  • Lazy loading above-the-fold images
  • Blocking content rendering
  • JavaScript-based lazy loading that search engines cannot process