Change images when loading page(s) on mobile

  • Hello,

    first thank you for this great, great theme.

    I want to improve my LCP and thus I came up with this idea to have specific images for the mobile view. Those images would be smaller and faster to load.
    Is this possible with additional CSS?

    I’m for months now on 2,8 seconds LCP. Maybe I can reach with this trick 2,5..

    Thank you very much.
    Michael

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

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi,

    No, CSS doesn’t help here as the desktop images (which I assume you thought of hiding on mobile) will still be loaded.

    As far as I can see, your images use srcset so browsers already know to load smaller versions on smaller screens.

    For what it’s worth, all your pages load instantly for me.

    Thread Starter Michael Adamidis

    (@azzurres)

    Clear answer, that was helpful thank you.

    Yes, the website is fast, but this google speed test depends on the connections of the customers, so we pay the price for that. LCP is 2,8 and it has to be 2,5. So all pages failed cause of 0,3 sec that’s insane..

    What I will try tomorror is to test the plugin Block Visibility to make blocks “visible/not visible” according to desktop/mobile users. It could do the work!

    Thread Starter Michael Adamidis

    (@azzurres)

    Hi Vladff,

    just to understand it correctly.

    Does srcset mean that the image is loaded (the original, like the desktop one) and then made smaller, or does it mean, that the image is already croped, saved in different versions on the server and served in the correct dimensions?

    Thanks!
    Michael

    Hi,

    Sorry for the delay, I wasn’t subscribed to this topic.

    Basically, the browser downloads the image that its intended for that resolution. More info on Mozzilla.

    Thread Starter Michael Adamidis

    (@azzurres)

    Hi,

    that is very goog to know, thank you!
    I’ve tried now, to have specific images for desktop/mobile which I switch with the help of the Visibility plugin.
    The LCP has gone to green for the first time ever. It has jumped from 2,8 to 2,4 in the Web Vitals.
    The bonus is that I can even have specific images for mobile users. The plugin claims to be light weight. So, I can be happy with that result.
    Michael

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change images when loading page(s) on mobile’ is closed to new replies.

Tags