PrestaShop lazy loading: faster pages and a better LCP, done right

PrestaShop lazy loading: faster pages and a better LCP, done right

· AddonsPresta · 11 min read

Lazy loading in PrestaShop means images are downloaded only when the visitor scrolls near them. Done well, it can cut the image data loaded with a page by half without slowing down the main image. Done badly, it does the opposite: it delays the product photo at the top of the page and hurts Largest Contentful Paint (LCP). Below you will find the data on what lazy loading gains, where it usually goes wrong, and why it is hard to cover every image of a PrestaShop store.

Table of contents

What is lazy loading?

Lazy loading is a technique in which the browser does not download images below the visible part of the page straight away. It fetches them as the visitor scrolls and the image comes close to the screen. There are two ways to do it:

  • The native loading="lazy" attribute — one word in an <img> or <iframe> tag. The browser decides when to load the image. It is supported by Chrome 77+, Edge 79+, Firefox 75+ and Safari 15.4+ (iframes: Firefox 121+, Safari 16.4+). Browsers that do not know it simply ignore it.
  • A JavaScript loader — src holds a light placeholder and the real address waits in data-src. A script with IntersectionObserver swaps the address when the image approaches the screen. It gives more control (loading distance, fade-in) but needs JavaScript and care.

Chrome starts loading loading="lazy" images ahead of time: about 1,250 px before the viewport on a fast connection and 2,500 px on a slow one. According to the Chrome team, on Android over 4G 97.5% of such images are ready within 10 ms of becoming visible, so shoppers do not see empty boxes.

Why lazy loading matters for an online store

Images are the largest part of a typical web page. According to the HTTP Archive Web Almanac 2025, the median mobile home page weighs 2.56 MB, of which 911 KB are images fetched in 15 requests. An online store usually has more: a category page with 24 thumbnails, a slider, banners, payment logos, photos in the product description and related products below it.

A shopper who opens a category on a phone sees only the first few products. Without lazy loading, the browser downloads every thumbnail at once: it uses the shopper's data, competes for bandwidth with the image that is actually visible, and keeps a slower processor busy. In a Chrome team test on a WordPress site, lazy-loading the images below the fold cut the image data of the first load by 51–70%, and once the first images were loaded eagerly, LCP was the same as or better than with no lazy loading at all.

Speed turns into sales. In Deloitte's "Milliseconds Make Millions" study (2020, commissioned by Google, 37 brands, 30 million sessions), a 0.1 s faster mobile site was associated with 8.4% more retail conversions and a 9.2% higher average order value. In an A/B test, Vodafone improved LCP by 31% and made 8% more sales. Lazy loading is not the only factor — the server (see our VPS vs shared hosting comparison), caching and image sizes matter too — but it is one of the cheapest steps.

How lazy loading affects LCP and Core Web Vitals

Google measures page speed with three Core Web Vitals. For images the key one is LCP (Largest Contentful Paint) — the time until the largest element on screen is displayed; a good score is 2.5 s or less for 75% of visits. Google says it highly recommends site owners achieve good Core Web Vitals for success with Search, as they align with what its core ranking systems seek to reward. A second metric, CLS (layout shift, good below 0.1), also depends on images.

Data (HTTP Archive, Web Almanac 2025)MobileDesktop
Pages whose LCP element is an image76.0%85.3%
Pages with good LCP62%74%
Pages that lazy-load their LCP image17%—
Pages with fetchpriority="high" on the LCP image17%16.3%

The key takeaway: never lazy-load an image that is visible straight away. On one page in six the main image is lazy-loaded, so the browser waits for the layout before fetching it and LCP grows. In Chrome's field data, pages with native lazy loading had a median LCP of 3,546 ms against 2,922 ms without it (a correlation, not proof). The Chrome team tested it on WordPress, which since version 5.5 adds loading="lazy" to images in the first viewport too: once the first images were loaded normally, LCP on the mobile archive page dropped by 18% while the data savings stayed.

For the first large image, go one step further and add fetchpriority="high" so the browser fetches it before other files. In April 2025 Google removed the "Defer offscreen images" audit from Lighthouse because browsers already deprioritize offscreen images. That matters: lazy loading is not a trick to raise the PageSpeed score. It saves your shoppers' data and bandwidth, while LCP depends on the first images loading at once.

Lazy loading in PrestaShop: what the theme does and what it misses

We analysed the default themes of PrestaShop 1.7.8, 8.2 and 9.2 and 105 store themes we have worked with (November 2026). The results:

  • Classic and Hummingbird put loading="lazy" on about 90% of their images — including the main product image (product-cover-thumbnails.tpl), which is the LCP element of the product page. So the default theme delays exactly the image it should not.
  • Modules hardly use lazy loading: in the module templates of PrestaShop 1.7.8 none of 214 images has it, in 9.2 three of 225. Sliders, banners and icon blocks load at once.
  • Editor content — photos in product descriptions and CMS pages — never has lazy loading, because it does not come from templates.
  • In store themes only 29% of images have a loading attribute, 9% are lazy-loaded by the theme's own script, and 62% have no width, which with placeholder scripts leads to layout shifts.

