What is Lazy Loading?

What You'll Learn

What lazy loading does
How to implement it
Best practices

Lazy loading defers loading of images and iframes until they're about to enter the viewport. This improves initial page load time.

How to Use

index.htmlHTML

<!-- Lazy load offscreen images -->
<img src="photo1.jpg" loading="lazy" alt="Below fold image">

<!-- Don't lazy load above-fold images -->
<img src="hero.jpg" loading="eager" alt="Hero image">

<!-- Lazy load iframes -->
<iframe src="https://youtube.com/embed/..." loading="lazy"></iframe>

Prevent Layout Shift

index.htmlHTML

<img src="photo.jpg"
     width="800"
     height="600"
     loading="lazy"
     alt="Sized image">

Best Practices

Lazy load images below the fold
Don't lazy load above the fold images
Include width/height to prevent layout shift