Aggressive Lazy Loading Hurt Core Web Vitals, Developer Finds

A developer redesigning a Next.js static site applied lazy loading to every image, including above-the-fold hero images, causing Largest Contentful Paint (LCP) on mobile to worsen from around 2.2 seconds to 3.5 seconds. Real-world Chrome UX Report data revealed the regression after local Lighthouse tests had shown no issues. The root cause was that lazy loading deferred hero image fetches until intersection logic triggered, adding hundreds of milliseconds to load time. Removing lazy loading from above-the-fold images and adding explicit width and height attributes brought LCP back down to roughly 2.3–2.5 seconds. The episode highlights that lazy loading improves performance only for below-the-fold assets and should never be applied indiscriminately.