Archived topic
CLS Issue
20 replies · Started by Kelly on September 25, 2020
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
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.
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/
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.
Sadly, I am using Automptize with the A3 lazy loader. Maybe, there is a conflict.
If A3 Lazy loader is only being used for images then its not required. Theres an option in Autoptimize to lazy load images.
I use the a3 for video lazy loading. I will play with it to see how it goes. As always, you are so helpful!
No problems :)
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
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.
Thanks David, I will give that a try as I have been honed in on the Critical CSS.
Regards,
Kelly
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.
100% agree and testing without it over the next day. I may get some render blocking but it’s better than the flicker.
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.
Really glad to hear that!
