CLS Issue

  • Resolved harmonikas996

    (@harmonikas996)


    3 years, 7 months ago

    Hi,

    I really enjoy using your plugin. Updates are awesome!

    Recently I discovered increased Cumulative Layout Shift (CLS). I’m using combo of your plugin and Smush. I disabled Smush and still (before/after clearing cache) I see that your plugin is causing that CLS. (after disabling your plugin and Smush no CLS is present)

    I decided to use your plugin because I saw you solved my CLS issues (it was working excellent without CLS in beta, and in a few official minor versions).

    Is there anything you could do to check to solve this issue?

    WordPress: 5.7.1
    Plugin: 2.4.0
    Issue: CLS present in header (.SVG site logo)

    Best Regards,
    Luka

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author shinsenter

    (@shinsenter)

    @harmonikas996

    CLS occurrence for an image is usually because you don’t set the height and width attributes for the image, so when it is lazy loaded, the img tag will be resized and it will cause the CLS. There is no more efficient way to prevent CLS of an image than setting the height and width attributes.

    If the CLS metric is too critical, or only happens on few elements on the page, I think you should consider disabling lazyloading for the elements that cause the CLS.

    From v2.2, I added an option for the plugin, which will help you bypass lazyloading elements on the page using the CSS selector for filtering. Please try using this option to ignore lazyloading for the SVG image causing CLS, and see if it improves your score.

    • This reply was modified 3 years, 7 months ago by shinsenter.
    Thread Starter harmonikas996

    (@harmonikas996)

    Thanks for the fast response. I added that element to the ignore list and it’s fixed. However width & height are set for that image, so this is why It’s confusing to me.

    Btw. I found one small bug… placeholder color is still present after the element is loaded when that element is ignored for the lazy load.

    Cheers!

    Thread Starter harmonikas996

    (@harmonikas996)

    I just discovered that the whole CLS issue is present ONLY when I have image lazy loading enabled on both your plugin and Smush.

    After disabling lazy loading within the Smush plugin CLS is gone. So, I no longer need to exclude logo from lazy loading.

    Maybe you should put that tip in the plugin’s description as a side note.

    Thanks again for making such an amazing plugin!

    Plugin Author shinsenter

    (@shinsenter)

    @harmonikas996
    Thank you for the bug reporting. It will be fixed in the next release.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CLS Issue’ is closed to new replies.

Tags