Gallery Swiper and Mobile Menu loading too late

Hello,
I see on all product pages the following problem: the gallery swiper and mobile menu are loading too late.
See in the private section what my user experience looks like (gallery unusable for some seconds, the same with mobile menu).

Deactivation of all 3rd party plugins already tested, no result: see the videos in the private section showing it and user experience.

I see that gallery arrows and menu are loaded only after everything else is loaded. This behaviour is exactly the same on your demo websites (to test load page without cache): https://woodmart.xtemos.com/shop/accessories/smart-watches-wood-edition/ – here the menu is unusable in the first seconds too as well as the gallery.

Adjusted fix: please load visible components first, both mobile menu and gallery swiper should be available before everything else is loaded, not after.

Login data for the staging site is attached, but you can perfectly test it on your demo website.

In case you can’t reproduce the behaviour, just add some heavy content to the area at the end of the product page, it will highlight the problem even more because of the longer loading times. Or just take an older mobile phone and test there.

Hello,

As I can see, my colleague suggested you remove the video from the product page and test how it works without it. Could you please write a result of such a test?

Kind Regards

Hello.
As already mentioned. “This behaviour is exactly the same on your demo websites (to test load page without cache): https://woodmart.xtemos.com/shop/accessories/smart-watches-wood-edition/ – here the menu is unusable in the first seconds too as well as the gallery.” There is no video on this page, do you know this?

Well, I see I was not clear enough. We are speaking about loading first things first, do you understand it? The video on the product page helps, it highlights the problem. You are trying to keep pages light to hide the problem because the period of time the content is unusable is shorter. Your pages in the demo are VERY light, and still: “here the menu is unusable in the first seconds too as well as the gallery”.

The purpose should be the right programming allowing the usage of more heavy content which is loaded on demand (lazy loading). Can you please confirm you understand the problem because your suggestion doesn’t show it?

As for me, I need more than one video on every product page. Do you really want to define restrictions?

I may have a heavy video down the page. This video is not visible and should be loaded as far as I come to it (scrolling). But I still want to be able to swipe through the gallery right after I open the page. Even if I have 100 videos down there. I may never come to the video at all. Which relevance does the lazy loaded video have to the swiper and mobile menu availability?
I am sure if I delete not only the video but the whole content, the loading time will be better. I could also delete all gallery pictures – problem solved? Is it how you see the theme usage? Why such suggestions like deleting something?

Hello,

Yes, the menu dropdowns also need a script to make it work and it starts working only after the page is fully loaded. If you want, we can give a CSS code to make it work without script on your website. But we can’t do this for the slider because we use the Swiper JS library there. It is how it works with any theme that uses that or similar library.

Kind Regards

>>> If you want, we can give a CSS code to make it work without script on your website.
I think it makes sense. Can you apply it as a patch? Why have you left ist like this?

Can you say something to the strange flip of the gallery visible here: https://drive.google.com/file/d/1jELgC7KVFSarXokZ6ck1_H1zGzRyB6iz/view?usp=sharing at about second 20?

Hello,

All scripts are executed on the window load event when all DOM elements are ready. Menu dropdowns have a JS script to calculate their position when they are positioned outside of the container. If we remove this script, you will see a “jump” effect when you hover the menu item in some cases. That is why we will not change this in our theme. But here is a custom CSS for your website.

.website-wrapper .wd-nav-main:not(.wd-offsets-calculated) .wd-dropdown:not(.wd-design-default) {
	opacity: 1;
	pointer-events: unset;
}

We can’t reproduce the gallery flip issue on our end. Please, disable all plugins that are not related to our theme and send us your admin and FTP access so we can check why it happens on your website.

Kind Regards

Hello,
this script should into child theme css, right?

Plugin test already done, the flip effect seems to come with WP Rocket settings.
It brings me back to the ignored questions from earlier tickets.
I used your tutorial https://xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021/ which is not up to date (from February 2022 or earlier). Both the theme version and plugin settings have changed.
So the third attempt to ask: can you update this tutorial?
I will also post my settings, maybe you can find the reason there.

Is this list from the tutorial up to date?

jquery.min
helpers.min.js
clickOnScrollButton
searchFullScreen
menuOffsets
menuDropdowns
cartWidget
mobileNavigation
loginSidebar
menuSetUp
cart-fragments
slick
productImages
cookie.min
owl.carousel
owlCarousel
imagesLoaded

Or do I use Theme settings – Performance – Plugins – WP Rocket delay JS exclusions setting? If the setting is on, the list is not visible in WP Rocket exception, is that right?
So what should I use, the setting, the list or both? Or maybe you can update the list?

Please check the settings related to the delay on uploaded screenshots.

Attachments:

You must be logged in to view attached files.

We don’t see this issue on our end even when using WP Rocket with the latest version of the theme. That is why we ask you to provide your admin access so we can test on your website without any third-party plugins active.

[t.simkina]

Can you answer my questions above? Please go through the posts and answer questions.
Here:
Is this list from the tutorial up to date?
Or do I use Theme settings – Performance – Plugins – WP Rocket delay JS exclusions setting? If the setting is on, the list is not visible in WP Rocket exception, is that right?
So what should I use, the setting, the list or both? Or maybe you can update the list?

I think it’s just crazy how you ignore questions…

• This reply was modified 9 months, 1 week ago by t.simkina.

[t.simkina]

Honestly, I don’t want to give a bad review, but do you understand which impression ignoring questions creates? I really don#t know which word I should use to ask you please answer my questions. Just one for one. Just answer?

• This reply was modified 9 months, 1 week ago by t.simkina.

Can you also check the settings on the screenshots?

If you enable this option in Theme Settings then you don’t need to put the list in WP Rocket settings. But anyway, it shouldn’t affect the problem with the gallery.

[Author]

Posts