Performance Guide
How to Pass Core Web Vitals with Images
Images often dominate LCP and can trigger CLS if dimensions are missing. Use this practical image-first checklist to improve field performance.
Highest-impact actions:
- Set explicit width and height.
- Use modern formats where possible.
- Compress hero images aggressively but safely.
Image Impact by CWV Metric
| Metric | Image Risk | Fix |
|---|---|---|
| LCP | Oversized hero image bytes | Compress and right-size hero images. |
| CLS | Missing intrinsic dimensions | Set width/height attributes or aspect ratio boxes. |
| INP | Main thread pressure from large decode | Optimize image payload and defer offscreen assets. |
Execution Checklist
Step 1
Resize source assets to realistic display dimensions.
Step 2
Compress with Image Compressor.
Step 3
Use WebP/AVIF for primary delivery where compatible.
Step 4
Declare image dimensions in markup to prevent layout shifts.
Frequently Asked Questions
-
Large hero images that are much heavier than needed.
-
Without reserved layout space, content shifts when images load.
-
Lazy-load offscreen images, but not above-the-fold hero images.
-
Start with homepage and top-traffic landing pages, then fix top LCP images first.
Related Pages
Explore related tools to keep your workflow fast and consistent.
