Lazy Load not working on mobile, only desktop

  • Resolved wcaba

    (@wcaba)


    1 year, 9 months ago

    I’m trying to lazy load images. I do so successfully on desktop devices or responsive mode using Chrome DevTools within the dimensions panel:

    (Please “right click + Open image in a New Tab” on the image to expand its size and view/read the highlights).

    Desktop (Responsive mode): 38 image requests.

    But as soon as I switch to iPhone 12 Pro or anything mobile, images do not lazy load:

    Mobile (iPhone 12 Pro mode): 58 requests.

    As you can observe in the attached screenshots, mobile is loading more images than desktop.

    Google Page Speed Insights audits “Serve images in next-gen formats” shows up for Mobile and Desktop and “Defer offscreen images” shows up for mobile only as you would see if you run a test: https://pksdsta.wpengine.com/. The features “Lazy Load Images” and “Image WebP Replacement” are both set to “ON” so I don’t understand why it is complaining about it, even less why these are not lazy loaded on mobile as I can see in the Network panel of DevTools.

    It’s important to note that these are <img> tags, not background images.

    Your help will be much appreciated.

    • This topic was modified 1 year, 9 months ago by wcaba.
    • This topic was modified 1 year, 9 months ago by wcaba.
    • This topic was modified 1 year, 9 months ago by wcaba.
    • This topic was modified 1 year, 9 months ago by wcaba.
    • This topic was modified 1 year, 9 months ago by wcaba.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support qtwrk

    (@qtwrk)

    you have another cache layer, first of all please disable that

    secondly , it seems the mobile page is not cached , if page is not cached , it won’t be optimized

    please use debug log to check why no cache

    Thread Starter wcaba

    (@wcaba)

    So I went ahead and removed the additional cache layer via WP Engine support (the only way to do it with them) and that didn’t work. I was still downloading all the images.

    Later, I went into Litespeed Cache > Cache > Force Cache URIs and I added the homepage / then all of the sudden I was lazy loading images. All audits, including the ones related to deferring offscreen images and converting images to next-gen formats, were cleared in Google PSI so I’m getting a score of ~96 on mobile devices.

    Now that it looks all fixed on Google PageSpeed Insights’ end, which tbh is what a client or competitor might use to monitor site performance, Lighthouse from Chrome DevTools tells a different story with a score of 67 and the following audits popping up:

    • Reduce unused JavaScript
    • Serve images in next-gen formats
    • Reduce unused CSS
    • Efficiently encode image
    • Eliminate render-blocking resources
    • Enable text compression
    • Preconnect to required origins

    Again, I am pleased with the results on Google PSI but since it uses Lighthouse API anyway, I want to understand why it is differing from DevTools’ Lighthouse and if this could be a cause for concerns/further tunning.

    Plugin Support qtwrk

    (@qtwrk)

    please provide the report number , you can get it in toolbox -> report -> click “send to LiteSpeed”

    Thread Starter wcaba

    (@wcaba)

    Sure, here it is: DDKDGGMX

    Plugin Support qtwrk

    (@qtwrk)

    because you have enabled guest mode , more detail please check this page

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Lazy Load not working on mobile, only desktop’ is closed to new replies.