- This topic has 11 replies, 3 voices, and was last updated 1 year, 7 months ago by David.
February 23, 2021 at 11:43 am #1669641Dave
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.
DaveFebruary 23, 2021 at 4:54 pm #1669954DavidStaffCustomer Support
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.February 24, 2021 at 4:06 am #1670409Dave
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.
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?February 24, 2021 at 5:50 am #1670496DavidStaffCustomer SupportFebruary 24, 2021 at 6:58 am #1670748Dave
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?February 24, 2021 at 7:15 am #1670767DavidStaffCustomer SupportFebruary 24, 2021 at 1:37 pm #1671231Dave
I don’t see an option for Flexbox. In General the three options are:
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.
Initiate smooth scroll on anchor links using the smooth-scroll class.February 24, 2021 at 3:55 pm #1671364ElvinStaffCustomer Support
You’re supposed to see this dropdown option.
Are you using an updated GeneratePress and GP Premium?
A wise man once said:
"Have you cleared your cache?"February 25, 2021 at 4:36 am #1671954Dave
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?February 25, 2021 at 5:46 am #1672030DavidStaffCustomer 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.February 25, 2021 at 8:13 am #1672423Dave
OK great, thanks very much for all your help! Greatly appreciated.February 25, 2021 at 8:45 am #1672501
- You must be logged in to reply to this topic.