[Resolved] CLS Issue

Home Forums Support CLS Issue

  • This topic has 20 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1459388
    Kelly

    Hello all,

    Since the past 2-4 weeks, I am receiving CLS issues in PageSpeed Insights for this:

    <div class="content-area grid-parent mobile-grid-100 grid-75 tablet-grid-75">

    Is this part of the Generate Press theme and what can I do about it?

    It affects any of the posts on mytopfitness.com. I have lazy loading but that has been on for a year and the CLS issues just started within PageSpeed insights.

    Regards,

    Kelly

    #1459590
    David
    Staff
    Customer Support

    Hi there,

    no its not theme related, CLS identifies the container that is affected by CLS this generally means that an element within the container is being restyled after the first paint. Can be caused by many things.

    If you can share a link ill take a look at whats causing it.

    #1459778
    Kelly

    Thank you David! Here is one I have been testing against… all posts have the same issue and I suspect lazy loading: https://mytopfitness.com/hiit-beginners/

    #1459856
    David
    Staff
    Customer Support

    Yeah that lazy loader is not generating the correct size placeholder which is the main issue. Might be best to use another lazy loader. The one built into Autoptimize works ok.

    #1459862
    Kelly

    Sadly, I am using Automptize with the A3 lazy loader. Maybe, there is a conflict.

    #1459878
    David
    Staff
    Customer Support

    If A3 Lazy loader is only being used for images then its not required. Theres an option in Autoptimize to lazy load images.

    #1460027
    Kelly

    I use the a3 for video lazy loading. I will play with it to see how it goes. As always, you are so helpful!

    #1460048
    David
    Staff
    Customer Support
    #1460188
    Kelly

    Odd, I disabled all lazy loading and PageSpeed is still complaining. I will continue to troubleshoot and close this as it’s not a GP issue

    #1460343
    David
    Staff
    Customer Support

    The best way to see what is causing the CLS. Open the page in Chrome, Right Click > Inspect to open the Dev Tools. Go to the Network Tab and change Online to Slow 3G. Then refresh the page. You will be able to see scroll the page as it loads and see what elements are jumping around.

    Things like Critical CSS can be a problem here too. As they defer the loading of the rest of the CSS, so you may seem some FOUC if critical css is enabled.

    #1460350
    Kelly

    Thanks David, I will give that a try as I have been honed in on the Critical CSS.

    Regards,

    Kelly

    #1460356
    David
    Staff
    Customer Support

    Unless you’re really into scraping code and writing manual Critical CSS i would avoid the automatic Critical CSS options provided by plugins – they cause so many problems.

    #1460379
    Kelly

    100% agree and testing without it over the next day. I may get some render blocking but it’s better than the flicker.

    #1460450
    Kelly

    Issue solved thanks to your guidance. It was a two part item, removing the critical css took care of a few of the CLS and after going up and down the caching chain, I enabled RocketLoafer in CloudFlare which took care of the largest CLS item.

    #1460772
    David
    Staff
    Customer Support

    Really glad to hear that!

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