Core Web Vitals and Image Optimization
Direct relationship between image optimization and Google's LCP, CLS, and FID metrics.
SJ
Sarah Jenkins
Contributing Author · Squoosh Next BlogLargest Contentful Paint (LCP) measures how long it takes for the largest visible element to render, and on most marketing pages that element is a hero image. Unoptimized hero images are the single most common cause of poor LCP scores. Compressing the hero image from 800KB to 80KB using WebP at quality 80 can improve LCP from 4.2 seconds to 1.1 seconds on a 3G connection.
Cumulative Layout Shift (CLS) is caused when images load without defined width and height attributes, causing content below to jump. Always specify dimensions on img elements or use aspect-ratio CSS. First Input Delay (FID) and its successor Interaction to Next Paint (INP) are impacted when JavaScript-heavy image lazy loading blocks the main thread.
Use native browser lazy loading with loading="lazy" instead.
Key Takeaways
Largest Contentful Paint (LCP) measures how long it takes for the largest visible element to render, and on most marketing pages that element is a hero image.
Unoptimized hero images are the single most common cause of poor LCP scores.
Compressing the hero image from 800KB to 80KB using WebP at quality 80 can improve LCP from 4.
Cumulative Layout Shift (CLS) is caused when images load without defined width and height attributes, causing content below to jump.
Try It in the Workspace
Everything discussed in this article can be tested directly in Squoosh Next — no sign-up, no upload, 100% client-side.