CLS가 나빠지는 원인
레이아웃 이동은 이미 그려진 요소가 뒤늦게 위치를 바꿀 때 생기며, 퍼스트뷰에서 일어나면 사용자가 바로 불편을 느낍니다. 글을 읽다가 문단이 갑자기 내려가거나, 버튼을 누르려는 순간 광고가 끼어들어 다른 곳을 누르게 되는 경험이 대표적입니다. 주요 원인은 다음과 같습니다.
- width·height 속성이 없는 이미지와 동영상: 파일을 받기 전까지 자리를 차지하지 않다가 로드된 뒤 본문을 밀어냅니다.
- 크기를 예약하지 않은 광고·임베드·iframe
- 페이지 위쪽에 뒤늦게 삽입되는 배너, 알림 띠, 추천 영역
- 웹폰트가 로드되면서 글자 폭이 바뀌어 줄바꿈이 달라지는 경우
사용자가 클릭하거나 키를 누른 직후 0.5초 안에 일어난 이동은 의도된 변화로 보고 CLS에서 제외합니다. 아코디언을 펼쳐 아래 내용이 밀리는 것은 문제가 되지 않습니다.
CLS를 줄이는 방법
이미지와 동영상에는 width·height 속성을 넣거나 CSS aspect-ratio로 비율을 지정해 미리 자리를 확보합니다. 광고나 위젯이 들어갈 영역에는 최소 높이를 지정하고, 새 콘텐츠는 기존 콘텐츠 위가 아니라 아래에 추가합니다. Lazy load로 불러오는 이미지도 크기를 지정해 두면 이동이 생기지 않습니다.
개발 환경에서는 문제가 없어 보여도 실제 사용자 환경에서는 광고나 느린 네트워크 때문에 이동이 생길 수 있습니다. 페이지 스피드 인사이트의 필드 데이터로 실제 수치를 확인하고 진단 항목에서 이동을 일으킨 요소를 찾습니다. LCP·INP와 마찬가지로 75번째 백분위수 값으로 판정합니다.