CLSCumulative Layout Shift

01누르려던 버튼이 밀려나는 경험을 점수로

버튼을 누르려는 순간 위에 배너가 끼어들어 엉뚱한 것을 누른 경험이 있을 겁니다. CLS는 이런 예상치 못한 이동을 합산한 점수입니다. 사용자가 직접 입력한 직후 0.5초 안의 이동은 예상된 변화로 보고 제외합니다.

02화면을 밀어내는 네 가지 범인

• 크기를 지정하지 않은 이미지·동영상·iframe — 로드되면서 아래 내용을 밀어냄
• 늦게 삽입되는 배너·광고·쿠키 알림 — 자리를 확보하지 않은 채 끼어듦
• 웹폰트 교체 — 대체 폰트와 글자 폭이 크게 달라 줄바꿈이 바뀜
• 스크롤 중 지연 로딩되는 요소 — 로딩 중에만 생기는 문제가 아님

03이미지 자리를 미리 비워 두는 코드

애니메이션은 transform으로 움직이면 레이아웃 이동으로 계산되지 않습니다. 문제는 다른 요소의 자리를 빼앗는 변화입니다.

<!-- 크기 미지정: 로드되며 아래 내용을 밀어냄 -->
<img src="chart.webp" alt="...">

<!-- width/height 지정: 브라우저가 공간을 미리 확보 -->
<img src="chart.webp" alt="..." width="1600" height="900">

04모바일에서 직접 재현해 보는 점검

• 느린 네트워크 설정으로 모바일 화면을 열고 첫 3초 동안 튀는 곳이 있는지 본다
• 스크롤하며 늦게 뜨는 광고·배너가 내용을 밀지 않는지 본다
• PageSpeed Insights 진단의 '레이아웃 이동 요소'를 확인한다