Lazy loading is a technique that defers the loading of images and resources until they are about to appear on screen — rather than loading everything at once during the initial page render. For e-commerce stores with dozens or hundreds of product images, this optimisation drastically reduces the initial page weight and improves perceived performance for visitors.
How does lazy loading work?
Without lazy loading, the browser downloads all images present in the HTML at page load — including those far below the fold that the visitor may never see. With lazy loading, only images visible in the viewport or in its immediate vicinity are loaded. The rest remain on hold until the user scrolls towards them.
The result is immediate: the page renders faster, less data is consumed, and the server receives fewer simultaneous requests. On a PrestaShop product listing page with 40 items, this can reduce the number of images loaded on entry from 40 down to just 6 or 8 — a significant reduction in page weight.
Native HTML lazy loading: the loading="lazy" attribute
Since 2019–2020, all modern browsers support lazy loading natively via a simple HTML attribute on the img tag: `loading="lazy"`. Just add this attribute and the browser automatically handles deferred loading — no JavaScript or third-party library required.
Example: `
`. Specifying the width and height attributes is important: it allows the browser to reserve space in the layout before the image loads, preventing visual shifts (CLS — Cumulative Layout Shift).
The JavaScript approach: the Intersection Observer API
Before native support existed — and still today for advanced use cases — lazy loading was implemented via the JavaScript Intersection Observer API. This API detects precisely when a DOM element enters the viewport and triggers image loading at that moment. It offers more fine-grained control: you can define a trigger margin (for example, start loading 300px before the image enters the screen) to eliminate any visual flash or jank.
Never lazy-load above-the-fold images!
Impact on Core Web Vitals
When applied correctly, lazy loading improves several Core Web Vitals metrics. It reduces the total initial page weight, which improves LCP (Largest Contentful Paint) for above-the-fold images — the browser dedicates its bandwidth to priority resources instead of spreading it across every image on the page. It also reduces TBT (Total Blocking Time) by lowering initial network processing.
Conversely, when applied incorrectly — particularly by lazy-loading the hero image — it can cause LCP to spike. This is one of the most common errors found on audited PrestaShop stores: a theme applying loading="lazy" to all images indiscriminately, degrading precisely the metric the optimisation was meant to improve.
Does Google index lazy-loaded images?
Yes. Googlebot can see and index images loaded via lazy loading. Google has confirmed that its crawler executes JavaScript and waits for deferred loads to trigger. That said, it is recommended to use native HTML lazy loading (the loading attribute) rather than a custom JavaScript implementation to ensure optimal indexing.
Lazy loading and CDN: a winning combination
Lazy loading in PrestaShop
PrestaShop does not offer native lazy loading activatable with a single click in the back office. Implementation depends on the theme in use. Recent themes (Classic 1.7+, Hummingbird) generally include the loading="lazy" attribute on listing images. If your theme does not support it, you either need to edit the relevant Smarty templates or install a dedicated module.
- Listing images (categories, search results, new arrivals): ideal for lazy loading — they are typically outside the initial viewport
- Main product image on a product page: do NOT lazy-load — it is usually the LCP element
- Thumbnails in cart or 'related products' blocks: lazy loading recommended
- Hero banners on the homepage: do NOT lazy-load, use fetchpriority="high"
- Images in customer reviews or accordion content: lazy loading recommended