Like button/gravatars disappear with LL enabled

  • Resolved cantabber

    (@cantabber)


    3 years, 1 month ago

    New user of the plugin after being very happy with my Imagify subscription, but I’m having a couple of issues with this one.

    First, when I have the iframe/video lazy-loading enabled, my Like buttons (with the blue star) and the gravatars of people who have liked the post don’t load. The Share buttons display as normal, but not the Like area beneath it, it just says “Loading…” indefinitely. As soon as I uncheck the box and F5, back they come. I’m not a serious coder but if there’s something you can suggest to get this to work, I’ll do my best to make any changes needed to fix the problem. Those aren’t my own uploaded images, so I don’t know how to exclude them from the lazy-loading process (assuming it can be done).

    Second, it’s really disappointing about the two clicks needed for placeheld videos on mobile. I understand it’s an autoplay issue but I can’t check the replace-with-thumbnail box even though I’d like to, because I have a lot of mobile users and two clicks makes it feel like something is broken. So I lose that performance improvement.

    So at the moment the only box I have checked in the settings is Images, which is less than I was hoping to get out of this. I hope I don’t have to choose between the Like buttons and lazy-loading videos at all. I don’t use a ton of embeds, but they’re my biggest speed hit and I am trying to improve this.

    Thanks for your time and work.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author WP Media

    (@wp_media)

    3 years ago

    Hi @cantabber

    I am sorry about the issues.

    > I have the iframe/video lazy-loading enabled, my Like buttons (with the blue star) and the gravatars of people who have liked the post don’t load.

    The workaround will be to exclude the mentioned images/iframes from lazy-loading. Please find the instructions here: https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images#previous

    If you have an example URL with the issue and can share it, I will be happy to check this directly and see if there is anything else that can be done.

    > it’s really disappointing about the two clicks needed for placeheld videos on mobile

    I understand your frustration.
    This is known and expected behavior. On the desktop, the first click is loading the video and the autoplay is doing its job. Autoplay can not be done on iOS and on Android. So, the first click we are loading the video, the second click is launching it.

    Unless iOS and Android change this, there is not much that can be done on our end, unfortunately.
    There is a reason behind it. They don’t want mobiles using data unnecessarily.

    Thread Starter cantabber

    (@cantabber)

    3 years ago

    Hi again. Re the placeholders/autoplay, I get why it matters for mobile data usage, it just messes up the way people are accustomed to interacting with videos. I’d have to add a caption saying “if you’re on mobile, click twice to run the video” and that is a big UI and UX negative for me. I’ll have to think more about this.

    As for the Like buttons, I have them disabled at the moment so there’s nothing to see, but I looked at the information in the link you provided on Disabling LazyLoad by image source. I think that would be what I wanted– in my case the Like buttons come from widgets.wp.com and the gravatars come from gravatar.com.

    I downloaded the file wp-rocket-lazyload-disable-src.php and if I have this correct (again, I am only a pretend coder!), I would want to edit in these lines:

    	$excluded_src[] = 'widgets.wp.com';    // <img src="widgets.wp.com">
	$excluded_src[] = 'gravatar.com';    // <img src="gravatar.com">

    But if this is correct, do I upload that entire file (with the edits) to the rocket-lazy-load plugin folder, which already contains main.php and rocket-lazy-load.php, or do I have to put the contents of the edited file *into* one of the existing php files, or in some other location? I am not clear about where to put the edited code to make it work. If you could let me know if this is the right approach, and where to put the code, I might be able to turn my Likes back on again. 🤞

    Thanks so much for your help. I’ve been very pleased with the support I get with Imagify, and it’s nice to see that you follow up here as well.

    • This reply was modified 3 years ago by cantabber.
    Plugin Author WP Media

    (@wp_media)

    3 years ago

    Hi @cantabber

    To exclude the images from LazyLoading for the domains that you specified this code snippet will work: http://snippi.com/s/tedlf8n

    Place this code to the functions.php of your child theme. Here are instructions on how to do this: https://docs.wp-rocket.me/article/1332-add-code-snippets

    If the issue is coming from the specific iframes, then you would similarly modify a code shared here: exclude iframes by the domains.

    I hope one of the solutions will work for you. Otherwise, let us know 🙂

    Best regards,
    Natalia

    Thread Starter cantabber

    (@cantabber)

    3 years ago

    Hi Natalia,

    I added the snippet to my child theme’s functions.php file (I included one additional source on a third line, pbs.twimg.com), no problem there, thank you for letting me know where it needed to go. It seemed to help for the like buttons but I noticed that there was also an issue affecting the graphic elements in the sidebar widget displaying my Twitter feed, thus the third line added. Any lazy loading at all makes the widget graphics not display until a second page-load, even after also adding the iframe_exclude_pattern filter to functions.php along with the exclude_src filter.

    I presume this is an issue with the widget plugin so I may write to them and see what’s up there, but I’m going to have to take a harder look at the pros and cons of lazy loading in general. It just does things to my UX that I don’t prefer.

    I still may also look at WP Rocket, so that’s another option to consider. Thank you folks for all your help on this – I always learn something even if I don’t manage to do what I was trying to do.

    Plugin Author WP Media

    (@wp_media)

    3 years ago

    Hi @cantabber

    I am glad to hear the code snipped worked.

    > Any lazy loading at all makes the widget graphics not display until a second page-load, even after also adding the iframe_exclude_pattern filter to functions.php along with the exclude_src filter.

    If you provide me with an example URL and a screenshot with the issue I can take a look and check for the possible exclusions.
    Although I may not be 100% about the root cause of the issue without seeing the issue directly.

    Feel free to write back if you need further help.
    Natalia

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Like button/gravatars disappear with LL enabled’ is closed to new replies.