Need help with resolving CLS issue
using pagespeed.web.dev to measure my site performance, how do I fix CLS that's happening in my main layout div? How do I find what's causing it??
14 Replies
Have you checked that
Learn how to improve CLS link?Is it animating or something?
It's saying the main tag is the culprit, which is very odd. Makes me think some animation is ocrruing
Normally it tells you a specific element that is at fault
animation occurs to load sections, which are inside the main div
That definitely could be the cause....any chance you could screen record or something the first load?
I've had animations tank my CLS in my hero section before. Turned them off and it fixed it dramatically.
getting this but its too vague
Do you have a git repo or something so we can check it out?
Also, do you have a live site? Animations on load like that can indeed kill CLS
A github repo would be nice as well. Did you build this in HTML/CSS?
Dhruv Kulkarni's Portfolio
Hi, I'm Dhruv Kulkarni - Welcome to my portfolio website
nextjs MUI
it's private so can you drop your github username I'll add you as a collab
Unfortuantely I can't test this without running a development version of my site but you need to check out the react profiler. There are some major long running task in your react page causing these long load times. It's why you get that weird jump from at the very beginning with all your content
You can look up react dev tools on the chrome store and you'll see it pop up. Here's also a video on it:
https://www.youtube.com/watch?v=Qwb-Za6cBws
Web Dev Simplified
YouTube
How To Maximize Performance In Your React Apps
React Simplified Course: https://reactsimplified.com
Fixing performance bugs in React is difficult since so much of the performance of React is tied to re-renders and state management. This is why I love the profiler built into React dev tools since it does an amazing job of showing you everything you need to know about what is causing your app...
Also could look at inlining critcal styles and things of that nature