I have two websites built using the Newspaper theme, both utilizing the same cache plugin.
1. On one website, images load correctly using lazyload.min.js, even with JavaScript delay enabled in the cache plugin.
2. On the other website, images are loaded using jquery.min.js, but they fail to load when I enable JavaScript delay in the cache plugin. Images only appear when users scroll or click.
I understand that turning off the JavaScript delay would resolve the issue, but doing so would result in loading all JS files upfront, leading to Cumulative Layout Shift (CLS) and render-blocking issues. I’m puzzled as to why this behavior occurs despite using the same theme and plugins on both websites.
Screenshots: https://1drv.ms/f/c/b7bcb608ab0045fe/EpifkgMvK_9Ju5t5LFtdsoIBorWJY8lYf2wOM4vEeEIjog?e=krd5ZT
website 1 that works fine: nilslab.com
website 2, that has issue: historyexamprep.com
i used a custom code that solve the issue for me. is there any issue if i used the code?
And is it possible to fix the issue without using that code?
function switch_to_wp_rocket_lazy_load() {
// Deregister any existing jQuery-based lazy load scripts
wp_dequeue_script('jquery-lazyload');
wp_deregister_script('jquery-lazyload');
// Ensure WP Rocket's lazyload script is enqueued
wp_enqueue_script('lazyload', plugins_url('/wp-rocket/assets/js/lazyload/17.8.3/lazyload.min.js'), array(), null, true);
}
add_action('wp_enqueue_scripts', 'switch_to_wp_rocket_lazy_load');
After disabling Lazyload from the theme panel, the site functions correctly. However, SVGs only appear when interacted with by scrolling or touching.
Hello!
I can see that your website historyexamprep.com is working well.
Did you solve the issue?
Thank you!
Yes. Thank you.
Hello!
I’m glad!
Have a nice day!
