LCP: the largest image matters
Largest Contentful Paint measures when the main content becomes visible. On many pages, that content is a hero image or large product image. A smaller file, efficient format and appropriately prioritized request can help it arrive sooner.
CLS: reserve the space
Cumulative Layout Shift measures unexpected movement. Compression alone does not prevent shifts. Set image `width` and `height`, or reserve the correct aspect ratio in CSS, so the layout does not wait for the image to discover its dimensions.
INP and overall responsiveness
Large image downloads and decoding can compete with other work, particularly on mobile devices. Smaller files reduce transfer and decoding pressure, though responsive JavaScript and third-party scripts may be larger factors for Interaction to Next Paint.
Think beyond bytes: the fastest image is one that is not requested, is requested at the right size, and has space reserved before it arrives.
Practical checklist
- Resize the LCP image to its real maximum display width.
- Use AVIF or WebP where your browser support and fallback strategy allow.
- Do not lazy-load the primary above-the-fold image.
- Lazy-load below-the-fold images.
- Declare dimensions and compare field data after publishing.
Use the optimizer to reduce image weight, then test the page with real-user data and a lab tool. Core Web Vitals are page-level outcomes, not a score that any single compressor can guarantee.
Open the optimizer →