Preload Largest Contentful Paint Image

Largest Contentful Paint, or LCP, is one of the core Lighthouse Web Vitals. Along with First Input Delay (FID) and Cumulative Layout Shift (CLS), these metrics are used to measure how good, or bad, a user’s experience is with your web page. The LCP is the time it takes for the largest image or text block to render on the page. This is typically something like the hero image on your page. A good LCP time is under 2.5 seconds across desktop and mobile devices. Again, the sooner or faster your content loads, the faster the user can begin interacting with your page.

Like we had discussed in the previous section, preloading JavaScript, CSS, or web fonts can have significant performance benefits for your page, especially if those files are large. Preloading LCP is no different. Your main banner image or hero image is the largest image on your page, so setting it to preload can improve your LCP time plus give the impression to the user that your page has loaded. If your image renders along with text, it will also look more complete and will not be subject to layout shifts, which may temporarily affect usability. Preloading your LCP image is the same as before, simply add the , along with the image path, to the HTML header.