Core Web Vitals in PrestaShop: how images hurt LCP and what to fix first
Shop speed counts twice: Google takes it into account when assessing a page, and the shopper takes it into account when deciding whether to stay at all. In PrestaShop shops, the most common cause of a slow product page is images: too heavy, too large or loaded in the wrong order. This guide shows how to check whether images are hurting your Core Web Vitals, and what to fix first.
Core Web Vitals in short
| Metric | What it measures | Good | How images affect it |
|---|---|---|---|
| LCP – Largest Contentful Paint | When the largest element on screen appears | 2.5 s or less | Directly: on a product page it is almost always the main image, on the home page a banner or slider |
| INP – Interaction to Next Paint | How fast the page responds to clicks | 200 ms or less | Indirectly: heavy JavaScript sliders and image zoom |
| CLS – Cumulative Layout Shift | Whether the layout “jumps” while loading | 0.1 or less | Directly: images without dimensions push content around |
Google assesses the 75th percentile of visits, separately for mobile and desktop. So the page has to be fast not only on your computer and fibre line, but also for a shopper with an average phone on a bus. To be fair: good Core Web Vitals do not replace good content and will not push a shop to the top on their own. A slow page, however, loses shoppers before they see the price.
How to check whether images are to blame
- PageSpeed Insights (pagespeed.web.dev): the top of the report is real-user data from the last 28 days, the bottom is a lab test. In the lab test, look for the “Largest Contentful Paint element” – if it is an
img, you know where to start. - Google Search Console › Core Web Vitals: shows groups of similar URLs with a problem, for example all product pages at once.
- Three page types: home page, category and product page. Each has a different LCP element and different problems.
Five typical image problems in PrestaShop
1. Files that are too heavy
A photo straight from the camera or the supplier weighs 2–5 MB. PrestaShop creates thumbnails from it, but with compression settings nobody has touched since installation. On top of that, the format stays JPEG or PNG. According to Google, WebP images are 25–34% smaller than JPEG at comparable quality, and a PNG of a product photo can be several times heavier than both.
2. Dimensions that are too large
The theme loads the large_default format (often 800 px) where the image is displayed at 250 px. The browser downloads several times more data than it needs. Check which image type your theme uses on product lists and on the product page.
3. Lazy-loading the main image
loading="lazy" is great for images below the first screen, but on the main product image it delays LCP. The main image should load immediately, ideally with fetchpriority="high". This is a common side effect of modules that add lazy-loading “to all images”.
4. Missing dimensions
An image without width and height attributes (or without aspect-ratio in CSS) only takes its space once downloaded, and pushes text and buttons down. That is how high CLS happens – along with clicks on the wrong button.
5. The home page slider
Five large slides loaded at once, plus a JavaScript library to rotate them. The first slide is the LCP element, and the rest compete with it for bandwidth. Limit the number of slides and load the next ones only after the first.
A quick image audit on the server
If you have SSH access, these commands in the shop’s root directory show the scale of the problem in seconds:
# how much space product images take
du -sh img/p
# how many JPG files are larger than 300 KB
find img/p -type f -name '*.jpg' -size +300k | wc -l
# large large_default thumbnails (first 20)
find img/p -type f -name '*-large_default.jpg' -size +150k | head -20
# are there any WebP files yet
find img/p -type f -name '*.webp' | wc -lImage type names (large_default, home_default and so on) are listed in Design › Image Settings. If list thumbnails weigh 150 KB or more and there are no WebP files at all, you know where the biggest gain is.
The order of fixes
- Main product image and home page banner: the right size, WebP, no lazy-loading,
fetchpriority="high". - Category thumbnails: WebP and lazy-loading for everything below the first screen.
- Image dimensions in the theme templates – no more jumping layout.
- Slider: fewer slides, lighter files.
- Only then module scripts and styles.
After the changes, the lab test shows the difference straight away. Real-user data in PageSpeed Insights and Search Console covers 28 days, so you will see the full effect after about four weeks.
Lighter images without manual work
CTW Image Optimizer automatically converts your shop’s images to WebP – existing and newly added ones – and shows how much they weighed before, after, and how much space you saved. It works on PrestaShop 1.7 to 9.x, including versions where the core does not support WebP.