[Resolved] Site Logo and CLS Issues

Home Forums Support Site Logo and CLS Issues

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1440108
    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!

    #1440245
    David
    Staff
    Customer Support

    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.

    #1441919
    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?

    #1442063
    David
    Staff
    Customer Support

    I am still seeing Critical CSS in the source:

    #1443366
    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

    #1443803
    David
    Staff
    Customer Support

    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.

    #1445076
    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!

    #1445308
    David
    Staff
    Customer Support

    Try this CSS instead:

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

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

    Thank you!

    #1445454
    David
    Staff
    Customer Support

    Awesome 🙂 Glad to be of help

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.