Disable lazy loading for images in specific element

I have found the reason why the images were not loading in the viewport until scroll, it’s WP Rocket’s Mobile Cache feature. If Mobile Cache is enabled in WP Rocket, it will not load images until you scroll the page on mobile browsers, even for images in the viewport.

I followed your guide at https://space.xtemos.com/wordpress-performance-optimization-the-ultimate-guide-in-2021 and it says specifically:

WP Rocket -> Settings -> Cache -> Separate cache files for mobile devices. Recommended. Activate this option if you use our Mobile DOM optimization option in Theme Settings -> Performance or create a separate page for mobile devices using an appropriate option for particular pages.

Please can you check if you can duplicate this and offer a solution? I want to be able to enable Separate cache files for mobile, since it improves pagespeed insights for mobile considerably.

Thanks.

Hi,

Disabling the ‘Delayed JS’ option in WP Rocket settings has solved the issue, images are now loading again on mobile in the viewport. However, my Pagespeed Insights report went down from 85 (mobile) & 98 (desktop) to 65 (mobile) and 87 (desktop). What can we do to increase this?

There’s an option in Wp rocket to specify URLs or keywords of JavaScript files to be excluded from defer (one per line). Before, I followed your guide and copy/pasted the list below:

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

Can we make an adjustment to this list so that we still benefit from faster pagespeed yet avoid the image loading problem? Please let me know as soon as possible. Thank you very much.

Doesn’t have any effect, unfortunately. I now have this list:

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

http://prntscr.com/1z0tc7a

Hi, this was already disabled, so that can’t be the reason. See http://prntscr.com/1z18pdn

see below

Yes, it works now. Did you change any settings or did it just start working now? Also, not sure if you changed anything in the settings or if this is because of the theme update to 6.2 earlier today, but the main theme color has been reset to green and the options how woocommerce products are displayed has been reset, even though I had a child theme active. Is this normal? Normally when you have a child-theme, these type of settings should be left as is when you update the main theme?