Core Web Vitals (CWV) are Google’s key measurements for evaluating the real-world loading speed, responsiveness, and visual stability of a webpage.

They are especially important for SEO and user experience.

The 3 Core Web Vitals

1. LCP — Largest Contentful Paint

LCP measures loading performance.

It measures how long it takes for the largest visible content element—often a hero image, product image, or large heading—to appear.

Example:

A customer opens:

yourstore.com/product/shoes

If the main product image takes 4 seconds to appear:

❌ LCP = 4 seconds → Poor

If it appears in 1.8 seconds:

✅ LCP = 1.8 seconds → Good

Target:

• 🟢 ≤ 2.5s = Good
• 🟠 2.5–4s = Needs improvement
• 🔴 > 4s = Poor

How to improve LCP:

• Optimize the main/hero image
• Use WebP or AVIF
• Preload the LCP image when appropriate
• Reduce server response time
• Use caching
• Reduce render-blocking CSS/JS
• Use a CDN
• Improve hosting/server performance

2. INP — Interaction to Next Paint

INP measures responsiveness.

It asks:

“When a visitor clicks, taps, or types, how quickly does the page respond visually?”

For example:

Customer clicks Add to Cart.

If JavaScript blocks the browser for 800 ms:

❌ Poor INP

If the page responds within 150 ms:

✅ Good INP

Target:

• 🟢 ≤ 200 ms = Good
• 🟠 200–500 ms = Needs improvement
• 🔴 > 500 ms = Poor

Common causes of poor INP:

• Too much JavaScript
• Large JavaScript bundles
• Third-party scripts
• Heavy tracking scripts
• Long-running event handlers
• Excessive DOM manipulation

For an ecommerce website, JavaScript optimization can have a major impact on INP.

3. CLS — Cumulative Layout Shift

CLS measures visual stability.

Imagine you’re about to click:

BUY NOW

Suddenly an image loads and the button moves downward.

You accidentally click something else.

That’s a layout shift.

Bad CLS

BUY NOW

        ↓ image loads

Product image

BUY NOW  ← button moved

Good CLS

Reserve the required space before the image loads:

Product image
[reserved space]

BUY NOW

Target:

• 🟢 ≤ 0.1 = Good
• 🟠 0.1–0.25 = Needs improvement
• 🔴 > 0.25 = Poor

How to reduce CLS:

• Specify image width and height
• Reserve space for banners
• Reserve space for ads
• Avoid inserting content above existing content
• Preload important fonts where appropriate
• Use appropriate font-display strategies

Core Web Vitals for PrestaShop

Since you’re working with PrestaShop, I’d look at these areas first:

🚀 LCP

Product images
↓
Theme
↓
Server response
↓
CSS
↓
Caching/CDN

⚡ INP

PrestaShop modules
↓
JavaScript
↓
Third-party scripts
↓
Tracking
↓
AJAX/cart functionality

📐 CLS

Product images
↓
Banners
↓
Fonts
↓
Cookie notices
↓
Dynamic modules

Don’t confuse Lighthouse with real users

There are two important types of data:

Lab data
A controlled test such as Lighthouse/PageSpeed Insights.

Field data
Measurements from actual users, commonly represented by the Chrome UX Report (CrUX).

For SEO, real-user/field performance is particularly important.

Simple way to remember

LCP = Loading 🚀
INP = Interaction ⚡
CLS = Stability 📐

If you’re optimizing a PrestaShop store, I would prioritize LCP → INP → CLS, while also checking TTFB and JavaScript execution because they often explain why the CWV scores are poor.