[Resolved] Problem with cumulative layout shift – CLS issue: more than 0.1 (desktop)

[Emily]

I’m seeing a bunch of pages on my website be reported by google as having a problem with CLS and I can’t understand why. I wonder if you can help me resolve this please?

The problems seem to be around the header and the sidebar, I am wondering if I have some thing set up incorrectly….

Thanks in advance!

[David]

Hi there,

Your lazy loader plugin is loading a square placeholder image, and that leads to a huge square space being reserved for your logo. Once the lazy loader gets out of the way and the correct image loads, that space collapses to the correct size, resulting in big layout shift.

which lazy loader plugin are you using ?

The plugin author should address that.

Also even with a good lazy loader, we recommend excluding the logo from lazy loading as its always above the fold. Most good lazy loaders provide a settings field where you can add a CSS Class of images you wish to exclude. for the GP logo you can use: is-logo-image

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Emily]

Thanks for the response – I was surprised by your answer because I thought the lazy loading functionality was being provided by the plug in provided by my host, but it turns out that was switched off and it was being done by a different, image processing plugin. Can’t believe I missed that! That’s now off – and bizarrely with no lazy loading at all I’m getting really good scores……
thanks for your help.

[David]

Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts