To improve performance and user experience, we have made several changes related to image handling on the website. Below is a summary of the adjustments you should be aware of.
The change is scheduled for release on April 08, 2025. If you are an addon developer, please review the changes described below now and adjust your addons accordingly. On the release date, these improvements will be rolled out to the majority of customers. E-shops using Deferred Template Updates will have time until April 22, 2025 to modify their customizations and accept the update.
You can preview the changes by running the command shoptet.helpers.enableUpdatePreview('product_images_lazy_load') in the browser console.
Lazy Loading Implementation
We have implemented lazy loading for the majority of images across the site. Images are now loaded only when they are about to enter the viewport (e.g., upon scrolling or opening an overlay), which helps reduce initial page load time and prevents unnecessary network requests.
Placeholder strategy:
Until an image is actually loaded, a transparent SVG placeholder with the correct final dimensions is rendered.
This prevents layout shifts (CLS) and ensures a smooth visual experience.
Lazy Load Rules
The following groups of images are excluded from lazy loading and are loaded immediately on page load, as they are critical for the above-the-fold content and user experience:
Homepage:
– Top-position banners
– The first image in the carousel
– The first row of product images
Product Listing Page:
– The first row of products
Product Detail Page:
– The main product image
Article Listing Page:
– Disco and Samba templates: the first row of article images
– 3G templates: the first article image only
Article Detail Page:
– Samba template: the main article image
Global:
– The site logo on all pages
Note: All other images that are not explicitly mentioned above will now use the lazy loading mechanism.
Image Dimensions
To further improve performance and support the lazy loading mechanism, we have systematically added width and height attributes to almost all images.
Exceptions:
Some images remain without explicit dimensions due to dynamic sizing:
– The e-shop logo
– Payment and shipping icons
Improvements
As part of additional page speed optimizations, we have added the fetchpriority attribute to all images. Only the first (main) image is marked as high priority, all others are set to low priority.
Implemented JavaScript functionality to allow keyboard control of the main menu.
The admin bar language now correctly follows the admin’s selected language instead of the template language.
Bugfixes
Fixed an issue where the deferred update preview could not be enabled from the admin bar when Polish, German, Romanian, or Vietnamese languages were set.
The quantity input now supports values greater than 999.
Fixed an issue where long texts inside Waltz flags were overflowing.
Adjusted the Samba loader color.
Upcoming Improvements
Breaking change: We plan to update the text of the conversion button (only in English) from “To cart” to “Add to cart” very soon.
