Lesson 4 of 8
Images that don't slow the page down
- 11 min
- 5 checks
- 3 hints
- Go to task
Goal
Four attributes that cut the cost of images
Explanation
Images are the heaviest part of most pages, and four attributes solve most of the problem:
loading="lazy" delays loading images that are off screen, decoding="async" keeps image decoding from holding up the page's rendering, and width and height reserve the space ahead of time so the text doesn't jump when the image arrives. That jump is what the CLS metric measures.
An important exception: don't lazy-load the first image that's visible as soon as the page opens. Lazy-loading it holds back the largest element on the page and hurts your LCP score instead of improving it.
Your task
Make the first image load right away and the rest lazily, let every image decode asynchronously, and give each one dimensions and alt text.
Checks
5 checks- Every image has alt text that describes it
- Every image has width and height
- The second and third images are lazy-loaded
- The first image isn't lazy-loaded
- Every image decodes asynchronously