- This topic has 20 replies, 3 voices, and was last updated 1 month ago by David.
September 25, 2020 at 10:02 pm #1459388Kelly
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.
KellySeptember 26, 2020 at 2:30 am #1459590DavidStaffCustomer Support
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.September 26, 2020 at 6:15 am #1459778Kelly
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/September 26, 2020 at 7:21 am #1459856DavidStaffCustomer SupportSeptember 26, 2020 at 7:28 am #1459862Kelly
Sadly, I am using Automptize with the A3 lazy loader. Maybe, there is a conflict.September 26, 2020 at 7:45 am #1459878DavidStaffCustomer SupportSeptember 26, 2020 at 8:11 am #1460027Kelly
I use the a3 for video lazy loading. I will play with it to see how it goes. As always, you are so helpful!September 26, 2020 at 8:32 am #1460048DavidStaffCustomer SupportSeptember 26, 2020 at 10:53 am #1460188Kelly
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 issueSeptember 26, 2020 at 2:50 pm #1460343DavidStaffCustomer 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.September 26, 2020 at 3:02 pm #1460350Kelly
Thanks David, I will give that a try as I have been honed in on the Critical CSS.
KellySeptember 26, 2020 at 3:11 pm #1460356DavidStaffCustomer SupportSeptember 26, 2020 at 3:57 pm #1460379Kelly
100% agree and testing without it over the next day. I may get some render blocking but it’s better than the flicker.September 26, 2020 at 6:45 pm #1460450Kelly
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.September 27, 2020 at 4:14 am #1460772
- You must be logged in to reply to this topic.