Cumulative Layout Shift란 무엇일까요?
Cumulative Layout Shift
CLS (Cumulative Layout Shift)
- 레이아웃 변경 횟수
- 안정적인 코어 웹 바이탈 측정항목
- 시각적 안정성을 측정하는 중요한 사용자 중심 측정항목
- 사용자가 예기치 않은 레이아웃 변경을 경험하는 빈도를 수치화하는 데 도움
페이지 콘텐츠의 예기치 않은 이동이 발생하는 경우
- 리소스가 비동기식으로 로딩
- 기존 콘텐츠보다 먼저 페이지에 DOM 요소가 동적으로 추가될 때
- 크기를 알 수 없는 이미지 또는 동영상
- 대체 글꼴보다 크거나 작게 렌더링되는 글꼴
- 동적으로 크기가 조절되는 서드 파티 광고 또는 위젯의 이동
예기치 않은 레이아웃 변경으로 텍스트가 갑자기 움직이는 경우
- 읽는 동안 원래 있던 위치를 잃음
- 잘못된 링크나 버튼을 클릭하게 됨
- 이러한 여러 가지 방식으로 사용자 환경에 지장을 줄 수 있음
좋은 CLS 점수
0.1이하이면 우수0.25보다 크면 좋지 않음
레이아웃 변경 세부정보
레이아웃 이동
- Layout Instability API에 의해 정의됨
- 시작 위치가 변경되는 요소는 불안정한 요소로 간주됨
레이아웃 변경
- 기존 요소가 시작 위치를 변경할 때만 발생함
- DOM에 새 요소가 추가되거나 기존 요소의 크기가 변경되면, 변경으로 인해 보이는 다른 요소가 시작 위치를 변경하는 경우
레이아웃 변경 점수
1
2
layout shift score = impact fraction * distance fraction
레이아웃 변경 점수 = 영향 비율 * 거리 비율
- 표시 영역 크기 및 렌더링된 두 프레임 간 표시 영역 내 불안정한 요소의 이동을 고려
영향 비율
- 불안정한 요소가 두 프레임 간의 표시 영역 영역에 미치는 영향을 측정
- 해당 프레임과 이전 프레임에서 불안정한 모든 요소의 표시 가능 영역을 표시 영역의 총 면적에 대한 비율로 조합한 것
이동 거리 비율
- 표시 영역을 기준으로 불안정한 요소가 이동한 거리를 측정
- 프레임에서 불안정한 요소가 이동한 가장 큰 가로 또는 세로 거리를 표시 영역의 최대 크기 (너비 또는 높이 중 더 큰 값)로 나눈 값
예상된 레이아웃 변경과 예기치 않은 레이아웃 변경 비교
예기치 않은 레이아웃 변경
- 모든 레이아웃 변경이 나쁜 것은 아님
- 레이아웃 변경은 사용자가 예상하지 않는 경우에만 좋지 않음
사용자가 시작한 레이아웃 변경
- 사용자 상호작용에 반응하여 발생하는 레이아웃 변경은 일반적으로 문제가 되지 않음
애니메이션 및 전환
- 잘 실행되면 사용자를 놀라게 하지 않고 페이지의 콘텐츠를 업데이트할 수 있는 좋은 방법
- CSS
transform속성- 레이아웃 변경을 트리거하지 않고도 요소에 애니메이션을 적용할 수 있음
transform: scale()사용height및width속성 변경 대신 사용
transform: translate()사용해 요소 이동top,right,bottom또는left속성 변경 대신 사용