CLS란?
CLS는 Cumulative Layout Shift의 약자로, 웹 페이지에서 요소들이 예기치 않게 위치를 이동하는 현상을 측정하는 지표이다. 이는 사용자 경험에 부정적인 영향을 미칠 수 있습니다.
예를 들어, 사용자가 버튼을 클릭하려고 할 때, 페이지의 다른 부분이 로드되면서 버튼의 위치가 갑자기 바뀌면 사용자는 의도치 않은 다른 요소를 클릭하게 될 수 있다.
문제 발생
진행중인 협동프로젝트에서 게시글 상세페이지 부분을 Lighthouse로 성능검사를 해보니 꽤나 큰 CLS문제가 발생하고 있었다.
문제 원인
원인을 찾는데 조금 고생을 했는데.. 데브 툴안의 성능 통계 검사를 통해 어떻게 레이아웃이 로드되는지 확인해본 결과, 게시글의 이미지를 담고있는 캐러셀 컴포넌트 부분이 뒤늦게 로드되는 과정에서 CLS가 발생하는 것이었다.
문제 해결
사실 CLS 문제를 처음겪어봐서 조금 당황했지만 내가 생각한 해결방안은 콘텐츠가 로드되기 전에 해당 공간을 미리 확보하는 것이다.
캐러셀이 로드되는 동안 페이지의 다른 부분이 움직이지 않도록, 캐러셀이 차지할 공간을 미리 설정해 두는 것이다.
그렇게 하기 위해 캐러셀의 상위에 div를 하나 만들어 그 div에 해당 캐러셀의 높이를 미리 설정해두어 해당 부분의 공간을 미리 확보하였다.
이렇게하여 CLS 문제를 해결할 수 있었다.
