읽기 진행률 바

CSSComposite
전체 목록

Core Web Vitals 정리

LCP는 가장 큰 콘텐츠가 그려지는 시점입니다. 2.5초 이내를 목표로 합니다.

INP는 사용자 입력에 화면이 반응하기까지 걸리는 시간입니다. 200ms 이내가 좋은 수준입니다.

CLS는 레이아웃이 예고 없이 밀리는 정도입니다. 0.1 이하로 유지합니다.

세 지표 모두 실제 사용자 데이터의 75번째 백분위수로 판단합니다.

애니메이션을 transform과 opacity로 만들면 INP와 CLS에 영향을 주지 않습니다.

스크롤해 보세요

스크롤한 정도를 애니메이션 진행도로 씁니다(animation-timeline: scroll()). 끝까지 스크롤하면 바가 꽉 찹니다. 페이지에 넣으면 페이지 전체의 스크롤을 따라갑니다. 바는 사용자가 스크롤한 만큼만 움직이므로, 동작 줄이기 설정에서도 그대로 둡니다.

지속 시간
스크롤 위치에 연동
Easing
linear
애니메이션 속성
transform (scaleX)
렌더링 비용
Composite