[Resolved] Site showing CLS on navigation

Home Forums Support [Resolved] Site showing CLS on navigation

Home Forums Support Site showing CLS on navigation

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #2233081
    Nicole

    Hi,
    My site is showing a cumulative layout shift on a desktop from the navigation.
    What can I do to solve this?

    #2233172
    David
    Staff
    Customer Support

    Hi there,

    there could be a few things at play here.
    But to begin – the Logo image has no width and height attributes so the browser cannot reserve space for it which causes CLS.

    Not sure if this is due to the Pinterest code attached to it.
    Try excluding the logo from pinterest, the plugins generally have an option to exclude images with a specific class and you can use: is-logo-image

    #2233271
    Nicole

    Thanks. I disabled the pin button plugin totally but it doesn’t seem to have solved the problem.

    Any other suggestions?

    #2233315
    David
    Staff
    Customer Support

    Can you clear any caches, including WP Rockets – as Google Pagespeed is still loading the image without the attributes, whereas i see them in the browser.

    #2233317
    Nicole

    That happened to me too. I think I have cleared the cache about 20 times already from WP rockets and on host.
    I’ll disable WP-rocket until we sort this out.

    Thanks again.

    #2233402
    David
    Staff
    Customer Support

    Ok if i test your site now, the CLS plummets to an acceptable 0.03 and the logo is no longer being flagged for missing width and height attributes….

    What did you change lol ๐Ÿ™‚

    #2235009
    Nicole

    Thanks, but it looks like the problem just moved to mobile ๐Ÿ™‚
    Initially, the desktop had a CLS problem and the mobile was ok.
    I removed the Pinterest plugin that you mentioned was causing issues but then the desktop has no CLS and the mobile suddenly has a shift.
    What went wrong?

    #2235082
    David
    Staff
    Customer Support

    If i test the site with WP Rocket disabled by adding the ?nowprocket query string to the URL, then CLS is almost 0 on mobile. So there is something in the WP Rocket settings thats causing the issue.

    Aside from deselecting some of its options, most likely CSS optimization, to find out the culprit you may want to check with WP Rocket support so see if they can spot the issue.

    #2235169
    Nicole

    Ok, thanks so much for your help!

    #2235205
    Nicole

    I am just adding a note here in case anyone has the same problem.

    Once I disabled “optimize CSS delivery” there was no CLS shift anymore.

    Thanks for pointing me in the right direction.

    #2235385
    David
    Staff
    Customer Support

    Glad to hear you found the issue – and thanks for sharing it here!

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