[코어 웹 바이탈 최적화] CLS(Cumulative Layout Shift, 누적 레이아웃 이동)란?

코어 웹 바이탈의 메트릭에는 LCP, FID, CLS가 있다.
지금까지 LCP, FID에 대해 알아보았고, 마지막으로 CLS에 대해 알아보려 한다.

CLS란?

CLS는 Cumulative Layout Shift의 약자로 누적 레이아웃 이동을 의미하는 메트릭이다.

웹 사이트에 들어갔을때 화면이 덜컹거리면서 보고있던 글자가 반짝이거나, 보이지 않았던 이미지나 비디오가 화면 위로 올라왔던 경험이 있을 것이다.

CLS는 바로 위와 같은 예기치 않은 레이아웃 이동에 대한 레이아웃 이동 점수 중에서 가장 큰 버스트를 나타낸다.

레이아웃 이동은 시각적 요소가 렌더링된 프레임에서 다음 프레임으로 위치를 변경할때마다 발생한다.
레이아웃 이동 버스트는 세션 창이라고도 알려져 있는데 각 전환 사이의 간격이 1초 미만이고 총 기간이 최대 5초로 하나 이상의 개별 레이아웃 전환이 빠르게 연속적으로 발생하는 경우이다.
가장 큰 버스트는 해당 창 내에서 모든 레이아웃 이동에 대해서 누적 점수가 가장 최대인 세션 기간이다.

좋은 CLS 점수는?

우수한 사용자 경험을 제공하기 위해서 CLS 점수가 0.1 이하가 될 것을 권장한다.

레이아웃 이동 상세 정보

레이아웃 이동은 뷰포트 내의 가시적 요소가 두 프레임 사이에서 시작 위치가 변경될 때마다 보고된다.
레이아웃 이동은 기존 요소가 시작 위치를 변경할 때만 발생한다.
새 요소가 DOM에 추가되거나 기존 요소의 크기가 변경되면 변경으로 인해 다른 가시적 요소의 시작 위치가 변경되지 않는 한 레이아웃 이동으로 간주되지 않는다.

레이아웃 이동 점수

레이아웃 이동 점수는 해당 움직임에 대한 impact fraction(영향분율)과 distance fraction(거리분율)이라는 두 가지 측정값을 사용해 계산한다.

layout shift score = impact fraction * distance fraction

영향분율

영향분율은 불안정 요소가 두 프레임 사이 뷰포트 영역에 미치는 영향을 측정한다.
예시 이미지로 확인해보자.

이미지 출처: Cumulative Layout Shift(누적 레이아웃 이동, CLS)

첫번째 프레임에는 뷰포트의 절반을 차지하는 요소가 있다. 두번째 프레임에는 해당 요소가 뷰포트 높이의 25%만큼 아래로 이동한다.
빨간색 점선 직사각형은 두 프레임 모두에서 불안정 요소의 가시 영역을 합한 영역이다. 이 경우 뷰포트의 75%를 차지하므로 영향분율은 0.75가 되겠다.
참고로, 영향분율을 계산할때 보이지 않는 영역(뷰포트 밖으로 이동)은 고려되지 않는다.

거리분율

거리분율은 프레임에서 불안정 요소가 수평 또는 수직으로 이동한 최대 거리를 뷰포트의 가장 큰 치수(너비 또는 높이 중 더 큰 것)로 나눈 값이다.
이전의 예시 이미지를 다시 살펴보자.

이미지 출처: Cumulative Layout Shift(누적 레이아웃 이동, CLS)

위 이미지에서 가장 큰 뷰포트 수치는 너비가 아닌 높이이다. 또한, 불안정한 요소가 이동한 거리는 뷰포트 높이의 25%이다. 따라서, 거리분율은 0.25가 된다.

이에 따라 영향분율은 0.75, 거리분율은 0.25이므로 레이아웃 이동 점수는 0.75 * 0.25 = 0.1875이다.

다음으로는 기존 요소에 콘텐츠를 추가해서 레이아웃이 밀려날때 레이아웃 이동 점수가 어떻게 되는지 확인해보자.

이미지 출처: Cumulative Layout Shift(누적 레이아웃 이동, CLS)

두번째 프레임에서 Click Me! 라는 버튼이 갑자기 나타나면서 초록생 상자가 아래로 (부분적으로는 뷰포트 밖으로) 밀어냈다.
회색 상자는 불안정 요소가 아니다. 왜냐하면 Click Me 라는 버튼이 추가되면서 그 ‘시작 위치’가 변경되지 않았기 때문이다.

CLS는 뷰포트 내에서 기존에 보였던 요소의 ‘시작 위치’ 가 변경될때 측정된다.

Click Me! 라는 버튼은 이전에 DOM에 없었기 때문에 ‘시작 위치’가 변경된 것은 아니다.

따라서, 위 예제 이미지에서 회색 상자와 Click Me! 버튼은 불안정 요소가 아니다.

불안정 요소는 녹색 상자이다. 시작 위치가 변경되었기 때문이다. 이에 대한 영향분율은 0.5이다.
영향분율은 불안정 요소의 레이아웃 이동으로 인해 뷰포트에서 영향을 받은 가시 영역의 합이기 때문이다.
이 경우 녹색 상자의 영역만큼 영향을 받게 되어서 뷰포트의 절반인 0.5가 영향분율이 되겠다.
거리분율은 보라색 화살표로 표시되었다. 약 14%만큼 아래로 이동하였으므로 0.14가 거리분율이 되겠다.

따라서 레이아웃 이동 점수는 0.5 * 0.14 = 0.07이다.

예상한 레이아웃 이동 vs 예상치 못한 레이아웃 이동

그렇다면 모든 레이아웃 이동은 나쁜걸까?
그렇지 않다. 사용자가 예상하지 않은 경우에만 좋지 않다고 볼 수 있다.
예를 들어 링크를 클릭하거나, 버튼을 누르고, 검색 상자에 입력함으로써 발생하는 레이아웃 이동, 즉 사용자와의 상호작용으로 발생하는 레이아웃 이동은 사용자에게 그 관계가 명확히 보이는 한 괜찮다.

또한, 애니메이션을 통해 콘텐츠가 점진적이고 자연스럽게 이동하는 경험을 제공할 수도 있다.
CSS transform 속성을 사용하면 레이아웃 이동을 트리거하지 않고 요소에 애니메이션을 적용할 수 있다.

• height 및 width 속성을 변경하는 대신 transform: scale()을 사용한다.
• 요소를 이동하려면 top, right, bottom, left 속성을 변경하는 것을 피하고, 대신 transform: translate()을 사용한다.

CLS 측정 방법

CLS를 측정하는 도구는 아래와 같다.

• Chrome User Experience Report
• PageSpeed Insights
• Search Console(Core Web Vitals Report)
• web-vitals Javascript 라이브러리
• Chrome DevTools
• Lighthouse

다음으로는 CLS를 개선하는 방안을 알아보겠다!

---

참고
Cumulative Layout Shift(누적 레이아웃 이동, CLS)