# CLS(Cumulative Layout Shift)은 무엇일까?
1. CLS란 무엇일까요?
- CLS는 Cumulative Layout Shift의 약자로, 웹사이트에서 사용자가 콘텐츠를 보고 있는 도중에 페이지 내용이 예기치 않게 움직이는 현상을 나타내는 지표입니다.
- 뉴스 홈페이지에서 광고 이미지가 추가되면서 텍스트가 움직이거나, 쇼핑몰 주문 화면에서 버튼이 움직여 실수로 다른 버튼을 클릭하는 경우 등을 상상해보세요. 이러한 불편한 경험을 줄이기 위해 CLS가 중요한 역할을 합니다.
- 짧게 정리하면, 페이지에 자바스크립트, CSS 또는 이미지 등의 요소들이 페이지 로딩에 과부하를 주어 페이지의 움직임이 부자연스러움이 발생할 수 있는 지표라고 보시면 됩니다.
- 즉, 페이지를 단순화하여 사용자 처리가 원활해야 하고, 끊김현상에 의해 잘못된 클릭이 되면 안되겠지요?
2. 좋은 CLS 점수는 얼마일까요?
- 사용자에게 우수한 경험을 제공하기 위해서는 CLS 점수가 0.1 이하가 되는 것이 좋습니다. 점수가 낮을수록 레이아웃 이동이 적고, 사용자가 더 편안하게 페이지를 이용할 수 있다는 의미입니다.
- 좋은 CLS는 위의 표와 같이 0.1 미만이면 Good이고, 0.25이상이면 Poor로 좋지 않음으로 볼수 있습니다.
- 0.1보다 수치가 크다면 개선하는 작업을 해야겠지요.
3. 레이아웃 이동이 일어나는 이유는 무엇일까요?
- 레이아웃 이동은 다음과 같은 이유로 발생할 수 있습니다.
- 여러 평가하는 방법이 있겠으나, CLS의 낮은 이유는 보통 아래와 같이 5가지로 설명할 수 있습니다.
1) 이미지 또는 동영상 로드상 문제
- 크기가 지정되지 않은 이미지나 동영상이 로드될 때 공간을 확보하기 위해 다른 요소들이 움직일 수 있습니다.
2) 동적인 콘텐츠가 추가 된 경우
- DOM 트리에 새로운 콘텐츠가 동적으로 추가될 때 기존 요소들의 위치가 변경될 수 있습니다.
3) 폰트 로딩에서 문제
- 웹폰트가 로드될 때까지 대체 폰트가 사용되고, 이후 웹폰트가 로드되면서 텍스트가 다시 렌더링될 수 있습니다.
4) 광고 로드상 문제
- 광고가 로드될 때 공간을 확보하기 위해 페이지 레이아웃이 변경될 수 있습니다.
5) CSS 애니메이션
- CSS 애니메이션을 사용하면 원하는대로 레이아웃을 변경할 수 있지만, 의도하지 않은 레이아웃 이동을 유발할 수도 있습니다.
예외사항
- 물론 상기의 요소가 있다고 해서 모두 CLS의 점수를 깍아먹는 것은 아닙니다.
- 예외사항도 있습니다.
4. 누적된 레이아웃 변경은 어떻게 계산할까요?
- CLS 계산에는 "임팩트"와 "이동거리"의 2가지 측정 항목이 포함됩니다. 이 2가지 항목은 충격 비율과 거리 비율을 고려합니다.
- 레이아웃 이동 점수는 영향 분율과 거리 분율을 곱하여 계산됩니다.
1) 임팩트 팩션
- 영향 분율: 불안정 요소가 뷰포트 영역에 미치는 영향을 나타냅니다. 요소가 뷰포트의 얼마나 큰 영역을 차지하는지에 따라 계산됩니다.
2) 거리 팩션
- 불안정 요소가 이동한 거리를 뷰포트 크기로 나눈 값입니다. 요소가 얼마나 움직였는지에 따라 계산됩니다.
5. 예상된 레이아웃 이동 vs 예상치 못한 레이아웃 이동
- 모든 레이아웃 이동이 나쁜 것은 아닙니다. 사용자가 링크를 클릭하거나 버튼을 누르는 등 사용자와의 상호작용으로 인해 발생하는 레이아웃 이동은 오히려 자연스러운 경험을 제공할 수 있습니다.
- 반면에 사용자가 예상하지 못한 레이아웃 이동은 불편함을 유발할 수 있으므로 최소화해야 합니다.
6. CLS를 개선 또는 최적화 하는 방법
- 다음과 같은 방법으로 CLS를 개선 또는 최적화 할 수 있습니다.
1) 이미지와 동영상에 크기 속성 지정
- 누구나 최고 품질의 이미지와 비디오를 사이트에 넣고 싶지만, 이는 로드 속도에 상당한 영향을 미칩니다.
- 이미지와 동영상의 크기를 미리 지정하면 공간 확보를 위해 다른 요소들이 움직이는 것을 방지할 수 있습니다.
2) Aspect Ratio Boxes 사용
- 이미지나 동영상의 공간을 미리 확보하기 위해 Aspect Ratio Boxes와 같은 기술을 사용할 수 있습니다.
- Aspect Ratio Calculator를 사용하면 가로 세로 비율을 계산할 수 있습니다.
3) 광고에 대한 레이아웃
- 구글 애드센스 등 광고와 관련된 부분을 고치는 것은 까다로운 부분이지만, 광고로 인해 레이아웃 변경이 자주 발생하기도 하며 이 때문에 비효율적인 부분이 발생할 수 있습니다. 코드를 직접 손 보실 수 있다면 DIV를 통해 조정하는 것도 방법입니다.
4) 사용자 상호작용 이후 콘텐츠 삽입
- 사용자와의 상호작용 이후에야 콘텐츠를 삽입하면 레이아웃 이동을 줄일 수 있습니다.
5) transform 애니메이션 사용
- 레이아웃 변경을 트리거하는 CSS 속성 대신 transform 애니메이션을 사용하면 레이아웃 이동 없이 원하는 효과를 만들 수 있습니다.
7. CLS 측정 도구
- 다음과 같은 도구를 사용하여 CLS 점수를 측정할 수 있습니다.
- PageSpeed Insights
- WebPageTest
- web-vitals JavaScript 라이브러리
- Chrome DevTools