Cumulative Layout Shift (CLS)란?
Cumulative Layout Shift (CLS)는 웹사이트에서 사용자가 페이지를 보는 동안 발생하는 예기치 않은 레이아웃 변화를 측정하는 웹 성능 지표입니다. 이는 웹페이지가 로드되는 동안, 특히 사용자 상호작용이 없는 상태에서 레이아웃이 갑자기 변경되는 문제를 해결하는 데 중요한 역할을 합니다. CLS는 Core Web Vitals 중 하나로, Google이 웹사이트의 사용자 경험을 평가하는 주요 기준 중 하나입니다.
왜 CLS가 중요한가?
사용자가 웹페이지를 탐색할 때 갑작스럽게 콘텐츠가 움직이면 혼란을 느끼거나 실수로 다른 요소를 클릭할 수 있습니다. 예를 들어, 텍스트를 읽고 있는 도중 이미지가 로드되면서 텍스트가 아래로 밀려나거나, 버튼을 클릭하려는 순간 갑자기 위치가 변경되어 다른 링크를 클릭하게 되는 경우가 대표적입니다. 이러한 경험은 사용자의 만족도를 떨어뜨리고, 나아가 사이트의 이탈률을 높일 수 있습니다. CLS 점수가 높다면 사이트가 이러한 문제를 많이 일으키고 있다는 의미이므로, 낮추는 것이 중요합니다.
CLS 계산 방식
CLS는 요소가 이동한 거리와 요소의 크기를 기반으로 계산됩니다. 두 가지 주요 값이 사용됩니다.
- 이동 거리: 페이지에서 이동한 요소가 화면의 어느 정도 비율을 차지하는지.
- 영역 크기: 해당 이동이 일어난 요소가 차지하는 화면 비율.
이 두 값을 곱하여 CLS 점수를 계산합니다. CLS 점수는 0에서 1 사이의 값으로 나타나며, 값이 클수록 레이아웃 이동이 많이 일어났음을 의미합니다.
CLS의 허용 기준
Google은 CLS 점수를 아래와 같이 권장합니다.
- 좋음: CLS ≤ 0.1
- 개선 필요: 0.1 < CLS ≤ 0.25
- 나쁨: CLS > 0.25
이 기준을 충족시키기 위해 웹페이지에서 불필요한 레이아웃 이동을 최소화하는 것이 중요합니다.
CLS를 낮추는 방법
CLS를 줄이기 위해서는 다음과 같은 방법들이 있습니다.
- 이미지와 동영상에 크기 명시: HTML에서 이미지와 동영상의 크기를 명확하게 정의하면, 브라우저가 이를 미리 계산하고 자리 확보를 해둘 수 있어 나중에 콘텐츠가 로드될 때 레이아웃이 변경되지 않습니다.
- 광고 및 동적 콘텐츠 관리: 광고 배너나 동적 콘텐츠는 로드 중에 레이아웃 변경을 유발할 수 있습니다. 고정된 크기의 공간을 미리 확보하거나, 레이아웃에 영향을 덜 주는 위치에 배치하는 것이 좋습니다.
- 웹 폰트 최적화: 웹 폰트를 로드하는 중에 글꼴이 바뀌면서 레이아웃이 변경될 수 있습니다.
font-display속성을 사용해 이러한 문제를 예방할 수 있습니다. - 지연 로드 시 유의: 지연 로드(lazy-loading) 기능을 사용할 때 레이아웃이 이동하지 않도록 이미지나 동적 콘텐츠의 고정된 위치를 미리 지정하는 것이 중요합니다.
결론
CLS는 웹페이지의 안정성을 측정하는 중요한 지표로, 사용자 경험에 큰 영향을 미칩니다. 웹사이트의 CLS 점수를 낮추는 것은 사용자 만족도를 높이고, SEO 측면에서도 유리할 수 있습니다. Google은 이 점수를 Core Web Vitals의 일환으로 사용하고 있기 때문에, CLS를 개선하는 것이 검색 엔진 최적화(SEO)에 긍정적인 영향을 줄 수 있습니다.