[Resolved] Detecting CLS issues

Home Forums Support [Resolved] Detecting CLS issues

Home Forums Support Detecting CLS issues

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1520909
    Peter Paul

    Hi GP Team,

    Can you help me point out what is causing a spike in CLS issue on this page?
    Link on priv info. There are others, but this particular page seems recurring.
    I tested using PageSpeed Insights, Webpagetest.org and the Web vitals plug in.
    And I am getting a CLS or around >0.2 to ~0.6.

    Also, what method or technique to you use to detect CLS issues.
    When I first use GP, I wasn’t experiencing and CLS issues. But now, it seems something is causing these from time to time.

    Thank you!

    Peter

    #1520931
    Leo
    Staff
    Customer Support

    Hi there,

    We run it through this site:
    https://developers.google.com/speed/pagespeed/insights/

    And you can see the result:
    https://www.screencast.com/t/0NE48ax3ZHr

    I’m guessing that the logo is being lazy loaded by WP Rocket.

    Can you try excluding it?

    #1521386
    Peter Paul

    Hi Leo,

    The problem is not with the mobile version. All mobile version are green.
    The problem is with the desktop version. And yes, I have already excluded the logo from being lazy load using Snippets, as suggested by Tom before.
    I also tried deactivating Lazy Load all together in WP Rocket.
    But that didn’t seem to help as well.

    Perhaps I’m missing something here, may be with the layout or in the main content section.
    Not sure. I double checked the ads banner and I placed a minimum height via CSS to prevent movement.

    Any other ideas?

    Thanks!

    #1521558
    David
    Staff
    Customer Support

    Hi there,

    the simplest method of detecting layout shift is:

    Open the site in Chrome, right click and inspect the site. Go to the Network Tab and in the top bar check: Disable Cache and beside that Change Online to Slow 3G. With the developers tools still open refresh the site. This will give you a real view of what is shifting.

    Everything looks static until the Table of Contents element appears on the page.
    The toc element is injected using JS after the Critical Path is first rendered.

    You would need to speak to the plugin author about that issue. Or look for a non JS Table of Contents plugin. There are a few on the WP repo.

    #1521564
    Peter Paul

    Hi David,

    Thank you for your reply! I had a suspicion that it was the ToC that was causing the shift
    but since I don’t know how to pin point it, I was not able to rule it out.
    I’ll try to disable the ToC and look for another one.

    And thank you for the tip on how to detect the CLS issue.
    I’ll test it out as well and see what can I find.

    Thanks!

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