[Resolved] CLS issue with menu, logo, avatar and post-image

Home Forums Support [Resolved] CLS issue with menu, logo, avatar and post-image

Home Forums Support CLS issue with menu, logo, avatar and post-image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1660594
    David

    Hello,

    i am receiving warnings from google webmaster, that my posts are producing high CLS values.

    They name the featured-post-image as a cause, so i
    – started an chrome inkognito window,
    – used the sizes for an iPhone 5 and
    – reduced the bandwidth to 10k
    so get the layout shift visually presented.

    I recorded this for you and me:
    https://sinnstiften.biz/2021-02-16-CLS

    in the video i can see 3 changes:
    1. first the menu has 2 line, then both are combined into one
    2. there seems to be an avatar-image in the upper left corner, which will be moved after a while
    3. after all of these the post-image makes a shift up. (i think, this is what google measured)

    How can this effect be reduced or eliminated?
    You can run your own tests on https://sinnstiften.biz/flipchart-gestalten/

    Thank you,
    David

    #1661500
    David
    Staff
    Customer Support

    Hi there,

    This looks like a prime case of Critical CSS and deferred Javascript files being the problem.
    Can you check the site without the cache/optimization plugins enabled?

    #1661545
    David

    Hi David,

    i have temporary deactivated WP Rocket (inluding the cloudflare CDN).
    The general performance metrics of course look bad now, but the CLS is 0.

    And i cant see a layout shift above the fold as i slowed down the network and watched.

    Whats next?

    #1661877
    David
    Staff
    Customer Support

    So Critical CSS generation is not something that should be left to the automatic options of WP Rocket. They provide a troubleshooting guide here:

    https://docs.wp-rocket.me/article/1321-critical-css-issues-fouc

    Likewise they provide info here on deferring JS files.

    #1662750
    David

    Funny, by deactivating the WP Rocket feature “optimize CSS” the CLS sinks to 0. And all of the other performance values are still good.

    i will leave it this way and wait, what google webmaster will show me.
    Thank you

    #1662976
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.