Photo by Jason Leung on Unsplash
For most marketing sites, the LCP element is an image, and the image is shipped as JPEG or PNG with no responsive sizing and no priority hint. Modern formats close that gap. AVIF runs at roughly 50% the file size of JPEG and saves around 70% on animated images compared to GIF or animated WebP (Cloudinary AVIF guide, 2023-2024). The browser-support story is settled enough that AVIF-first with WebP fallback and JPEG last-resort is the prevailing 2024 practice.
Real production gains follow. Carousell removed lazy-loading from above-the-fold product images and added preloading, lifting LCP by 200ms across mobile (Carousell engineering blog, 2021). Tokopedia's combined image and JS work, with image optimisation as one of the levers, contributed to an 8% conversion lift and a 55% LCP improvement (web.dev Tokopedia case study, 2021). Renault's 1-second LCP improvement returned a 13% conversion lift across roughly 10 million visits (web.dev Renault, 2021).
The mobile load-time curve has a known shape. Cloudinary's compiled benchmarks show mobile conversion peaks at around a 2.4-second load time and drops below 1% past 4.2 seconds (Cloudinary, 2024). Akamai's classic 100ms-equals-1%-revenue-loss datum, originally a 2006 Amazon study (Conductor Academy summary), is often cited as evergreen but reflects a 2006-2017 ecommerce environment; it directionally still rhymes, but pin claims to recent case data instead.
The practical playbook is short. Identify the LCP element on each route, serve it through a loader that negotiates AVIF and WebP, set explicit width and height to avoid CLS, give above-the-fold images a priority hint, and do not lazy-load anything in the first viewport. Lazy loading on hero images consistently regresses LCP, despite landing on roughly 33% of pages tracked by HTTP Archive 2024.