Lazyload images from mega menu

Dear,

I noticed that images included in my mega menu are not lazyloaded.

If you check the GTmeteix waterfal chat, you’ll see a bunch of images being loaded at the end of the chart, which are all images from the desktop mega menu. However, those imags arent used unless the user hovers on a particular category of the mega menu.

Can you improve the lazyload so that images of mega menu are also lazyloaded? This will boost considerably the site’s performance, especially if our menu contains a quite a lot of images (like mine)

Thanks

Hello,

When you enable “LAZY LOADING” option to optimize your images loading on the website. They will be loaded only when user will scroll the page.

The mega menu normally don’t need scroll as they don’t have enough height. Currently there is no such option to change this behavior so that images of mega menu are also lazy loaded. It requires customization and this is beyond our limitations and support policy.

Best Regards.

Dear,

I don’t agree with the answer.

This is fully in scope of your support because it’s not okay to ask third-party developers to come modify files from your theme, and nothing guarantees that third-party improvements wouldn’t cause conflicts with any further theme update.

I would like that you consider this as an improvement, so that images that shall be displayed after triggering a “hover” state should be lazyloaded. Can you please add this in your list of important improvements?

Actually, we already have something a bit similar with the product page tabs, where the images are lazyloaded and generated/displayed NOT after scrolling down the page to that section but ONLY AFTER opening the particular tab. And this was an improvement implemented after my suggestion.

Thanks

Hello,

I said currently I can not provide you code to add this functionality. But we will try to consider this in the near future release of theme, as per your request.

Best Regards.

Dear,

I would like to extend this topic as follows, that is to lazyload all images hidden by default under a “hover” state.

Two major cases can occur in this situation :

– in shop page, when you hover on a product, additional images gets displayed which doesn’t need to be loaded upon page load => they can be loaded if the user hover on the product

– in the header, if you have a mega menu, all images are loaded at page load, which is not necessary neither => they can be loaded only if the user hover on the menu

Do you have new information on whether this would be taken in future release? It’s really important because check the example of gtmetrix waterfall analysis in private. Because of the two above reasons, I’m loading about 20 images at page load which are not all necessary and that’s very bad for performance.

Thanks

Hello,

I have seen the GTmetrix report. The only way to solve this problem for shop images for now is to resize these images to size proposed by GTmetrix. Or you try to change the size of shop products images from Appearance >> Customize >> WooCommerce >> Product Images >> Thumbnail width, as they resized from from 600×600 to 122×122.

I appreciate your both the suggestions, about the shop page hovered images and about the header mega menus. We will try to implement this in near future release of theme but I can’t tell you the fix date. You have to be patient.

Best Regards.

Hi Aizaz,

Ok I’ll wait for future releases.

Thanks

Hello,

Thanks for your patience.

Best Regards.

Hi,

Any idea when the next release is planned?

Thanks

Hello,

I am sorry I do not have the exact time-frame for an update but hopefully release will be in one-two weeks.

And also we didn’t declare this feature to be implemented in that update.

Best Regards.

You said :

we will try to consider this in the near future release of theme

Please the this priority, it’s very important!

Hello,

I am sorry for the inconvenience but this is not my decision, I forwarded this to the development department and now it is up to them, If they find that feature fit with the Theme environment they will surely look through it with the upcoming updates of the Theme, but I am not giving you the guarantee for that because please note that a theme cannot satisfy all requirements as it may occur theme heaviness. Sometimes it may require your own customization.

Thanks for your understanding.

Dear,

I already explained you the importance and reasons why this should be implemented. Now I have to repeat the same reasons I explained above.

This cannnot be a third-party customisation because it’s can conflict with the theme’s future updates. I cant ask someone else to develop this because I will never able to guarantee that it wont affect the theme’s functionning.

You must implement this because it will bring performance improvement! It’s nonsense to load all pictures at pageload if pictures are hidden by a hover state.

