[Resolved] Site Logo and CLS Issues

[Aaron]

I Have a CLS issue on my site according to Google Page Speed Insights.

It seems the header is not setting aside the correct height for the logo – causing a CLS issue.

See this image: https://imgur.com/a/NLdZw4s

It also looks like something odd is going on with the menu icon loading? See here: https://imgur.com/a/8Tipgtt

I found this post: https://generatepress.com/forums/topic/logo-in-header-seems-to-be-causing-bad-cls-performance-in-pagespeed-insights/

And tried the same thing – I think I have now disabled lazy loading for that image – but I am still having the problem.

I feel like I am doing something silly that is causing this – can you provide any suggestions?

Thank you!

[David]

Hi there,

issue is most probably related to the Critical CSS you’re loading.

If you open the site in Chrome, and open Developers tools ( Right Click > Inspect ) select the Network tab – switch from Online to Slow 3g and reload the site.

You will see several elements whose styles change after initial load – most significant one is the Table of Contents which loads fully open and then the later styles closes the ToC.

Try disabling Critical CSS to test that.

[Aaron]

Hi David,

I turned off critical CSS and the issue remained.

I think the main one I want to fix is the logo – the header background color loads first – and then the logo pops in and expands it. Causing a significant CLS.

What is the best way to get the top bar to load at the correct size before the image loads?

[David]

I am still seeing Critical CSS in the source:

[Aaron]

I had disabled it then re-enabled it because it made no difference.

I have now disabled it again and will leave it off for now.

The issue persists with critical CSS off.

Thanks for your help.

Aaron

[David]

Try adding this CSS to stop the header height changing :

.site-header .header-image {
    height: 135px;
}

The other issues are all in the content. The post provided is still mainly an issue with the ToC loading open and then restyling.

I also checked one of your other pages that was built with Elementor and i am seeing Flash of unstyled content – again the styles are being loaded after the content is loaded.

Both of these look to be optimization related.

[Aaron]

Hi David,

Ok, I solved the table of contents issue by not telling it to collapse initially – so it stays open now.
Which seems to have fixed some of the CLS issue, but I still believe the logo is causing a problem.

Even after adding the CSS you mentioned the header is loading smaller than the image to start with, then it pops larger.

Im going to get someone on codeable to look at my other issues, but I’d like to solve this one quickly if I can.

Thanks!

[David]

Try this CSS instead:

.site-header {
    min-height: 135px;
}

[Aaron]

That did it! It brought the CLS from over 0.12 to 0.005

Thank you!

[David]

Awesome 🙂 Glad to be of help

[Adrien]

Hey guys,

I’ve tried implementing all the tips above :

– exclude logo image from Lazy Load (with perfmatters)
– Add the CSS code (site-header min-height …)

And even when doing this I still get some CLS issues. You can watch it here : https://gtmetrix.com/reports/www.ispeakspokespoken.com/DOSXiWcg/video

Pagespeed insights are still asking me to add a width and heigth attribute to the logo image. How can I do it?

Here’s the URL of the website: https://www.ispeakspokespoken.com

Thanks a lot for your time.

[David]

Hi there,

in your case you shouldn’t need the CSS for the site-header height:

https://generatepress.com/forums/topic/site-logo-and-cls-issues/#post-1445308

Try removing that first

[Adrien]

Thanks for the quick answer.

Actually, I did a test after excluding the image from lazy load -> no change.
Then, I did a test after adding CSS -> no change.

I’m going to remove the CSS now, but the issue will still be there.

What should I do?

[David]

So the issue you have is, WP is unable to gather the width and height attributes of your SVG logo. To get round that you can use the PHP Snippet found here to add the missing attributes:

https://docs.generatepress.com/article/generate_logo_output/#setting-a-width-and-height

In this line of the code:

<img width="999" height="999" class="header-image" src="%3$s" alt="%2$s" title="%2$s" />

You need to set these: width="999" height="999"

[Adrien]

Cool!

That worked, thanks a lot 🙂

[Author]

Posts