Lazy Load Above The Fold Images Just For Mobile Devices

  • Resolved Andrew1977

    (@andrew1977)


    1 year, 1 month ago

    Good Afternoon,

    Currently have this plugin set up and running smoothly with the lazy loading option within this plugin.

    Currently we have lazy loading enabled for the below the fold images, which works perfectly on desktop devices.

    The only thing is, on mobile devices, two of the images which are above the fold for desktop devices (and currently not lazy loading), are actually below the fold images on mobile devices.

    Would anyone know a way, or prehaps a filter that we can add to functions.php, where we can actually enable lazy loading for these two images, but only target mobile devices only?

    Kind Regards,

    Andy

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    Hey Andy;
    Autoptimize actually does not have logic to only lazyload below the fold images; you can set “lazyload from nth image”, but there is no way to make a distinction between desktop & mobile (as that would require different HTML for desktop & mobile, which opens up a whole other can of worms).

    That being said; even if an image is lazyloaded, if it is above the fold it will be loaded as fast as possible (by the lazysizes JS library), so you could tinker with “lazyload from nth image” to explicitly exclude for mobile and then the desktop above-the-fold images that are not excluded will load only a tiny bit later?

    hope this helps,
    frank

    Thread Starter Andrew1977

    (@andrew1977)

    Hey Frank,

    Thanks for such a super quick reply.

    Should have mentioned, currently have “lazy load from nth image” set up.

    Took a bit of trial and error, but this works great on desktop devices, it was just the two images stuck with on mobile devices, which would be great to have lazy loaded.

    No worries, I thought there might be some kind of filter that could be used in functions.php. where we could specify these two images to lazy load on mobile devices.

    Kind Regards,

    Andy

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    No worries, I thought there might be some kind of filter that could be used in functions.php. where we could specify these two images to lazy load on mobile devices.

    there is a filter if I’m not mistaking but that would only work if you’re running without a page cache OR if you have a page cache which can create and serve separate HTML for desktop vs mobile?

    Thread Starter Andrew1977

    (@andrew1977)

    Many thanks for your reply.

    We are running with a page cache, but it doesn’t serve separate HTML for desktop and mobile.

    If you know the filter, and could let us know, that would be good, as we can then look at possibly changing our cache setup.

    Kind Regards,

    Andy

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    sure, you can use the autoptimize_filter_imgopt_lazyload_from_nth for that and when hooking into that you can differentiate the value using the WordPress core wp_is_mobile() function ??

    Thread Starter Andrew1977

    (@andrew1977)

    Many thanks for that.

    And thanks again for all your help!

    I’ll mark this as resolved.

    Kind Regards,

    Andy

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Lazy Load Above The Fold Images Just For Mobile Devices’ is closed to new replies.