Lazy Loading causes CLS

  • Resolved topfgartenwelt

    (@topfgartenwelt)


    3 years, 8 months ago

    Hi, I have figured out that the lazy loading of images causes a slight CLS. The developer of the lazy load plugin told me that the height and width added to the pictures doesn’t match with the height and width used in the theme. How can I resolve this problem?

    Greetings Kathrin

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

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

  • Hi there,

    the width and height attributes output in the image HTML is defined by the image properties not the theme. Those are not changed by the Theme and nor should they be.

    Browsers use the width and height values to calculate the aspect ratio of the image, the browser uses the aspect ratio to calculate the space required for the image taking into account the size of the container they are sitting in. Lazy Loader plugins should be using the exact same method to calculate their placeholder sizes.

    What plugin are you using ?

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    Hi, I’m using Flying Images at the moment. I didn’t change something concerning the height and width of the images.

    Greetings Kathrin

    You will need to speak to plugin developer again as i have checked your site and the width and height attributes in the HTML are correct.

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    Thank you very much. The plugin developer said that I should use native lazy loading instead of java script only or both together. It seems to work for the pictures in main-content, but not for the image in the sidebar which is embed into a html-widget ??

    Greetings Kathrin

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    Just to follow up: Most of the CLS is gone now and the Website pass the Web Core Vitals on Desktop again.

    Greetings Kathrin

    Glad to hear that!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Lazy Loading causes CLS’ is closed to new replies.