Preloading the Hero Image Reduced Our LCP Significantly
We were struggling with a poor Largest Contentful Paint (LCP) score on one of our content-heavy websites. The hero image was only being discovered after the CSS loaded, delaying the largest paint.
Adding a preload tag for the featured image and serving it in WebP format made a noticeable difference. We also excluded the hero image from lazy loading.
We documented the changes we implemented here:
Has anyone else seen similar improvements by preloading only the above-the-fold image instead of relying solely on lazy loading?
Dubai Archives
shared this idea
-
natasha052gandhi
commented
Yes this is a very common (and very measurable) improvement pattern for LCP, especially on content-heavy pages where the hero image is the LCP element.
On pages like Dubai Brief, what you ran into is classic “discovered too late” LCP behavior: the browser can’t start fetching the hero image early because it’s hidden behind CSS/DOM rendering or deprioritized by lazy-loading logic. So even if the image is lightweight, it arrives late in the critical rendering path. https://www.mymilestonecard.io