Core Web Vitals & PrestaShop: Speed Optimisation Guide

Imagine spending hundreds of euros on advertising, driving visitors to your store, only for 40% of them to leave before the page even finishes loading. That is exactly what happens when Core Web Vitals metrics are in the red. Google does not merely penalise slow sites in search rankings — slow code directly erodes conversions and revenue.

What Are Core Web Vitals and Why Do They Matter for Your PrestaShop Store?

Core Web Vitals (CWV) are a set of measurable user experience metrics defined by Google. Since May 2021 they have been an official ranking factor in search. For an e-commerce store this means one thing: poor performance directly affects your visibility in Google and your revenue.

The three core metrics are:

LCP — Largest Contentful Paint

Measures how quickly the largest visible piece of content on the page loads — typically the main product image or hero banner.

Score	Value	Meaning
Good	≤ 2.5 s	User is satisfied
Needs improvement	2.5 – 4.0 s	Risk of abandonment
Poor	> 4.0 s	High bounce rate, lost sales

INP — Interaction to Next Paint

INP became the official responsiveness metric in March 2024. It measures how quickly the page reacts to a click, text input or any other interaction. In a PrestaShop store this includes adding to cart, switching a product variant and using the search.

Score	Value
Good	≤ 200 ms
Needs improvement	200 – 500 ms
Poor	> 500 ms

CLS — Cumulative Layout Shift

Measures how much the page content shifts visually during loading. If a customer aims for the "Buy" button and it suddenly jumps — they click something else. The result: a frustrated customer and a missed sale.

Score	Value
Good	≤ 0.1
Needs improvement	0.1 – 0.25
Poor	> 0.25

The Numbers You Need to Know

These are not abstract technical indicators. Research by Google and independent analysts shows a concrete link between page speed and business outcomes:

53% of mobile users abandon a site that takes more than 3 seconds to load.
Reducing load time by 0.1 seconds increases conversions by up to 8% for mobile users in retail.
Sites passing Core Web Vitals thresholds see a 24% lower bounce rate compared with those that do not.
Google confirmed that pages with good CWV receive a ranking advantage over competitors under equal SEO conditions.

Common Performance Problems in PrestaShop

PrestaShop is a powerful platform, but once third-party modules and themes are added, performance is rarely managed systematically. These are the most frequent issues we encounter when auditing real stores.

Uncompressed and Unoptimised Images

Product images are the primary cause of high LCP. PrestaShop generates multiple image formats but does not use modern formats such as WebP or AVIF by default. A frequently encountered scenario is administrators uploading raw originals of 5–10 MB directly in the Back Office without any prior processing.

Too Many HTTP Requests from Modules

Every installed module that adds JavaScript and CSS files to the front end increases the number of requests. The problem compounds with 20–30 active modules, each loading its own assets without combining or minification. Particularly destructive is the case where a module loads its own version of jQuery even though PrestaShop has already loaded the library.

public function hookDisplayHeader($params)
{
    // Wrong — loads jQuery again
    $this->context->controller->addJS('modules/mymodule/views/js/jquery.min.js');

    // Correct — uses the already-loaded jQuery
    $this->context->controller->addJS('modules/mymodule/views/js/mymodule.js');
}

Render-Blocking JavaScript and CSS

JavaScript files loaded in <head> without a defer or async attribute block page rendering. The browser halts DOM construction until it has downloaded and executed the script. In PrestaShop 8 this can be controlled via Advanced Parameters → Performance, but many themes and modules bypass these settings.

Missing or Incorrect Cache Configuration

PrestaShop includes a built-in Smarty cache and CCC (Combine, Compress, Cache) for CSS and JS. A surprisingly common mistake is having these features disabled in a production environment — typically left over from a debugging session the administrator forgot to revert.

Slow MySQL Queries Without Indexes

Product listings with many filters, especially those powered by the Faceted Search module, can generate extremely complex SQL queries. Without proper database indexes, every category page can take seconds to process queries alone.

Images Without Defined Dimensions

When <img> tags lack width and height attributes, the browser does not know how much space to reserve before loading. The result is a visual shift of content during loading, which directly worsens the CLS score.

<!-- No dimensions — causes layout shift -->
<img src="product.jpg" alt="Product">

<!-- With dimensions — browser reserves space in advance -->
<img src="product.jpg" alt="Product" width="800" height="600" loading="lazy">

How to Measure Core Web Vitals on Your Store

Before optimising, you need to know exactly what you are dealing with. These are the four tools we recommend for starting every audit.

Google PageSpeed Insights

The most direct way to get a quick assessment. Visit pagespeed.web.dev and enter the URL of your homepage, your best-selling product and your most important category. Pay attention to Field Data (real user data) — it matters more than lab data because it is what influences rankings.

Google Search Console — Core Web Vitals Report

Search Console has a dedicated CWV report grouped by URL and device type. It shows real data from your actual users, not simulations. These are the figures Google uses when making ranking decisions.

