Bug Report: CLS (Content Layout Shift) issue on mobile
Google is reporting a big spike in Content Layout Shift (CLS) issues on content pages. This is Core Web Vitals / SEO problem... so many acronyms!
Anyway, this could impact our ranking on these pages, so good to fix when we can.
This screen recording suggests it's caused by the Community Sign-in CTA loading above the content and then disappearing once the body content has loaded – I've slowed this down a bit so you can see it.
https://github.com/PostHog/posthog.com/assets/92976667/19aa13fb-a52b-48e7-802a-c639f7648535
Edit: It also appears like the filtering appears twice there. Not sure what that's about.
Would a loading state work better here, since we can't load the content before the page frame renders?
Worth a shot. I have a feeling it might impact other elements like LCP, but worth trying to seeing what happens.
https://github.com/PostHog/posthog.com/assets/154479/d7818e47-ed3b-4872-8963-7080dd67d805
https://posthog.com/tutorials/nextjs-ab-tests