이미지/광고의 느린 로딩, 비동기 동작, 동적 DOM변경등으로
웹 페이지의 레이아웃이 얼마나 변하는 지를 측정하여
사용자가 잘못된 클릭을 유발하게 되는 시각적 불안정성을 체크하는 사용자 중심 성능 지표
"좋은 CLS 점수는 0.1 이하"
~~~
Layout Instability API 로 Layout Shift Score 라는 측정값을 제공
- Layout Shift Score = impact fraction ( 어느 정도 크기의 객체가 이동 하는가 ) * distance fraction ( 얼마나 많이 이동하는가 )
- 사용자의 행동으로 레이아웃이 변하는 것은 괜찮음 - 500ms 이내에 사용자 입력이 있었다면 hadRecentInput 이 설정되므로 계산에서 제거가능
- height/width 바꾸는 것 대신, transform:scale() 사용
- top,right,bottom,left 바꾸는 것 대신, transform: translate() 사용
CLS를 개선하는 방법
- 이미지/비디오에 항상 사이즈 지정하거나 CSS Aspect Ratio Boxes 등으로 위치를 선점해 둘 것
- 사용자 인터랙션을 제외하고는 콘텐츠 위에 새로운 콘텐츠를 추가하지 말 것
- 상태간의 변화에 CSS Transform 등으로 애니메이션 처리 할 것