Bug found: Jetpack Lazy Loading Incompatibility

  • careerbreakadventures

    (@careerbreakadventures)


    5 years, 3 months ago

    Hello, I have recently installed Amp for WP to replace the stock AMP plugin. Very well done! I have come across a couple of small issues that are causing major headaches, which I assume could be affecting many users unknowingly.

    For reference, I use Jetpack CDN / Lazy Loading for images and static files. I also use Fastest Cache and Autoptimize for load speed improvements. The issues below have been checked with both of caching / optimization plugins cleared and deactivated, which did not stop the problems.

    1.) When I installed AMP for WP a week ago, my website suddenly stopped lazy loading images on non-AMP pages and I started getting PageSpeed warnings related to this issue. I contacted Jetpack and they could see that Lazy Loading was trying to initialize when a page was opened but was then being blocked. After deactivating each of my plugins and clearing my cache, I was able to find that the AMP for WP plug was the one blocking lazy loading from all of my pages (AMP pages lazy loaded fine, only issues with non-AMP). With the plug in turned off, everything works fine. Is there a fix that can be implemented to make these compatible? Without it, this plugin ends up making my site slower overall, despite creating faster and pretty AMP pages so I have temporarily deactivated it while I find a solution.

    2.) I also had another issue come up where my non-AMP pages are loading the css for the AMP version as well, which is causing unused css files to slow down my load times. I can verify this with PageSpeed where I have a warning about loading unused css files lagging load times by 4.6 seconds, and the files disappear when I deactivate AMP for WP and clear the cache. To be clear, I am not worried about the PageSpeed report for my AMP pages, that all seems fine and there are no unused css issues. It is only on my non-AMP pages where they are loading the AMP scripts as well. Do you have any thoughts on how I can prevent this from happening? Again, the benefits I am getting from my nice new AMP pages are being offset by the lag I am getting on my non-AMP.

    Thank you for the help and the really beautiful plugin!
    Grant

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    Thank you so much for trying our plugin.

    That’s really strange, we have not heard about this issue from other users, but don’t worry, we will help you solve this.

    Can you please activate AMP for WP plugin and share the URL, so we will check and help you solve this issue.

    Thread Starter careerbreakadventures

    (@careerbreakadventures)

    Ahmed, I have activated the AMP for WP plugin so you can see the issue. You will notice that lazy loading is not working on any of my standard pages, although it works for AMP pages. Here is a sample page, although it is the same on all of them on my site:

    https://careerbreakadventures.com/2019/04/19/cartagena-self-guided-street-art-walking-tour/

    I had waited a while until there were several updates to the plugin to see if this issue had changed, but it appears to still be an issue.
    Thank you for the help!

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    We checked your issue. Lazy loading is working on both AMP and Non-AMP site.
    Reference: https://monosnap.com/file/TzIPnAHeD0Z7hg30Cs89oEyYkvIWD2
    https://monosnap.com/file/kRY1lTGv4KWPaAAaeQwsWAjqAMBOjc
    Are you still facing this issue?

    Thread Starter careerbreakadventures

    (@careerbreakadventures)

    Hey, Ahmed, good morning. Yes, I am still having both of the issues mentioned above. Lazy loading: what I believe is happening is that lazy loading starts to initiate when the page begins to load, but then is blocked. This is why you will see the lazy loading code running.

    I have spoken with Jetpack already and they found this to be the case. After running tests, we were able to determine that AMP for WP plugin is blocking the code. Here is an excerpt from the engineer at Jetpack: “In my test, I found lazy loading was working for a moment and then it stopped. I know this happened because I checked the source code and found “lazy loaded” attribute in it initially which disappeared after reloading the site a couple of times.”

    If you load a page on the site, you will notice that all images will already be loaded as you scroll instead of loading when they enter the screen. You can see the issue flagged on Pagespeed Insights. Here is a sample page:

    https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcareerbreakadventures.com%2F2018%2F10%2F22%2Ftrekking-salkantay-to-machu-picchu-without-a-tent-or-guide%2F

    The top issues, “defer offscreen images” and “remove unused css” both either go away or significantly shrink when I turn the plugin off. The second one seems to be AMP css that is loading even when a non-AMP page is loaded. I think this because it goes away when I either turn off the plugin or switch it to the old Auttomatic AMP version.

    I hope this all makes sense. I am very appreciative of your help in figuring out how to get this fixed. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Bug found: Jetpack Lazy Loading Incompatibility’ is closed to new replies.