누적 레이아웃 변경 횟수 CLS

1. 페이지의 전체 수명 주기 동안 발생하는 예기치 않은 레이아웃 변경
2. 레이아웃 변경 점수 중 가장 큰 버스트를 측정하는 Core Web Vitals 측정항목

✅ 기준 세션 기간: 최대 세션 시간(1초 간격, 최대 5초)

하나 이상의 개별 레이아웃 전환이 아래와 같이 발생하는 경우

• 각 전환 간 1초 미만의 간격으로, 빠르게 연속으로 발생
• 총 기간이 최대 5초

가장 큰 버스트는 해당 기간 내 모든 레이아웃 이동의 누적점수가 가장 큰 세션 기간을 의미

✅ WHEN?

• 폰트나 이미지와 같은 리소스가 비동기식으로 로드
• DOM 요소가 기존 컨텐츠보다 먼저 페이지에 동적으로 추가

✅ WHY?

• 크기를 알 수 없는 이미지나 동영상
• 초기 대체값보다 작거나 큰 글꼴
• 크기를 동적으로 조절하는 서드파티 Ads, Widgets 프로덕션 환경에서 차이가 있어 대응하기 어려움

<aside> ✅

개발자의 컴퓨터에는 캐싱되어 있어 문제가 발생하지 않지만 최종 사용자에게는 로드하는데에 오래걸리는 경우가 있어 프로덕션 환경에서의 체크가 반드시 필요

</aside>

✅ BEST

• CLS 점수가 0.1 미만이 되도록