Chrome DevTools — Performance Tab

For in-depth analysis of a specific page. Record a Performance profile during loading with 4G mobile network throttling — this simulates the real scenario for the majority of your customers.

WebPageTest.org

A more detailed tool allowing tests from different locations, including European servers close to your audience. It generates a Waterfall chart of all resources — invaluable for identifying slow requests and render-blocking assets.

Practical Optimisation Steps

Step 1: Enable the Built-in CCC Features

In Back Office → Advanced Parameters → Performance, enable Combine, Compress and Cache (CCC) for CSS and JavaScript, Smart Cache for both resource types, and Smarty cache with recompile set to Never in a production environment.

Step 2: Enable WebP Images

PrestaShop 8 supports WebP natively. In Back Office → Design → Image Settings, enable WebP image generation and then regenerate all thumbnails:

# Regenerate all images via CLI
php bin/console prestashop:images:generate-thumbnails --format=webp

Step 3: Add Lazy Loading for Below-the-Fold Images

Images below the visible area should load lazily. Find the product listing templates in your theme and add the relevant attributes:

{* themes/your-theme/templates/catalog/_partials/miniatures/product.tpl *}

{* Before *}
<img src="{$product.cover.bySize.home_default.url}" alt="{$product.name|escape:'html':'UTF-8'}">

{* After *}
<img
    src="{$product.cover.bySize.home_default.url}"
    alt="{$product.name|escape:'html':'UTF-8'}"
    width="{$product.cover.bySize.home_default.width}"
    height="{$product.cover.bySize.home_default.height}"
    loading="lazy"
    decoding="async"
>

Important: do not add loading="lazy" to the main product image. It is the LCP element and must load with priority via fetchpriority="high".

Step 4: Defer Non-Critical JavaScript

When registering JavaScript in PrestaShop modules, use the $bottom parameter to load scripts just before the closing </body> tag:

public function hookActionFrontControllerSetMedia()
{
    // true = loads before </body>, does not block rendering
    $this->context->controller->addJS(
        $this->_path . 'views/js/mymodule.js',
        true
    );
}

Step 5: Configure HTTP Caching at Server Level

Static resources should be cached aggressively in the browser. Add the following rules to .htaccess (Apache) or your Nginx configuration:

# Apache .htaccess
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/webp              "access plus 1 year"
    ExpiresByType image/jpeg              "access plus 1 year"
    ExpiresByType image/png               "access plus 1 year"
    ExpiresByType text/css                "access plus 1 month"
    ExpiresByType application/javascript  "access plus 1 month"
    ExpiresByType font/woff2              "access plus 1 year"
</IfModule>

# Nginx
location ~* \.(webp|jpg|jpeg|png|svg|ico)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}
location ~* \.(css|js)$ {
    expires 1M;
    add_header Cache-Control "public";
}
location ~* \.(woff2|woff|ttf)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Step 6: Add Preload for the LCP Image

If the LCP image is identifiable — typically the main banner on the homepage — add a <link rel="preload"> in <head>:

{* themes/your-theme/templates/_partials/head.tpl *}
<link
    rel="preload"
    as="image"
    href="{$urls.img_url}banners/main-banner.webp"
    type="image/webp"
    fetchpriority="high"
>

Performance Audit Checklist

CCC (Combine, Compress, Cache) for CSS/JS is enabled
Smarty cache is enabled and set to "Never recompile"
All images are served in WebP format
Product images have defined width and height attributes
Below-the-fold images have loading="lazy"
The LCP image has fetchpriority="high" and a corresponding preload link
JavaScript is loaded with defer or at the end of <body>
Unused modules are deactivated
Browser caching is configured at server level
The hosting environment supports HTTP/2 or HTTP/3
PHP OPcache is enabled on the server
Redis or another object caching mechanism is configured
The Google Search Console CWV report is reviewed regularly

Conclusion

Core Web Vitals are not merely technical metrics for developers. They are a direct link between your site's code and your revenue. Every second of delay means lost customers. The good news is that most problems in PrestaShop stores are well-known and solvable — sometimes the right configuration of built-in features and a few theme changes make the difference between a PageSpeed score of 40 and a score of 90.

If you want to know exactly where your store stands and what needs to be done, contact us. We carry out a technical performance audit and provide a concrete action plan.

Sources

Google Web Dev — Web Vitals: Essential metrics for a healthy site, 2024
Google / SOASTA — Find out how you stack up to new industry benchmarks for mobile page speed, Think with Google, 2018
Deloitte Digital / Mobify — Milliseconds Make Millions, 2020
Google Search Central — Understanding Core Web Vitals and Google Search results, 2024
Google Web Dev — Interaction to Next Paint (INP), 2024
PrestaShop Developer Documentation — Smarty templating engine, version 8.x
HTTP Archive — Web Almanac 2023: Performance, Chapter 4

Core Web Vitals and PrestaShop: How Slow Code Kills Your Sales