Support » Plugin: W3 Total Cache » Lazy Loading in combination with the official amp plugin images not loading

  • Resolved jcvangent

    (@jcvangent)


    When I enable “lazy loading of visuals” in combination with the official AMP plugin by WordPress (https://wordpress.org/plugins/amp/) it make it that on desktop the image are not loaded and they are replaced in the src of the image with some blank SVG image.

    Any ideas on how to solve this?

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Support Marko Vasiljevic

    (@vmarko)

    Hello @jcvangent

    I am sorry about the issue you are experiencing and I am happy to assist you with this.
    Can you please share your website URL?
    In Performance>User Experience>Script Embed method: selecting the sync (to head) method, save all settings and purge the cache and see if the issue persists.
    Thanks!

    Thread Starter jcvangent

    (@jcvangent)

    Changed it from async to “sync (to head)” and that seems to have fixed it…any reason why it works like this (curious to know but thanks for finding the fix already)

    Thread Starter jcvangent

    (@jcvangent)

    Oh wait, I was to quick it was still in my cache in my browser…have a look here https://usergrowth.io on the homepage for example with the testimonials there should be a picture of the person with the testimonial.

    What I see in the code is the following

    <img class="lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20200'%3E%3C/svg%3E" data-src="the proper URL of the picture" alt="title">

    Plugin Support Marko Vasiljevic

    (@vmarko)

    Hello @jcvangent

    Thank you for the information and yes, I can see the issue.
    Can you please share what version of W3TC you are using? DO you have any image optimization plugin installed and lazyload enabled?
    I can also see that you are using Cloudflare. Is minify enabled in Cloudflare by any chance?
    Thanks!

    Thread Starter jcvangent

    (@jcvangent)

    Hey @vmarko sorry for the delay here, I’m using the latest version (0.14.4).

    The only other image optimization that is happening is that I’m using Jetpack as the image CDN, but disabling that doesn’t make a difference.

    On Cloudflare I indeed have auto minify on for:

    JavaScript
    CSS
    HTML

    And I have the “Rocket Loader™ – Improve the paint time for pages which include JavaScript.” on as well.

    Is there something I should change there?

    Plugin Support Marko Vasiljevic

    (@vmarko)

    Hello @jcvangent

    Thank you for the information.
    Are you using any kind of plugin for testimonials?
    Can you please disable LazyLoading so I can check the source?
    Thanks!

    Thread Starter jcvangent

    (@jcvangent)

    Testimonials are done from Jetpack, but it is not just the testimonial visuals that are not working, also visuals on the blog, etc. everywhere.

    Do you want me to disable lazyloading in W3 Total Cache?

    Plugin Support Marko Vasiljevic

    (@vmarko)

    Hello @jcvangent

    Thank you for the information. Just to confirm you stated that switching the sync (to head) method, save all settings and purge the cache does not help?
    Yes please disable Lazyloading so I can check the source.
    Thanks!

    Thread Starter jcvangent

    (@jcvangent)

    No I thought it worked when I switched, but apparently it didn’t work out, there was a caching thing in my browser that messed it up.

    Disabled lazy loading now and images are back on the website, so it is clearly related to the lazyloading of w3 total cache :-/

    Plugin Support Marko Vasiljevic

    (@vmarko)

    Hello @jcvangent

    Thank you for the information.
    I’ve checked the source now and Yes I can see that the images are loading now.
    However, when I checked the images in the blog I can see that they already have a Lazy tag:
    <img width="1920" height="620" src="https://usergrowth.io/wp-content/uploads/2020/07/Social_Proof_-_Using_Your_Customers_To_Boost_Conversions.jpg" class="attachment-full size-full wp-post-image" alt="Social Proof: Using Your Customers To Boost Conversions" loading="lazy"
    This is not the case with the testimonial images, however, it appears that something is already trying to lazyload images. In this case, its recommended not to use W3 Total Cache Lazyload.
    Thanks!

    Thread Starter jcvangent

    (@jcvangent)

    Do you have any idea what could be causing this “extra” lazy load? The only other thing I could think of is Jetpack, but that lazy loading of images is not enabled in those settings as well.

    Plugin Support Marko Vasiljevic

    (@vmarko)

    Hello @jcvangent

    Not sure, Does the issue persist if you disable AMP? Are the images still not loading then if Lazy loading is enabled?
    Thanks!

    Thread Starter jcvangent

    (@jcvangent)

    I’m using the official AMP plugin. I disabled it, enabled lazy loading of images again in W3 Total Cache and purged all cache (and my browser cache). The images are gone again.

    Plugin Support Marko Vasiljevic

    (@vmarko)

    Hello @jcvangent

    Thank you for the feedback.
    There is one more thing that you should try and that’s to change the theme temporarily and see if the issue persists. Possibly the conflict with the theme you are using.
    Thanks!

    Thread Starter jcvangent

    (@jcvangent)

    Mmm that might be causing it, any idea what to look for in the theme functions or something like this?

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Lazy Loading in combination with the official amp plugin images not loading’ is closed to new replies.