Put height and width for logo

  • My mobile score on PageSpeed Insights is ok. But on desktop there is a 0.26 CLS (cumulative layout shift).
    A recommendation was to put a height and width for the logo (header image).
    I have no idea how to do that in Generatepress. Any thoughts?

    p.s. I don′t lazyload the header image.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Johnyboy123

    (@johnyboy123)

    I did this in CSS:

    @media (max-width: 675px) {
    .header-august-2020 img {
    height: 120px;
    }
    }

    Is that a good solution?

    Hi there,

    if you look at the Mobile Friendly report it lists the Elements that are contributing to the biggest layout shift. None of them are the logo but you content within the page.

    You will need to identify what is changing their style after load. That could be lazyload on images or a late font style change.

    Thread Starter Johnyboy123

    (@johnyboy123)

    Hello David,

    Thanks for your answer. I think it′s the late (font) style change. I disabled lazyload in WP rocket with no change.

    Any idea what causes the late (font) style change?

    Have you tried just using the System Stack font ?

    Thread Starter Johnyboy123

    (@johnyboy123)

    I also did try the System Stacking font, without result.

    The strange thing is, I made a staging site, and the shifting problem isn′t happening there at all. So, I contacted my webhost for help.

    Thanks so far anyway ??

    • This reply was modified 4 years, 6 months ago by Johnyboy123.

    Might be worth disabling any WP Rocket and any other optimization plugins to see if one of there settings that is conflicting.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Put height and width for logo’ is closed to new replies.