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

누적 레이아웃 이동 CLS는 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화하므로 시각적 안정성을 측정할 때 중요한 사용자 중심 메트릭이다. CLS가 낮으면 우수한 사용자 경험을 보장하는데 도움이 된다.

 

페이지에 갑자기 바뀌는 부분이 생기는 온라인 기사를 읽어본 경험이 있다. 아무런 경고 없이 텍스트가 움직이며 읽던 부분을 놓치게 되거나, 더 심한 경우 링크나 버튼을 탭하기 직전 갑작스레 링크가 움직이는 바람에 다른걸 클릭할 수도 있다.

이런 경우 짜증스러운 정도에 그치지만, 경우에 따라 실제 피해를 겪게 될 수 있다.

 

페이지의 콘텐츠의 예기치 않은 이동은 일반적으로 리소스가 비동기식으로 로드되거나 DOM 요소가 기존 콘텐츠 위의 페이지에 동적으로 추가되기 때문에 발생한다. 원인은 알 수 없는 크기의 이미지나 동영상, 대체 크기보다 크거나 작게 렌더링되는 글꼴, 동적으로 크기가 조정되는 타사 광고 또는 위젯일 수 있다.

 

이것이 더 큰 문제가 되는 이유는 개발 중인 사이트가 기능하는 방식이 사용자가 경험하는 방식과 다를 경우이다. 대부분 개인화된 콘텐츠나 타사 콘텐츠는 프로덕션 환경에서는 개발 환경과 동일하게 작동하지 않고, 테스트 이미지는 이미 개발자의 브라우저 캐시에 존재하며, 로컬에서 실행되는 API 호출이 너무 빨라 지연이 눈에 띄지 않는 경우가 많기 때문이다.

 

누적 레이아웃 이동 메트릭은 실제 사용자에게 이런 일이 발생하는 빈도를 측정해 이 문제를 해결하는 데 도움을 준다.

https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/FdCETo2dLwGmzw0V5lNT.png?auto=format

개선하는 방법

대부분 웹사이트에서 다음 몇 가지 기본 원칙을 준수하면 레이아웃 이동을 방지할 수 있다.

 

• 이미지 및 비디오 요소에 항상 크기 속성을 포함하거나 CSS 가로 세로 비율 상자와 같은 방식으로 필요한 공간을 미리 확보한다. 이런 접근 방식을 사용해 이미지가 로드되는 동안 브라우저가 문서에 올바른 양의 공간을 할당할 수 있다. unsized-media 기능 정책을 사용해 기능 정책을 지원하는 브라우저에서 이 동작을 강제할 수도 있다.
• 사용자 상호 작용에 대한 응답을 제외하고는 기존 콘텐츠 위에 콘텐츠를 삽입하지 말자. 이렇게 하면 이동이 발생하기 때문이다.
• 레이아웃 변경을 트리거하는 속성의 애니메이션보다 전환 애니메이션을 사용하자. 상태에서 상태로 컨텍스트와 연속성을 제공하는 방식으로 애니메이션 전환을 수행하는 것이 좋다.