Support » Plugin: W3 Total Cache » W3TC creating a blank image slide in image slider lazy loading

Viewing 15 replies - 1 through 15 (of 15 total)
  • Thread Starter deewinc

    (@deewinc)

    The issue also affects this table on my website. W3TC lazy load adds that redundant transparent image/placeholder. The images at times fail to show.

    Here’s the image that it adds.

    data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E

    LINK: http://bit.ly/W3TCLAZYLOADBUG

    • This reply was modified 1 year, 5 months ago by deewinc.
    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @deewinc

    I am sorry about the issue you are experiencing and I am happy to assist you with this.
    The links you shared are related to the Autoptimize plugin and not the W3 Total Cache.
    I’ve checked your website and I do not see any issues, however, I do see that the images are lazy-loaded and not with W3 Total Cache.
    Do you have any other solution you are using for image lazy loading?
    Thanks!

    Thread Starter deewinc

    (@deewinc)

    Hello,

    Autoptimize blaming W3TC while you’re blaming them back again. But from my inspection it’s your issue.

    Here’s why.

    1. Yes, the theme has a default lazy load feature but it bypasses any image sliders and tables with images that I insert on the content pages. And it’s only W3TC that’s able to detect these images and lazy load them.

    2. I have run tests with Autoptimize disabled and W3TC lazy load is the one causing it. It disappears after I disable the lazy load on W3TC

    If you want, I can disable the theme’s lazy load and Autoptimize for you to troubleshoot more. I’ll also open a thread on Autoptimize help forum to share this issue.

    By the way, try pay attention to my main post and follow my explanation closely. Interract with the image slider on that page as I have explained and you’ll see it loading the blank slide.

    Also, go to the page with tables and reload it. Hard reload the page to delete any cache. Then try expand the tables to see photos, you’ll notice some records have that blank image.

    • This reply was modified 1 year, 5 months ago by deewinc.
    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @deewinc

    Thank you for the information.
    First of all, I am not blaming anyone, I am simply stating that the issues you share in the main post do not have anything to do with the lazy loading of the images but with the conflict when using HTML minify because W3TC is loading the library. Now that has been fixed in our latest release as you can see in the changelog.
    I’ve inspected both pages you shared. I am not seeing any blank images. The images load fine in the slider and in the table.
    Yes, I am seeing this:
    data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E
    One thing that you can try is Changing “Script Embed Method” from “Async” to “Sync (to head)” in Performance>User Experience.
    Since you mentioned that you also have a theme’s lazyload please disable it and also any other lazy load feature and check if you are still experiencing the issue.
    Thanks!

    Thread Starter deewinc

    (@deewinc)

    Hello,

    Thanks for your response. I have created a video for you to watch and understand the issue better. Before creating it, here’s what I did.

    1. Deactivated Autoptimize

    2. Deactivated theme’s lazy loading feature

    3. Slowed down the slider for you to see where that blank redundant SVG image file messes up the lazy loaded images.

    From from the video. I have compared the the page with the slide when lazy loading is off and when lazy loading is active.

    Image sliders work by duplicating two images. One that’s used in the slide animation and the one that’s displayed once the slide animation ends.

    Let’s say I have images 1, 2, and 3 for the slide. In this case, we can rename them for better understanding.

    Images for the animation slide animation will be have an extra character (A) and the ones to be displayed with have the extra character (B)

    So, in the image slider the images will be queued in the format,

    1A-1B, 2A-2B, 3A-3B

    But when lazy load is activated, W3TC replaces one of the animation slides with a blank slide on the last slide. Let’s name the bank slide (S)

    So you have,

    1A-1B, 2A-2B, 3S-3B

    So, that’s where the blank is coming from that you can see in the slowed down slide. You can go check it once more. I’ll keep it slow. Remember to hard reload the pages.

    As for the table, I think you may have loaded the page when I have deactivated lazy load. Try empty cache and hard reload the page now and you’ll see what I have mentioned. It’s also replaced with the blank SVG file.

    I have tried to change the Lazy Load settings but nothing works. Even when I deactivate HTML minify the issue is still there.

    Here’s the video

    Thread Starter deewinc

    (@deewinc)

    Please let know after you’ve double checked so that I can restore to a previous version of the website.

    Thread Starter deewinc

    (@deewinc)

    UPDATE:

    When I use Autoptimzie Lazy Load, it works perfect and it’s not loading the transparent blank slides. The problem is the Autoptimzie Lazy Load JS takes 500ms plus to load while W3TC lazy load JS takes less than 30ms to load. I wish this issue can be resolved.

    Another thing is Autoptimize, despite lazy loading the slides, it downloads the images even before the user reaches the slider section. But with W3TC it strictly waits for the user to reach the slider before loading the images.

    You have the video for reference. You can use W3TC alongside any slider plugin. In my case, I used Metaslider. As for the table images, I used Ninja Tables PRO.

    You can test them and hopefully fix the issue.

    • This reply was modified 1 year, 5 months ago by deewinc.
    Thread Starter deewinc

    (@deewinc)

    Hello,

    Another update: Just did another search and realized the following.

    From this thread https://wordpress.org/support/topic/lazy-load-question-answer/

    you have answered question number 3 by claiming that W3TC Lazy Load adds an SVG placeholder.

    That’s what I have been insisting from the start as the cause of the problem.

    How can we get rid of that redundant placeholder in both slides and the table.

    Heck, how can I totally remove it everywhere and prevent W3TC from calling that placeholder.

    ON SLIDES
    data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E

    ON THE TABLES
    data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E

    • This reply was modified 1 year, 5 months ago by deewinc.
    • This reply was modified 1 year, 5 months ago by deewinc.
    • This reply was modified 1 year, 5 months ago by deewinc.
    • This reply was modified 1 year, 5 months ago by deewinc.
    • This reply was modified 1 year, 5 months ago by deewinc.
    • This reply was modified 1 year, 5 months ago by deewinc.
    Thread Starter deewinc

    (@deewinc)

    Another update: CORRECTION

    Upon much much closer inspection, Autoptimize seem to load a similar SVG placeholder. But once you scroll through the slides, it automatically removes the placeholder from the code and swaps it with the right image slide.

    You can open the page and inspect. Autoptimize Lazy Load is active right now. And you can test it out and see that the SVG placeholder is replaced automatically by Autoptimzie.

    Autoptimize behaves the same when it comes to the table. It loads the SVG placeholder first then swaps it with the right image for that slot.

    That means, W3TC fails to replace the placeholder with the right image as required. Kindly investigate and fix this bug.

    • This reply was modified 1 year, 5 months ago by deewinc.
    • This reply was modified 1 year, 5 months ago by deewinc.
    Thread Starter deewinc

    (@deewinc)

    Hello,

    Any update?

    Regards

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @deewinc

    Thank you for all the information and your patience.
    We need to try and replicate the issue since it’s mostly environment-related, meaning, depends on the plugin and theme you are using and how the images are embedded.
    So in your case, I can confirm that the issues are occurring.
    I’ll get back to you as soon as we investigate this more and I can offer you a solution for this.
    Thanks!

    Thread Starter deewinc

    (@deewinc)

    Hello,

    Thanks so much for acknowledging the issue. Hope it get’s fixed.

    W3TC is such a powerful tool.

    Regards

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @deewinc

    Thank you for your patience. I’ve had a chat with the team and this is added to the Github Issue. Please make sure to track the progress of the issue and feel free to comment or add any suggestions.
    In the meantime, make sure to use some other solution to Lazyload images.
    THanks!

    Thread Starter deewinc

    (@deewinc)

    Hello @vmarko

    Thank you so much for the dedication. Sadly, other than this glitch, no other lazy load tool comes close to yours.

    I will hang on to W3TC until the issue is resolved.

    Thank you so much.

    Plugin Contributor Marko Vasiljevic

    (@vmarko)

    Hello @deewinc

    Thank you for yoru patience.
    We’ve added the lazy load threshold setting in the latest 2.1.7 release so please make sure to update the W3TC to the latest version.
    You can find the Threshold option in Performance>User Experience.
    Thanks!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘W3TC creating a blank image slide in image slider lazy loading’ is closed to new replies.