CLS Checker를 처음 사용하게 된 이유는 구글 콘솔 코어 웹 바이탈에서 개선이 필요한 URL이 계속 늘어났기 때문입니다. URL 개수는 표시되는데 어떤 요소가 실제 문제인지 확인하기 어려웠고, 페이지를 직접 살펴봐도 원인을 찾기 쉽지 않았습니다.
특히 OpenLiteSpeed와 LiteSpeed Cache를 사용하는 환경에서는 캐시가 개입되기 때문에 같은 페이지라도 상황에 따라 결과가 다르게 보이는 경우가 있었습니다. 이런 상황에서 도움이 되었던 것이 CLS Checker 확장 프로그램이었습니다.
목차
CLS 오류가 신경 쓰였던 이유
구글 콘솔에서는 CLS 문제가 발생한 URL 수를 보여주지만, 실제로 어떤 요소가 레이아웃을 밀어내는지까지 자세히 알려주지는 않습니다. 코어 웹 바이탈 보고서에 CLS 0.1 초과 문제가 나타나면 검색 결과 노출보다도 사용자 경험 측면에서 먼저 신경이 쓰였습니다.
페이지가 로딩될 때 화면이 갑자기 움직이면 방문자 입장에서도 불편하게 느껴질 수 있기 때문입니다. 제가 운영하는 워드프레스 사이트에서도 어느 시점부터 개선 필요 URL이 나타났고 원인을 추적하기 시작했습니다.
가장 먼저 의심했던 부분
여러 페이지를 비교해보니 문제가 발생한 시점과 자동 광고 설정 시기가 거의 비슷했습니다. 특히 애드센스 인페이지 광고를 활성화한 이후부터 CLS 수치가 올라가는 페이지가 늘어났습니다. 본문 상단에 광고가 늦게 삽입되면서 기존 콘텐츠를 아래로 밀어내는 현상이 발생했고, 이 과정이 레이아웃 이동으로 측정되고 있었습니다.
중간 광고는 큰 문제가 없었지만 상단 인페이지 광고는 CLS에 영향을 주는 경우가 있었습니다.
CLS Checker로 문제 페이지 확인
확장 프로그램을 설치한 뒤 페이지를 열고 측정을 시작했습니다. 먼저 캐시를 비운 뒤 페이지를 다시 불러와 측정하는 방식으로 확인했습니다. LiteSpeed Cache나 브라우저 캐시가 남아 있으면 정확한 확인이 어려운 경우가 있었기 때문입니다.
측정 기능을 실행하면 현재 페이지의 CLS 수치를 바로 확인할 수 있습니다.
어떤 요소가 CLS를 발생시키는지 확인
CLS Checker의 가장 편했던 부분은 문제가 발생한 위치를 바로 시각적으로 표시해 준다는 점이었습니다.
측정 결과에서 Toggle 버튼을 누르면 레이아웃 이동이 발생한 영역이 강조 표시됩니다. 페이지를 눈으로만 확인할 때는 찾기 어려웠던 부분도 쉽게 발견할 수 있었습니다.
제가 확인한 페이지에서는 본문 상단 광고 영역이 문제 위치로 표시됐습니다.
인페이지 광고가 원인이었던 사례
광고가 없는 상태에서는 CLS가 정상 범위였지만 인페이지 광고가 노출되는 순간 콘텐츠가 아래로 밀려났습니다.
애드센스 자동 광고 설정을 살펴보니 인페이지 광고가 활성화되어 있었고 해당 영역이 문제로 추정됐습니다.
설정을 변경한 뒤 다시 테스트했고, 이후 CLS 관련 경고가 더 이상 증가하지 않았습니다.
수정 후 나타난 변화
CLS Checker로 원인을 확인한 뒤 인페이지 광고를 조정하고 재검사를 진행했습니다. 그 이후 새롭게 발생하는 CLS 오류는 보이지 않았고, 코어 웹 바이탈 보고서에서도 개선 필요 URL이 점차 줄어드는 것을 확인할 수 있었습니다.
구글 콘솔은 반영까지 시간이 걸리기 때문에 바로 사라지지는 않았지만, 유효성 검사 이후 정상 상태로 변경되었습니다.
FAQ
CLS Checker는 무료인가요?
네. 크롬 확장 프로그램으로 설치 후 바로 사용할 수 있습니다.
CLS Checker 결과가 0.1 이상이면 문제가 있는 건가요?
일반적으로 0.1 이하가 권장되며 그 이상이면 원인 확인이 필요합니다.
CLS 오류가 광고 때문만 발생하나요?
아닙니다. 이미지 크기 미지정, 폰트 로딩, 동적 콘텐츠 삽입 등도 원인이 될 수 있습니다.
