Preload Largest Contentful Paint Image

What is Largest Contentful Paint?

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.

Benefits of Preloading Largest Contentful Paint (LCP)

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.



Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.


PageSpeed Terms

PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.



YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.