Why complete lazy loading is hard

Adding loading="lazy" to one template takes a minute. Covering a whole store without breaking anything is a different job:

  1. Dozens of templates. A theme has dozens of templates with images and every module has its own. Edits to module files are lost on update, and theme overrides must be maintained with every new version.
  2. Editor content. Product descriptions and CMS pages cannot be fixed in a template — every entry would have to be edited in the database, and the editor does not add the attribute to new images anyway.
  3. AJAX content. The product list after filtering or sorting, the quick view and the cart window are built without a page reload. A lazy-loading script has to notice the new images.
  4. The first images of a page. Which images are visible without scrolling depends on the page: the logo and slider on the home page, the product photo on a product page. "Everything lazy" breaks LCP, "nothing lazy" saves no data.
  5. Theme and module scripts. Galleries, zooms and sliders swap image addresses themselves, and some modules turn SVG icons into inline code by reading src. A placeholder in the wrong place ends with an empty photo or a missing icon.
  6. SEO and no JavaScript. Google recommends that images load when they enter the viewport, not after a click or a scroll event, and that their address is in src after rendering. A script that does not guarantee this can hide photos from search engines.
  7. CSS backgrounds do not support the loading attribute — banners with a background in their style attribute need a script.

Tip: check your store in seconds. Open a product page, right-click the main photo and choose "Inspect". If it has loading="lazy", your theme delays the LCP element. Then scroll to the product description: images there without loading are downloaded at once, even if the shopper never scrolls that far.

Automatic lazy loading in PrestaShop

That is why we built the Auto Lazy Load module. It does not edit a single file of your theme or modules — it adds lazy loading to the HTML your store's templates print, so it covers the theme, modules, product descriptions, CMS pages and content loaded with AJAX. The first images of every page (four by default) load at once, even when the theme made them lazy, and the first large one gets fetchpriority="high".

You can choose between two techniques: native (loading="lazy", no JavaScript, safe for search engines) and a script with a placeholder that keeps the image's proportions, with an adjustable loading distance, fade-in and support for inline CSS backgrounds. The module leaves alone images another lazy-loading script of your theme already handles, and never touches e-mails, PDF invoices or the Back Office. You can exclude chosen templates, or switch off a single image with the no-lazy class. The "Templates with images" table shows what the module did in each template and why it left the rest. It works with PrestaShop 1.7.8, 8 and 9, including multistore.

If your theme has unusual galleries, or you would like help with speed optimisation as a whole, you can also book PrestaShop development work.

How to check the result

  • PageSpeed Insights — the section with real-user data (Chrome UX Report) shows LCP and CLS over the last 28 days. In the diagnostics, look at LCP request discovery: that is where Lighthouse reports a lazy-loaded LCP image and a missing high priority.
  • Google Search Console — the Core Web Vitals report groups URLs with slow LCP. Changes show up there after a few weeks.
  • Browser tools — the Network tab filtered by images: a few files should load with the page and more as you scroll.

Lazy loading is one of the 15 steps in our guide on how to speed up PrestaShop, which also covers caching, PHP, WebP and cleaning up modules.

Sources

Frequently asked questions

Does PrestaShop have built-in lazy loading?

Partly. The Classic and Hummingbird themes add loading="lazy" to most of their own images, but not to module templates or editor content, and they also delay the main product photo. PrestaShop itself has no setting that turns lazy loading on for the whole store.

Is lazy loading bad for SEO?

No, as long as images load when they enter the viewport rather than after a user action. Native loading="lazy" is safe for Google. What hurts is lazy-loading an image that is visible at once, because it worsens LCP, one of the Core Web Vitals.

Which images should not be lazy-loaded?

The ones visible without scrolling: the logo, the home page slide, the main product photo and the first thumbnails of a list. Mark the first large image with fetchpriority="high" as well.

Native lazy loading or a script?

The native attribute is enough for most stores: it needs no JavaScript and works in every current browser. A script gives control over the loading distance, a fade-in and CSS backgrounds, but needs a placeholder with the image's proportions so the layout does not shift.

Does lazy loading work with page caching?

Yes. Lazy loading only changes the HTML sent to the browser, so a full-page cache module or a CDN stores the improved version. After changing settings, you just need to refresh that cache.

Want lazy loading across your whole store without editing the theme? See the Auto Lazy Load module or contact us if you have a question about your store.

Products in this article

Auto Lazy Load
Auto Lazy Load
€39.00 €19.50
  • 50% Off
  • New
()

Back to Blog

Back to top