Again as I said, it leads the images in hover mega menu & hover images in shop page product to be downloaded at the page altough they are not displayed until the user hover on it.

This needs real investigation. I already provided you a GTmetrix example where you could see in the waterfall chart that so many images are loaded at page load, altough they are not required at page load.

In a previous answer, you replied me with a totally different thing about image optimization, which is not my point here. Please dont change the subject.

Please escalate this. And once again, it’s not a small customization for my own. It’s an improvement that can boost your theme performance significantly, and not just for me but for all your users’ benefit!

Thanks

Hello,

Thank you for all your suggestions. As was mentioned, these improvements will be considered by our developers in our future releases.

Kind Regards

Dear,

Will you finally include a fix tor this issue in the coming release?

I’ve raised this about 3 months ago and still hoping you’d tackle this important issue.

Thanks

Dear,

As a summary, the lazyload is not working for :
1. images added in hover mega menu
2. images added in product page “description” tab
3. images added in product page gallery / variations images (which are not yet visible on screen)

Have a look at the GTmetrix link provided in private, my site is forced to load about 100 images upon pageload which are not being displayed on the screen! Most are images are not displayed unless the user scrolls the gallery, hover on the menu or scrolls down the description tab. So why then forcing the download upon page load?

Please consider this as a MAJOR issue in the theme for site performance, and please take this as a priority improvement of the lazyload.

Thanks

Hello,

We didn’t say that it will be definitely implemented asap. We will consider this as a feature request for our updates.

Kind Regards

Dear,

You said the same 3 months ago and there is still nothing done about it.

You’re giving me the same vague and unclear answer. If this answer was not sufficient before, it will still be insufficient now.

I request this topic to be discussed in team with your developers and provide me a clear answer if Yes or No you will do something about it. If Yes, when. And if no, I want good reasons.

This improvement is too important to me, well not only to me but for ALL your users. And I’m paying for this support so I have the right to push for my ideas to be implemented in priority.

Thanks

Hello,

We understand this but these images are located at the to of the screen so loaded initially. There is no way to change this behavior for now. You can try our AJAX dropdowns instead. Enable this option in Appearance -> Menus for each mega menu item.

Kind Regards

Artem,

About the mega menu hover images
Thanks for letting me know that there is an Ajax alternative. I just tried it and now the images from the mega menu are not being loaded upon page load anymore. You can see the attachment below where you will see massively huge increase in my site’s performance (speed and scores). This should considerably boost the importance of this improvement, i.e. making the lazyload compatible with the images added in hover mega menu. However, I noticed a bug in the loading of the Ajax menu, which I will raise in a separate ticket because many points are covered already in this thread.

About the description tab
As described in the other ticket below, the lazyload is indeed compatible with the description tab when adding the images with WPBakery only.

https://xtemos.com/forums/topic/images-in-product-page-description-tab-are-not-being-lazzyloaded/

About the product gallery
Unfortunately, I’m still not finding an answer on this part. When I load product such as the one given in private, the page loads with the full sett of images from the gallery, even if the additional ones are not being yet displayed on the screen. What do you advise on this?

Thanks

Attachments:

You must be logged in to view attached files.

About the product gallery
All images are loaded at the beginning on the page in the carousel.

Hi Artem,

I know, that’s exactly the point. Take my example of my product which contains 90 variations. I’m obviously obliged to put a picture in the gallery for each variations. This means that 90 pictures are loaded upon pageload altough only 3 are displayed at the beginning in the screen. The lazyload should load only the images of the gallery which are displayed on the screen, then if the user scrolls the gallery we load the next images.

Thanks

Sorry, but lazy loading load all pages that are currently in the screen even if you don’t see them because they are in the form of the gallery.

Yes I already clearly understood the actual situation. What I’m asking is wheather this can be improved in the future, because this would be a real performance booster in your theme.

We can’t guarantee this for our future updates but thank you for the suggestion. We will consider implementing it.

Ok I added in feature request

Please close this ticket, thanks

[Author]

Posts