Beats247

Hello @vmarko,
I switched back to your plugin again as the mobile loading issue was because of Varnish and it also happened with WP Rocket. I disabled the lazy load for now and I am having no issues beside one JS error I’ll try to fix.
However, do you think it is possible to fix the lazy load issue (wrong image size) for the image section below the slider? Can we exclude them somehow or fix this any other way as everything else was working? Lazy load with WP rocket was not giving me this issue so I guess there is a solution for this?
PS: I have W3 TC installed on my main site now -> https://beats24-7.com

Thank you very much again!

Hi @gvectors-team,
thanks for your reply. Yes, here’s the link: https://beats24-7.com/product/trapsoul-vocal-chops/

Hello @vmarko,
I am currently testing with WP Rocket because the theme developer recommended it for his theme. The image lazy load function is working fine so far so I am not sure if you have seen an old cached version at your end?
The images have the correct size for me with WP Rocket’s lazy load. Checked it with different browsers and deleted cache, it’s working fine. Thanks again!

Hey @vmarko ,
I am on Cloudways and I am using Varnish. Varnish is also currently enabled. I am currently testing WP Rocket because the theme developer said it would work with his theme. It has the same mobile issue though so it’s caused by Varnish. Disabling Varnish solves the mobile issue. Unfortunately, I just found out that Cloudways still refuses to add a device detection feature to Varnish although it has been requested from users for years. That’s really disappointing.
The lazy load for some images on my website that didn’t work with your plugin is working fine with WP rocket though so maybe you saw an old cached version of the site. There seems to be some kind of incompatibility with your lazy load function then, unfortuantely. Thanks again!

Hello @vmarko,
thanks again for your reply. Yes, but he didn’t reply anything that would help us. Just that I should use WP Super cache or WP Rocket…. The theme support isn’t very helpful in that regard, unfortuantely :/

I just found online though that Varnish could be the issue?

Separate cache files for mobile devices
If you have activated the Separate cache files for mobile devices option (on the Cache tab), you must make sure that your Varnish configuration is set up to distinguish mobile requests from desktop requests. Otherwise the wrong version of the cache could be served. This is a known issue with Cloudways Varnish configuration.

Do you think that could be the problem and how would it needed to be configured? I couldn’t find anything in that regard. Thanks again!

Hey Marko,
the theme has a built-in lazy load feature but I already deactivated that. I also deleted the css code from the theme’s CSS file but it keeps popping up when I enable your lazy load option. I don’t know where this CSS code is coming from even when I deleted it… Deactivating your lazy load isn’t really an option because then the complete site has no lazy load function. The lazy load function of my theme isn’t as good as yours, unfortunately.
I guess I’ll have to try yet another caching plugin *sigh*, there’s also still the mobile issue so I guess that’s my only option. Anyways, thanks again for your help Mark, it’s much appreciated. Keep up the great work!

Hey @vmarko,
ok, I just deactivated lazy loading so you can check it. Thank you again for your help!

Hello @vmarko,
yes, you are right. I purged the cache again and acessed the site from my desktop without being logged in. It’s gone back to the standard issue and loading the desktop layout everywhere on first load again ??
So is there any way we can solve this? I will let you know as soon as the dev of my theme gets back to me. Thanks again for your help, I very much apprciate it!

Hey @vmarko,
I just tried it a couple of times with cleared cache and inkognito browsers (chrome, opera) on desktop and it’s always showing me the mobile version on first load now.
This is so weird :/

See: https://prnt.sc/107pcht

Thanks again!

Hello,
alright, thanks. But how is sth. like ‘data-lazy-src=’ an image class f.ex.? There are several entries like this set as standard in this section already. I don’t understand them.
How do I set the class for these images? Can you let me know please?
The page is set up with WPBakery so this is the section: https://prnt.sc/107p46o -> Class setting https://prnt.sc/107p4tq / https://prnt.sc/107p5xi
Isn’t this a way to assign them a class, or is it just a div class? How would you set up a speficic class for them? I am also not sure why lazy load only stretches these images and everything else works, is it because it cannot handle the CSS?

Yes, but that won’t really work as the images change quite often, unfortunately.
Thank you very much again.

Edit: Ehm, looks like it’s the other way round now, lol? I didn’t change anything though but purging the cache (+CF). Now it’s loading the mobile layout on desktop first, omg… Can you confirm this? Thanks again.

Hi @vmarko ,
thank you very much for checking again. Yes, that’s exactly the issue. The first load on mobile is always the desktop version and you have to reload the page so the correct footer and header are served. Enabling or disabling user agent groups (mobile) makes no difference, unfortunately.
I don’t know whats the conflict with the theme though? I already contacted the developer of the theme to find out how he implements the footer/header/cart in the mobile option. So far he only replied this though:

You need to ask your cache plugin about a Mobile device support option like WP Super Cache. Almost all cache plugins support this option
https://docs.drfuri.com/martfury/3-mobile-troubleshooting/

I asked him for more info on that again though.

Currently, I have not added any rejected user agents in the page cache option because then there won’t be cached pages served for them. If I add e.g. ‘android’, ‘iphone’, etc. the issue is gone but then it’s becoming slow on mobile as caching will be bypassed. Thank you very much again for your help.

Hello Marko,
I have enabled your default mobile cache group. As mentioned, I have tested both, pass through and my current theme Martfury child. Both settings have no effect.
Settings: https://prnt.sc/106xrjx

Hey Marko,
thanks again. Sync to head didn’t fix it, unfortunately. I know why this is happening now. All images on the homepage have the CSS class ‘mf-product-thumbnail’. The 3 lists on the homepage have the CSS class ‘product-thumbnail’ though and I used some custom CSS code to increase them in size:

.mf-products-list-carousel .product-item .product-thumbnail {
width: 150px;
}

The standard was 70px. The lazy load now takes smaller images and stretches them even bigger somehow. Is it possible to exclude only these images from the lazy load?
If I remove the custom CSS code they remain at 70px with lazy load but they are too small then (that’s why I increased their size with CSS). Let me know please. Other than these images everything else looks fine. Thank you very much again!

Edit: I have tried to exclude them with the exclude words section but they are still lazy loaded. I tried

no-lazy-images (gave the whole section that class name)
product-thumbnail

Both have no effect. How can I address these correctly? Thanks

Hi again,
thanks for your reply. Again, the W3 plugin is not disabled, it’s enabled.
I disabled all general settings again and deleted the CF cache. It went back to normal then.

When re-enabling everything one by one, the issue occured again when activating ‘Lazy Load Images’. Is there any fix for this as this option really saves some loading speed?

Thanks again