Remove lazy loading for the start image and the small preview images on product detail pages

[gamerlion7]

PHP Version

No response

Shopware Version

No response

Plugin Version

No response

Actual behaviour

Images "above the fold" are lazy loaded.

Expected behaviour

Images "above the fold" should not be lazy loaded, because it increases the page load time and Lighthouse complains.

It would be great to remove lazy loading for the start image and the small preview images on product detail pages.

Steps to Reproduce?

Load and inspect a product detail page.

[tinect]

as mentioned in mail, this will not happen due to possible bad performance. please use the classes mentioned in readme.

[gamerlion7]

I gave the divs that contain the start image and the small preview images the class "no-lazysizes", but the images are still lazy loaded.

Why should this simple fix lead to bad performance?

[tinect]

I just realized that the classes are CMS-specific (block and section), not just any div. Did you use the CMS-related feature in Shopware?

As a workaround, you could try setting a variable lazysizes to false before embedding the thumbnail. For reference, you can check the specific images section in the readme.

Please note, this isn’t a straightforward fix, but rather a feature that requires careful consideration:

Is this needed for every shop?

• What are the potential downsides?
• How does it impact performance (both in Twig/JS) and image sizes when deactivating the plugin’s benefits?
• What are the maintenance implications?

Currently, I don’t see this feature as a general fit for all shops within this plugin. That said, this doesn't mean I’m discarding the idea or that it will never be implemented. There are simply too many factors to evaluate before adding it. For now, I recommend integrating it into your own project if you find it necessary.

[gamerlion7]

Thank you for reopening this issue.

I extended /src/Resources/views/storefront/element/cms-element-image-gallery.html.twig to add the classes to the divs that contain the start image and the small preview images on the product detail page.

I do not get what you mean. How else should it be done?

How can I add lazysizes="false" to these images?

I think you misunderstood it. It should not deactivate the sizes function. Only lazy loading should be removed.

[tinect]

Just a heads-up: LazySizes relies on JavaScript, which only runs after the page is ready, so it will always apply some form of lazy loading.

Regarding your comment:

I extended /src/Resources/views/storefront/element/cms-element-image-gallery.html.twig to add the classes to the divs that contain the start image and the small preview images on the product detail page.

In the Shopware Admin's CMS editor, you can set "CMS classes" directly.

Also, the variable should be set within Twig using {% set lazysizes = false %}.

[tinect]

@gamerlion7 any feedback?

[gamerlion7]

As I said: I think you misunderstood it. It should not deactivate the sizes function. Only lazy loading should be removed.

[tinect]

Okay, you read my message?

Just a heads-up: LazySizes relies on JavaScript, which only runs after the page is ready, so it will always apply some form of lazy loading.

[gamerlion7]

If an image above the fold has loading="lazy", the loading time is worse as without loading="lazy": https://web.dev/articles/lcp-lazy-loading

JavaScript increases the loading time, but that is not the topic of this issue.

It would be great, if Shopware 6 just used correct values for the sizes attribute. That would be best for the loading times.

[tinect]

This is not the case of the used library, is it? https://github.com/aFarkas/lazysizes?tab=readme-ov-file#how-to

It would be great, if Shopware 6 just used correct values for the sizes attribute. That would be best for the loading times.

This was the reason, to create this plugin, while a PR would break the entire storefront and noexternal developer has energy to get it managed to be merged and released. But, you are free to fix it in your project, so you don't need such plugin.

[tinect]

Additionally, there is no attribute with loading="lazy" on default storefront or with this plugin, is there?

[gamerlion7]

The plugin does not use loading="lazy". It uses the principle of lazy loading. Lighthouse and browsers recognise the same behaviour.

Images above the fold should not be lazy loaded. The browser wants to download the images, but the source code says "do not load them immediately". The browser calculates that the images are above the fold or nearby and then starts downloading them. The time for calculating the image position increases the loading time.

Shopware uses loading="lazy" for images in the frontend since 6.5.1.

So the lazy loading of the plugin can be removed for Shopware 6.5.1 and newer versions, if it is not already done.

The plugin uses the classes "lazyautosizes" and "lazyloaded". It seems like removing the class "lazyloaded" for the start image and the small preview images on product detail pages would fix this issue.

[tinect]

lazyloaded comes from used library lazysizes, not this plugin.

I don’t know why we talk past each other.

However, thank you for the detailed discussion on this topic. After reviewing the issue, it appears that the behavior you're experiencing isn't related to the LazySizes plugin itself, as it inherently relies on JavaScript to handle image loading. Additionally, the plugin doesn't add the loading="lazy" attribute or classes, so the issue seems to lie elsewhere. For your specific case, customizing this in your project might be the best approach.

[gamerlion7]

This plugin loads images lazy without using loading="lazy".

The issue is caused by the plugin.

Fixing false sizes attributes is good and loading images lazy that are a good way below the fold improves the page load time.