Support » Plugin: SG Optimizer » Lazyload causes a layout shift

  • Resolved outcats85

    (@outcats85)


    Using Genesis + Essence Pro + Atomic Blocks.

    When the lazyloading of images is active it causes a layout shift on some of the images. You can check out the homepage.
    Doesn’t happen with some other lazyloading plugins.

    Thanks

    • This topic was modified 4 months ago by outcats85.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Stoyan Georgiev

    (@stoyangeorgiev)

    Hello there,

    I had a look at your website. I noticed that the lazyload for the images is active, but could not see any layout shift. Can you give us a screenshot of what you are getting so we can try to replicate it, so we can provide with you a solution if there is still an issue?

    Regards

    outcats85

    (@outcats85)

    You can see it from here:
    https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.fabionodariphoto.com%2F

    and also here:
    https://ibb.co/sFFyGr4

    The text it much lower than it’s supposed to be.

    Plugin Author Stanimir Stoyanov

    (@sstoqnov)

    SiteGround Representative

    Hey @outcats85

    I don’t see any difference with Lazyload enabled/disabled.

    The provided screenshot was captured when the page still loads.

    Regards,
    Stanimir

    outcats85

    (@outcats85)

    Yes and as I wrote the text shifts upwards once the image is loaded.

    outcats85

    (@outcats85)

    Why did you mark it as resolved, when it is not?

    outcats85

    (@outcats85)

    Try it with the Google console and a throttled 3g connection.

    Plugin Author Hristo Pandjarov

    (@hristo-sg)

    SiteGround Representative

    It is marked as solved because it is not an issue in first place. You have a text above the image. At first the image is not loaded, then when scroll event occurs it is rendered causing the text to move. I would recommend contacting a front end speciallist to help you improve your CSS because this is how Lazy Loading is supposed to work and on your site it is working just fine.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.