For Better LCP Images Use Fetch Priority

Fetch priority is a new, promising feature for LCP images. Browsers prioritize different file types differently. For example, Chrome sets CSS files as high priority by default because CSS is a render blocking resource. Non-blocking JavaScript and images are set to low by default. Once Chrome determines that an image is above the fold, it will change the priority of that file to high. However, that alone won’t always recover the lost time from starting at a low priority.

The fetchpriority attribute can be used to signal to the browser that a file should be treated differently from its default behavior:

  <img
  src="dog.jpg"
  loading="eager"
  fetchpriority="high"
  width="4751"
  height="3002"
  alt="A cute dog">
  

1. Never lazy-load your LCP image.
2. Default to server-rendered HTML for key content, at least above the fold.
3. Consider using a high fetch priority if your LCP image is easy to identify.
4. Reserve space for your images so that they do not cause layout shift when they load.