웹 페이지 로드할 때 갑작스럽게 이미지가 생성되어 버튼을 못누른 적이 있었다. 이 같은 현상이 CLS이다.
예기치 못한 컨텐츠의 이동을 일컫는다. 이와 같은 문제가 왜 발생하고 어떻게 해결해야할까?
페이지의 라이프 사이클 동안 발생하는 모든 예기치 못한 layout 이동에 대해 가장 큰 레이아웃 이동 점수버스트를 뜻한다. 현재 프레임 이후에 다음 프레임 간에 레이아웃 이동을 점수를 메긴다.
좋은 점수는 0.1이하이
이 같은 현상이 발생하는 이유는 리소스가 비동기적으로 로드 되거나 기존 컨텐츠에 동적으로 컨텐츠를 추가하는 경우 발생한다. 주로 사이즈가 정해지지 않은 이미지, 비디오 혹은 작게 렌더링 된 폰트에 의해 발생한다.
주로 이와 같은 문제가 발견되지 않는 이유는 로컬 환경에서 개발을 하기에 빠른 리소스의 로드의 의해서 발견이 쉽지 않다는 것이다. 하지만 여러가지 변수가 있는 프로덕트 환경에서는 이 같은 문제가 발생하기 쉽다.
현재 프레임에서 layout시작지점을 체크하고 다음 프레임의 시작지점의 이동이 얼마나 되었는지를 체크한다.
해당 점수는 다음과 같은 공식으로 계산된다.
score = 거리분율 * 영향분율
불안전한 요소가 뷰포트에 얼마나 영향을 미치는지를 체크하는 값이다. 불안정 요소의 가시 영역의 합
[출처: https://web.dev/cls/](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/40c6208b-70e7-41d7-b75b-7b5103aaee9f/BbpE9rFQbF8aU6iXN1U6.avif)
해당 컨텐츠는 아래로 25%정도 내려왔다.
