Website loading with blur images

First and foremost try to identify what is breaking things by just disabling CSS or JS or HTML or Image optimization (incl. lazyload). Once we know that we can decide what the next step(s) should be.

frank

Unticked lazy-load images. Reloaded page and images are loading fine, no blur. What seems to be the issue with the lazy load option, I wonder.

the blurry image is the “low quality image placeholder”, which _should_ be replaced by the shortpixel-cdn-optimized image by virtue of the lazyload JS (lazysizes), which I assume does not happen due to a JS problem. any JS errors on the browser console when lazyload is on?

Hi!

I have done a recording of the browser console, I think this is what you are refering too if not I would appreciate it if you point me to the right place. Thank you

https://www.loom.com/share/3996054c81b447bca297272835b9ce17

Ah, OK, so the problem is not with the fact the blurry images aren’t replaced with the “real” image, but the fact you see the “low quality image placeholder” first?

In that case you can disable the LQIP’s with this code snippet;
add_filter( 'autoptimize_filter_imgopt_lazyload_dolqip', '__return_false' );

hope this helps,
frank

Thank you Frank! where exactly do I add this to? Do i need to download the code snippet plugin? I am not shy to update code, but would need to know where. :/

The easiest & safest solution indeed is using the code snippets plugin.

Quick question though, why am I seeing this now, this was not present before. This is also happening on my other two websites is this due to the latest OA update?

there was a bug in the previous versions which had the lqip image loaded while it remained invisible, which is why you didn’t see it before ??

thank you. I have added the code snippet to the function.php and seems to have fixed it.

• This reply was modified 4 years, 3 months ago by bluelightwave.

happy it works bluelightwave, feel free to leave a review of the plugin and support here! ??