CLS shift caused by delayed logo loading?

[ajcourtney]

I would be grateful for any help you can offer. I am having an issue with CLS that I think is being caused by a delay in my logo loading. Please see the screenshots below for mid-load, prior to logo loading, and after page load. Please also see my Google PSI report for CLS.

I have tried to do everything I can to minimize CLS, but I believe this issue is now causing most of the issues. I have tried turning off lazy loading images and have also tried turning off my CDN, Cloudflare. The width of the logo is specified in X Theme settings.

I have minimized plugins as much as possible.

Of note, I still get this CLS shift on a page with text only.

I would appreciate any help or suggestions for how to fix this issue.

Many thanks

Andrew

[friech]

Hi Andrew,

Thank you for writing in, lets try adding an explicit height to the logo div (x-brand) so even if the logo/image has not loaded fully it will have height and prevent the page from moving.

.masthead-stacked .x-brand {
    height: 119px;
}

Hope it helps,
Cheers!

[ajcourtney]

Thank you so much for your help. This worked perfectly and has completely resolved the CLS issue I have been having.

Very best wishes

Andrew

[friech]

We are delighted to assist you with this.

Cheers!