[Support request] CLS Issue

Home Forums Support [Support request] CLS Issue

Home Forums Support CLS Issue

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1669641
    Dave

    Hi Guys,

    I’m having a CLS issue, which I know other users have flagged in the past.

    According to Pagespeed Insights, my CLS for some of my top posts is about 0.49 on mobile and 0.39 on desktop.

    I’ve read a number of other threads where users had a similar problem, but the solution seems to be different each time and I can’t quite figure it out for my site.

    Please let me know if you have any advice that might help solve this problem.

    Thank you!

    Dave

    #1669954
    David
    Staff
    Customer Support

    Hi there,

    the main issue is generated by the Logo and header image being lazyloaded.
    In your Lazy Loader plugin you will generally find an option to exclude images from lazy loading using a CSS Class; you can add these three: is-logo-image header-image avatar

    I included the avatar as its above the fold so no need to lazy load that either.

    #1670409
    Dave

    Thanks David. I use Autoptimize for lazyloading and tried adding those CSS classes, but no luck.

    I found the below Autoptimize thread, which says that you need to use the file name you’re trying to exclude.

    https://wordpress.org/support/topic/exclude-class-from-lazy-load/

    But when I did that, I made things worse: my CLS numbers were unchanged, but my overall site speed dropped significantly.

    Do you have any other suggestions for how I might fix this?

    #1670496
    David
    Staff
    Customer Support

    In the autoptimize settings > images there is the Lazy-load exclusions field but my bad, those CSS classes have to be Comma Separated ie.

    is-logo-image, header-image, avatar

    #1670748
    Dave

    Thanks David. I added the commas, but when I ran a pagespeed test afterwards my mobile speed dropped from 63 to 49, so it seems like excluding those images caused more problems than it solved.

    Do you know if there’s any way to address the CLS issue without negatively affecting the page speed?

    #1670767
    David
    Staff
    Customer Support

    in Customizer > General can you change the structure to Flexbox ?

    #1671231
    Dave

    I don’t see an option for Flexbox. In General the three options are:

    Combine CSS
    Reduce the number of CSS file requests and use a lite version of our grid system.

    Cache dynamic CSS
    Cache CSS generated by your options to boost performance.

    Smooth scroll
    Initiate smooth scroll on anchor links using the smooth-scroll class.

    #1671364
    Elvin
    Staff
    Customer Support

    Hi there,

    You’re supposed to see this dropdown option.
    https://share.getcloudapp.com/Qwu9jvXK

    Are you using an updated GeneratePress and GP Premium?
    https://docs.generatepress.com/article/switching-from-floats-to-flexbox/

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

    #1671954
    Dave

    Apologies, I was using an outdated version of GP Premium, so I just updated it, switched to Flexbox as suggested, and added the exclusions David recommended to Autoptimize.

    My page speeds are good, though Pagespeed Insights still shows bad CLS scores. Is this something that will take time to be reflected there, or is there something else I can do to improve those numbers?

    #1672030
    David
    Staff
    Customer Support

    I just checked the site on PSI and the Lab Results for CLS are good they’re all in the green and below 0.01.

    Google collects origin summary data over 28 days so it takes time for that to get updated – and further to this it will collect Field Data which is from real user visits that will again demonstrate real values which should be around the Lab Data results.

    #1672423
    Dave

    OK great, thanks very much for all your help! Greatly appreciated.

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