[Resolved] Cumulative Layout Shift Issues CLS

Home Forums Support [Resolved] Cumulative Layout Shift Issues CLS

Home Forums Support Cumulative Layout Shift Issues CLS

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1646169
    Kevin Wabiszewski

    Hi,

    I have a few websites that all use generate press. In google page speed I typically get 100 for mobile and desktop. However, the Cumulative Layout Shift (CLS) still does not pass google for core vitals. On some pages it is orange on others it is red. This is for desktop and recently the test data is bad on mobile as well.

    I have been trying for two days to fix this. I have read all the previous support forums about CLS issues. When I load the page slowly in development mode the logo appears to load late. I lazy load the images with a3 lazy load and tried to exclude the logo class but that did not work. Removing the breadcrumbs also did not help. It just switched the error to the H1 title and avatar rather than the breadcrumbs.

    My goal is to get the CLS to zero.

    Here are the avoid large layout shift message in google page speed.

    Mobile
    “Breadcrumbs”
    div class=”content-area grid-parent mobile-grid-100 grid-100 tablet-grid-100″
    CLS time 0.135
    Menu <button class=”menu-toggle” aria-controls=”mobile-menu” aria-expanded=”false”>
    CLS time 0.006
    Open Search Bar a href=”#”
    CLS time 0.003

    Desktop
    “Breadcrumbs”
    div class=”content-area grid-parent mobile-grid-100 grid-100 tablet-grid-100″
    CLS time 0.057
    and several more smaller CLS times.

    Any feedback would be greatly appreciated!

    #1646314
    Elvin
    Staff
    Customer Support

    Hi there,

    I’ve ran the site on Google PSI, Webpagetest.org and GTMetrix.
    https://share.getcloudapp.com/jkuenbN7

    The logo seems to be contributing a bit. That said you can try the solution suggested here for it.
    https://generatepress.com/forums/topic/svg-causing-cls-movement/#post-1545284

    As for the other things:

    The biggest contributor is the contents.
    <div id="primary" class="content-area grid-parent mobile-grid-100 grid-100 tablet-grid-100">

    This could be from unoptimized or lazy loading images.

    You can try the usual suggestions which are:
    Disable Lazy loading
    Disable Critical CSS on your caching plugin.
    Optimize the image so it loads faster. (smush, optimole, etc)

    A wise man once said:
    "Have you cleared your cache?"

    #1646365
    Kevin Wabiszewski

    Elvin,

    Thanks for all the ideas. I actually did not see SVG CLS movement thread.

    It looks like Switching from Floats to Flexbox fixed the CLS issues on mobile and desktop. My sites needs some minor formatting changes now but definitely seems worth it.

    Nice work to all the developers!

    Thank you!

    #1646415
    Elvin
    Staff
    Customer Support

    Nice one. Thank you for sharing it with us. No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

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