SparkCore
Improve Core Web Vitals through lighter media
LCP and CLS often depend on heavy images. Smaller files and fixed dimensions help immediately.
In short
- Good means: LCP at 2.5 seconds or less, INP at 200 milliseconds or less, CLS at 0.1 or less.
- Images mostly affect LCP and CLS, while INP depends more on JavaScript.
- Never lazy-load your first large image, and give every image width and height.
Quick wins
- Compress hero and product photos
- Use modern formats
- Avoid oversized uploads
What are Core Web Vitals and which scores are good?
Core Web Vitals measure how a page feels to visitors. LCP measures how fast the largest visible element appears. INP measures how quickly the page responds to clicks and taps. CLS measures how much the layout shifts while loading. A good score is an LCP of 2.5 seconds or less, an INP of 200 milliseconds or less and a CLS of 0.1 or lower. Measure with real visitor data where you can, not only with a lab test.
- LCP: 2.5 seconds or less
- INP: 200 milliseconds or less
- CLS: 0.1 or lower
How do you improve LCP on WordPress?
On many pages the LCP element is a large image, such as a hero or a product photo. So make that file as small as possible and serve it in a modern format. Do not lazy-load it: it is in view straight away and must start loading at once. A fast server and page caching shorten the wait for the first byte, and that counts towards LCP too. Also, do not upload an image much larger than the spot where it appears.
- Compress the hero and product photos
- Use WebP or AVIF with a fallback
- Do not put lazy loading on the first image
How do you prevent layout shift (CLS) with images?
Layout shift happens when the browser does not know the size of an image. The text then jumps down as soon as the image arrives. So give every image a width and a height. The browser then reserves the right space before loading. WordPress usually adds these attributes itself for images from the media library. Do check your own blocks, theme parts and code. Reserve space for banners, ads and late-loading fonts too.
What can you do about INP, and where does caching help?
INP depends mostly on JavaScript. Heavy scripts from themes, plugins and trackers keep the main thread busy. Remove what you do not use and delay loading the rest. Images play a small part here. Caching mainly helps LCP. A cached page is ready sooner, and a CDN brings files closer to the visitor. Measure again after every change and change one thing at a time, or you will not know what worked.
Frequently asked questions
Usually LCP, because the largest element is often an image. Compress that file, pick a modern format and do not lazy-load it. CLS comes next: give every image a width and height.
No. Lazy loading is meant for images below the fold. WordPress adds loading lazy to images automatically. The first large image, often the LCP element, should load right away, or your LCP gets slower.
Images are only part of the story. Slow hosting, heavy scripts, uncached pages and shifting layout also weigh in. Check your report per metric to see which element or script is the cause.