Site logo

Archived topic

Cls issue

9 replies · Started by vaibhav on June 2, 2021

Viewing posts 1–10 of 10

Actually I'm getting cls issue and i think its because of logo may be...
So how i can solve that?

Hi there,

I don't see the logo being flagged as a cause of CLS when I've checked your site on Google PSI or GTMetrix.

But since it's not exactly reliable, I've checked the actual site and it seems to be an issue with your logo being lazyloaded.

Can you try excluding the logo from your optimization plugin's lazyloading? See if it improves things.

To add: There are other elements being marked as cause of CLS. I suggest checking them out as well. (it seems to be caused by Flash of unstyled text or FOUT).

Yes. I just thinking same it cause because lazy loading.. actually I'm using smush in that lazy loading option how can i exclude the logo only as they ask for URL of blog post or classe/IDs to exclude lazy loading..i didn't use any other plugin for lazy loading..
But i have another new plugin jetpack boost from jetpack but before this plugin installated also i have issue. So this plugin don't have any part in cls cause.

These are third-party plugins so we're not as familiar with their functionalities, unfortunately.

I'm not exactly sure how the plugins mentioned exclude lazyloading for specific images (if they have any) but normally, they do it by checking the classes.

But to be sure, I suggest contacting the plugin's support or read through the documentation for confirmation.

I did that but there is no effect...now i dont know what actually causing cls issue

Now see i have exluded logo..

Hi there,

the logo is still being lazyloaded, if the plugin you're using can exclude images by CSS Class - then you can use: is-logo-image

You may want to check with the plugin author as well, as the logo image has width and height attributes so its placeholder should be responsive - which it is not and the root cause of the CLS.

I had seen results after disabling lazy load and excluded logo class... But there is no effect on cls so again renabled plugin that is why you saw lazy load...
Above your given code i used now but it doesn't change anything in cls...

To cover - the logo has the correct width and height attributes - so the the Logo on its own WILL NOT cause CLS.
Whatever lazyloader/optimization plugins you have enabled are causing the CLS.

Whenever you make changes to your optimizations you need to clear any plugin/server/browser caches so you can see if that has fixed the issue.

This archived topic is closed to new replies.