Return to previous page

Mega menu images not compatible with lazy load

This topic has 8 replies, 2 voices, and was last updated 11 months, 2 weeks ago ago by Rose Tyler

Fabio

Participant

May 7, 2023 at 21:42

Dear Support,

I am contacting you to seek for support.

I have built my website taking advantage of the mega menus and the option of having an inbuilt image. I then created sub menus with a dedicated image for each of them, which dynamically changes when moving the mouse across the submenus.
The mega menu expands if somebody moves the mouse on top of it, only then the submenus and related images are visible.

I have activated the lazyload (through my hosting, SG Optimizer) and I would expect that mega menus images were loaded with a lower priority. In other words, they should be loaded after the main product page image. Instead, when I analyze the water fall it appears that the menu images are loaded first and only after the the product page image is loaded. Please see the evidence here: https://snipboard.io/uFz9fr.jpg

Google is penalizing me because of high LCP. This because in all my product pages, the main image is loaded only after all submenus images are loaded.

When I contacted my hosting provider, through which I activate the lazy load, they informed me that there is an issue with the theme.

Problem 1:
The images are not being lazy-loaded because of the the custom way they have been added to the mega menu. The images are simply added via CSS and not inserted into the menus as a normal image. This makes it so even WordPress’s own lazyload functionality won’t work on those images, thus why the hosting (SG Optimizer) doesn’t lazyload the image.
This is an example:
.menu-item-45630 .nav-sublist-dropdown { background-image: url(https://www.muranoglassitaly.com/wp-content/uploads/2021/09/luxury-4.jpg);}

Could you please help me to add images to the megamenu in line with wordpress standard (no via css) so that they could be lazy loaded?

Problem 2:
I am not using the lazy load theme functionality, nevertheless it appears that the theme is adding a additional tag “et-lazy-loaded” to same images representing a duplicated lazy-load tags. Please look at the given URL as an example for relevant images with duplicated tag. Duplicating tag can cause issues in terms of lazy load.

Could you please help me to remove the duplicated tags injected by the theme as it appears to be a mistake?

Thanks in advance for your help.

F.

Please, contact administrator
for this information.

#355862 Copied Theme version: 9.1.2

7 Answers

Rose Tyler

Support staff

May 8, 2023 at 08:49

Hello, Fabio,

Thank you for contacting us and for using XStore.

Please provide temporary wp-admin and FTP access. Then this topic will be passed to someone from our dev team.

Kind Regards,
8theme team

#355907 Copied
Rose Tyler

Support staff

May 8, 2023 at 12:06
Hello, Fabio,

1/ We would like to suggest the next custom CSS code to solve the first question:
```
.nav-sublist-dropdown .nav-sublist ul li.menu-item-object-product_cat .nav-sublist-dropdown {
    background-image: none !important;
}
```
2/ For solving your question about .et-lazy-loaded class added “by mistake” we need to know what class your lazyload SG Optimizer adds to image so we could add that class for exclusions. It could be the next one
ls-is-cached
but couldn’t you make us sure it is correct? Or maybe there is another class for lazyload from a plugin?

Kind Regards,
8theme team
#355936 Copied
Fabio

Participant

May 8, 2023 at 13:44

Dear Rose,

Thanks for your reply. I was working on creating a staging for your so that you can enter and see. Please find the credentials below.
Please note that this is not a staging that I am planning to deploy, changes that you implement would need to be copied on a different staging. I would then suggest that you keep track of the changes and let me know.

Problem 1:
In the mean time, you provided a CSS code and I made a test on my live website. The new code is making the problem even worse.

Please have a look at the evidence: https://snipboard.io/q9rOLA.jpg

You can see that images from the submenus do take even more time for loading and they are not defer to the end, the main product page image is loaded after all menu images.

Could you please further investigate and help me to find a solution?

Problem 2:
I will ask the hosting provider and come back to you shortly.

Thanks in advance for your help.

F.

Please contact administrator
for this information.

#355952 Copied

Fabio

Participant

May 9, 2023 at 08:10

To add to my previous message, please find in the following the answer that I got from the hosting provider concerning the relevant class for problem 2 and suggestion for problem 1:

“The class that gets added when an image is lazy-loaded from our plugin hosting related is lazyload. Please also ask them to check what’s the difference at theme level, between the images added in the menus and the images that are actually lazy-loaded so they can provide you with information on how to add/insert them the same way into the menus, so they can be compatible with wordpress lazy-load functionality that represents the basis for our hosting related caching plugin to work. ”

Thanks in advance for your help.

F.

#356033 Copied

Rose Tyler

Support staff

May 9, 2023 at 15:02

Hello, Fabio,

1/ Could you please, check your 1st question to check on the staging website?
We did modifications in next files:
xstore/framework/walkers.php
xstore-child/functions.php ( https://prnt.sc/-CIDQdt8rxWb )

2/ Please check now, screenshots are in the Private Content area

Kind Regards,
8theme team

Please contact administrator
for this information.

#356129 Copied

Fabio

Participant

May 9, 2023 at 17:11

Hi Rose,

Thanks a lot for your help, I really appreciate.

Concerning problem 1:
I made a test comparing the staging31 where you have just implemented the changes and the live website with no modifications, the menu images appear in both cases not be lazy loaded. Please find below the evidence.

https://snipboard.io/0LyXuV.jpg

The product page image instead is loaded with lazy load, but after all menu images are loaded. Please find here the evidence:

https://snipboard.io/0ZhKpb.jpg

On this basis I am afraid to report that I do not see the issue yet solved, if possible I would really appreciate you further help.

Problem 2:
Thanks for the improvement, it looks fine with me.
Could you please explain in words the improvements that you have implemented in the script? what is the effect?

Finally, could you please tell me what should I copy and where, in order to transfer these changes to the the staging that will be deployed (as you remember I explained that staging31 is for testing and will not be deployed)

Best regards,

Fabio

#356144 Copied

Rose Tyler

Support staff

May 10, 2023 at 08:43

Hello, Fabio,

Thank you for your response.

1/ Recently we improved the “getter” functions for menu images ( https://prnt.sc/CKb1aQmn234P in xstore/framework/walkers.php) with wordpress default function called ‘wp_get_attachment_image’ → https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

Could you, please, explain to us how should the image be taken or what function we should use then to make it correct lazyload with your plugin? As we see in their code they use a few filters for replacing/adding ‘lazyload’ class → https://prnt.sc/UMkgWVTlb3Z3 but how should it be done then? Also, maybe, it is a question related them to add one more filter for such cases, or in your case such menu images are simply load first without lazy because they are at the same top of each page?

2/ In a few words:
As we changed the function for getting image for menu items you should also replace srcset attribute for images on hover. Changes were made in your script file → XStore Child: custom-megamenu-script.js. More info about srcset → https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Kind Regards,
8theme team

#356205 Copied
Tagged: compatibility, images, lazy load, mega menu, templates, woocommerce, wordpress
Viewing 8 results - 1 through 8 (of 8 total)