Cumulative Layout Shift (CLS)
(web.dev)이미지/광고의 느린 로딩, 비동기 동작, 동적 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 등으로 애니메이션 처리 할 것
누르려는 순간에 갑자기 레이아웃이 살짝 바뀌면서 잘못 터치하는 경우가 종종 있어서 빡칠 때가 많은데, 이걸 정량적으로 측정하는 방법이 드디어 나왔군요. 개인적인 생각으로는 언론사 홈페이지에 이걸 재어보면 처참한 수치가 나오지 않을까 싶습니다.
국내 언론사는 광고가 너무 많은데다 그 광고들 자체도 느리고 껌뻑거려서 측정하는거 자체가 무의미 할듯 합니다...
다른 얘기로 저는 https://github.com/disjukr/just-news 와 Tampermonkey 써서 국내 언론사는 본문만 봅니다. 웹사이트가 너무 지저분해요.
저는 예전에 파이썬으로 [언론사 기사 링크를 넣으면 자동으로 포털 뉴스기사 링크로 바꿔주는 프로그램]을 짜려고 한 적도 있었어요. 좀 어이없게 소스코드를 날려먹고(저장을 실수로 램드라이브에 했다가 재부팅) 현자타임(?)이 와서 접었지만요.
사용자 중심 성능 지표들
https://web.dev/user-centric-performance-metrics
https://developers.google.com/web/fundamentals/…
기존의 load, DOMContentLoaded 는 좋은 지표가 아님
First contentful paint (FCP): 화면에 첫번째 콘텐츠가 표시되기 시작할 때
Largest contentful paint (LCP): 페이지의 가장 큰 텍스트블럭 또는 이미지가 표시될 때
First input delay (FID): 사용자 입력이 가능해 진뒤 실제로 브라우저가 그에 반응하는데 걸리 시간
Time to Interactive (TTI): 로딩부터, 사용자 인터랙션이 가능해 지는데 까지 걸리는 시간
Total blocking time (TBT): FCP 와 TTI 간의 총 시간
Cumulative layout shift (CLS): 레이아웃 변화 지표