- This topic has 20 replies, 3 voices, and was last updated 3 years, 3 months ago by David.
-
AuthorPosts
-
September 25, 2020 at 10:02 pm #1459388Kelly
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
September 26, 2020 at 2:30 am #1459590DavidStaffCustomer SupportHi 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.
September 26, 2020 at 6:15 am #1459778KellyThank 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 SupportYeah 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.
September 26, 2020 at 7:28 am #1459862KellySadly, I am using Automptize with the A3 lazy loader. Maybe, there is a conflict.
September 26, 2020 at 7:45 am #1459878DavidStaffCustomer SupportIf A3 Lazy loader is only being used for images then its not required. Theres an option in Autoptimize to lazy load images.
September 26, 2020 at 8:11 am #1460027KellyI 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 SupportNo problems 🙂
September 26, 2020 at 10:53 am #1460188KellyOdd, 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
September 26, 2020 at 2:50 pm #1460343DavidStaffCustomer SupportThe 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 #1460350KellyThanks David, I will give that a try as I have been honed in on the Critical CSS.
Regards,
Kelly
September 26, 2020 at 3:11 pm #1460356DavidStaffCustomer SupportUnless 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.
September 26, 2020 at 3:57 pm #1460379Kelly100% 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 #1460450KellyIssue 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 #1460772DavidStaffCustomer SupportReally glad to hear that!
-
AuthorPosts
- You must be logged in to reply to this topic.