Lazy LCP image

This demo includes four images. Two of the images are within or close to the viewport, while the remaining two are outside of the viewport. However all images have the loading="lazy" attribute. This is an anti-pattern and can potentially delay the LCP image.

Photograph of a table and chairs in the foreground with the sea in the background.

Photograph of a blue shallow sea with four deckchairs and an umbrella in the foreground on the rocks.

Aerial photograph of a green body of water surrounded by rocks.

If you observe the Chrome DevTools network panel, you should notice that the images within the initial viewport do not start downloading until all CSS is downloaded and parsed. This is because the browser does not know if the image is within the viewport until after the layout phase.

Chrome DevTools Network panel showing 5 resources. The images (bottom two rows) begin downloading after style.css has finished downloading.

In the network panel above, the images image-1.jpg and image-2.jpg do not start downloading until style.css has finished downloading. Contrast this with the previous demo where the LCP image was downloaded immediately.

View Source Code

<img
  alt="Photograph of a sandy landscape."
  width="800"
  height="600"
  src="/images/image-1.jpg"
  loading="lazy"
/>

Learn Performance - Defer Images

Lazy LCP image