[Support request] Google PSi reports “Avoid large layout shifts 5 elements found”

Home Forums Support Google PSi reports “Avoid large layout shifts 5 elements found”

  • This topic has 36 replies, 4 voices, and was last updated 4 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 37 total)
  • Author
    Posts
  • #1435507
    Deepak

    Hello,

    How can I fix the CLS issue reported by Google PSI

    View post on imgur.com

    I am using Flyingpress cache plugin. I have tried with and without this plugin but CLS always reports these 5 elements
    While on my production site there is no such issue

    Can you please help here.

    Regards
    Deepak

    #1435869
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I just scanned the page you linked to and I’m seeing a 0 CLS. Did you resolve this?

    #1436217
    Deepak

    Hello Tom,

    No it is not yet fixed.
    I did some changes but I don’t have 100% success. If you execute PSI multiple times them we see this shift in some of the execution

    In all such execution this class is the culprit but how do I fix it

    View post on imgur.com

    Regards
    Deepak

    #1436481
    David
    Staff
    Customer Support

    Hi there,

    any particular post you seeing this?
    I ran a pagespeed insights test and the results also show 0 CLS:

    #1436492
    Deepak

    Thanks David for looking into this

    For mobile the CLS shows 0, I assume because the sidebar is not involved there.
    For desktop I see the problem mostly

    You can check this link
    https://testing.golinuxcloud.com/grep-recursive/

    Regards
    Deepak

    #1436535
    David
    Staff
    Customer Support

    On your Site URL provided in the original topic i see 0 CLS for both Desktop and Mobile.
    And i also see 0 on the new link you provided.

    I tested again on local dev tools > lighthouse and again the result was 0 and Avoid large layout shifts No elements found

    #1436571
    Deepak

    Apologies for this but it keeps coming for me

    View post on imgur.com

    Can you run multiple trials on the same link. Even if this is not visible in your trial, can you please help on how we can control the shift for this
    <div id="primary" class="content-area">

    I tested on
    https://testing.golinuxcloud.com/grep-multiple-strings/

    #1436608
    David
    Staff
    Customer Support

    I just ran the test 10x on that latest URL and not once did it report a CLS issue on either mobile or desktop.

    I would begin by disabling the Flying CSS you’re using in case this is messing with the CSS order, and as you have custom CSS that is controlling its layouts is the most likely reason this ‘random’ warning occurs.

    #1436806
    Deepak

    Thank you for the swift response and validating

    I was also testing different combinations in the backend and I think I have found a stable configuration which seems to be working.

    The issue was also there “without” FlyingPress, I also tested by completely removing my custom CSS but that also didn’t helped.

    Now instead of using External File for Dynamic CSS, I am using “Inline Embedding” which seems to have done the trick (not sure how?)

    With this change I also did multiple rounds of testing and I can see CLS as 0 now.

    I have also disabled critical CSS of FlyingPress (somehow this setting worked with my theme on production site but here it looks like is not required).

    But I would like to understand how both the options for dynamic CSS impact the CLS? Do you have any idea?

    Regards
    Deepak

    #1437273
    Tom
    Lead Developer
    Lead Developer

    It’s possible that something was moving the CSS files to the footer (critical CSS). That would make elements display without CSS styling until those files are reached and loaded.

    #1440171
    Deepak

    Hello,

    I did some more testing and definitely there is some issue with the theme which needs optimization.

    I used the lighthouse from the developer tools to get more detailed stats on the layout shift
    You can check this video for more details, this is collected for mobile but same is also seen for desktop as well

    View post on imgur.com

    I hope someone can consider this and check this further.

    Regards
    Deepak

    #1440173
    Deepak

    Just to add, I am only using minify CSS (no critical CSS, no combine CSS) from WP Rocket

    verified the issue exists with default theme layout (without custom CSS or any caching plugin) when the theme is used with sidebar/content/sidebar layout.

    The issue is not seen if I use content/sidebar.

    Regards
    Deepak

    #1440326
    Longinos

    Hi
    I´m facing some issues related to this. In my case, when secondary menu, abobe the header, is centered.
    To see the issue in the url provided here, you must go to Dev Tools -> Performance and set network to Fast3G and cpu to 4xslowdown.
    Make a record and then you can see that the web page is showed w/o issue, until the logo and the 2 side-bars disappears and then appears again.
    Css files are loaded in top. Seems that some elemens make a reflow and some no, so the elements that don´t reflow are moved.

    View post on imgur.com

    #1440331
    Deepak

    Yes, in my case also I see layout shifts with secondary menu in Google PSI but that is more sporadic

    For me the content layout shift is seen quite often for the primary body container.

    We can actually see the shift happening on the browser, here is a video from my page (just doing refresh)

    View post on imgur.com

    #1440371
    Longinos

    In this image,you can view the reflow. Css code is inlined at top of the page so not FOUC here.
    Ah! forgott to mention, the theme is 3.0.0 Alpha 4, but in 2.4.2 the issue is here too.
    In this case Dev Tools don´t report CLS issues, but the LCP is about 2000ms because is when it appears for second time.
    So the issue maybe is why these reflow that cause CLS and large LCP delays?

    View post on imgur.com

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