AD Inserter CLS 오류는 상단 애드센스를 추가한 뒤부터 갑자기 발생하기 시작했습니다. 중간 광고나 하단 광고에서는 큰 문제가 없었는데 상단 영역에 광고를 넣은 이후부터 레이아웃 이동 수치가 올라가기 시작했고, 구글 서치 콘솔에서도 CLS 관련 경고가 계속 표시됐습니다.
처음에는 LiteSpeed Cache나 OpenLiteSpeed 캐시 문제라고 생각했는데 실제 원인은 광고가 로딩되면서 본문을 아래로 밀어버리는 구조 때문이었습니다. 특히 반응형 광고를 상단에 배치하면 광고 높이가 늦게 계산되면서 레이아웃 이동이 더 크게 발생하는 경우가 있었습니다.
검색을 해보니 대부분 광고 공간을 미리 확보하면 된다고 설명하고 있었고, 이후 AD Inserter CLS 오류를 줄일 수 있는 Display 설정을 직접 확인하게 됐습니다.
목차
처음에는 캐시 문제로 생각했던 이유
AD Inserter CLS 오류가 발생했을 때 가장 먼저 의심했던 것은 캐시 충돌이었습니다. 특히 OpenLiteSpeed 환경에서는 LiteSpeed Cache와 QUIC.cloud를 함께 사용하는 경우가 많고, 광고 코드 반영 속도도 일정하지 않은 경우가 있기 때문에 처음에는 광고 로딩 문제가 아니라 캐시 문제라고 생각하기 쉬웠습니다.
하지만 실제로는 광고 자체가 늦게 출력되면서 위쪽 콘텐츠를 아래로 밀어내고 있었고, 이 때문에 CLS(Cumulative Layout Shift) 수치가 증가하고 있었습니다. 특히 상단 광고 영역은 사용자가 페이지에 진입하자마자 보게 되는 위치라서 레이아웃 이동 영향이 더 크게 느껴졌습니다.
AD Inserter CLS 오류를 먼저 측정했던 과정
원인을 정확하게 확인하기 위해 먼저 CLS 측정부터 진행했습니다. 처음에는 PageSpeed Insights만 사용했는데 실제 이동 위치를 찾는 데는 시간이 꽤 걸렸습니다. 이후 Webvitals 사이트와 CLS Checker 확장 프로그램을 같이 사용하니 어떤 위치에서 이동이 발생하는지 훨씬 빠르게 확인할 수 있었습니다.
Webvitals 사이트에서는 주소를 입력한 뒤 CLS 측정을 진행할 수 있었고, 분석 시간이 꽤 길게 걸리는 경우도 있었습니다.
CLS 측정 결과에서 확인했던 부분
측정이 완료되면 기기별 CLS 수치를 확인할 수 있었습니다. 처음에는 단순 숫자만 나오는 줄 알았는데 실제로는 어떤 영역에서 레이아웃 이동이 발생했는지까지 같이 표시됐습니다.
AD Inserter CLS 오류가 발생했던 부분은 대부분 상단 광고 영역 근처였고, 광고가 늦게 생성되면서 본문이 아래로 밀리는 구조였습니다.
CLS Checker 확장 프로그램이 더 편했던 이유
Webvitals 사이트는 결과가 자세하게 나오지만 측정 시간이 길게 걸리는 편이었습니다. 그래서 이후에는 CLS Checker 확장 프로그램도 같이 사용하기 시작했습니다.
확장 프로그램을 브라우저 상단에 고정해두면 현재 페이지 CLS 상태를 바로 확인할 수 있었고, 페이지를 새로 열 때마다 빠르게 테스트할 수 있었습니다. 특히 AD Inserter CLS 오류처럼 광고 위치 문제를 확인할 때는 훨씬 편하게 느껴졌습니다.
실제 레이아웃 이동 위치를 확인했던 과정
CLS Checker 확장 프로그램에서 Toggle 버튼을 누르면 실제 이동 영역을 시각적으로 확인할 수 있었습니다.
처음에는 메뉴 영역 문제라고 생각했는데 실제로는 상단 광고 위치에서 이동이 발생하고 있었습니다. 광고가 출력되는 순간 본문이 아래로 밀리면서 AD Inserter CLS 오류가 발생하고 있었고, 특히 모바일에서 이동 폭이 더 크게 나타나는 경우도 있었습니다.
AD Inserter CLS 오류를 줄이기 위해 수정했던 Display 설정
원인을 확인한 뒤에는 AD Inserter 내부 설정을 다시 확인했습니다. 처음에는 광고 코드만 수정하려고 했는데 실제로는 Display 설정 안에서 광고 공간을 미리 확보하는 방식이 더 중요했습니다.
Misc 메뉴 안으로 들어가면 Display 설정을 볼 수 있었고 여기서 Width와 Height 값을 직접 입력할 수 있었습니다. 광고 크기에 맞는 공간을 미리 확보하니 광고가 늦게 로딩되더라도 본문이 갑자기 밀리지 않기 시작했습니다.
반응형 광고보다 고정 크기 광고가 안정적이었던 이유
처음에는 반응형 광고를 계속 사용했는데 AD Inserter CLS 오류가 반복적으로 발생하는 위치에서는 고정 크기 광고가 훨씬 안정적이었습니다. 반응형 광고는 상황에 따라 높이가 달라질 수 있기 때문에 미리 확보한 공간보다 더 크게 출력되는 경우가 있었습니다.
반면 고정 크기 광고는 Width와 Height를 정확하게 맞춰둘 수 있어서 레이아웃 이동이 훨씬 적게 발생했습니다. 특히 OpenLiteSpeed + LiteSpeed Cache 환경에서는 광고 캐시와 화면 렌더링 타이밍이 같이 영향을 주는 경우가 있어서 고정 크기 광고가 더 안정적으로 느껴졌습니다.
설정 후 체감했던 변화
Display 설정 이후에는 AD Inserter CLS 오류 수치가 눈에 띄게 줄어들기 시작했습니다. 처음에는 상단 광고가 로딩될 때 본문이 크게 흔들렸는데 광고 공간을 미리 확보한 뒤부터는 레이아웃 이동이 거의 발생하지 않았습니다.
그리고 구글 서치 콘솔에서도 CLS 관련 경고가 점차 줄어드는 흐름을 확인할 수 있었습니다. 특히 모바일 화면에서 광고가 갑자기 밀려 내려오던 현상이 줄어든 부분이 체감상 가장 크게 느껴졌습니다.
FAQ
AD Inserter CLS 오류는 왜 발생하나요?
상단 광고가 늦게 로딩되면서 본문을 아래로 밀어내면 레이아웃 이동이 발생할 수 있었습니다.
AD Inserter CLS 오류는 반응형 광고 때문일 수도 있나요?
가능했습니다. 반응형 광고는 높이가 일정하지 않아서 미리 확보한 공간보다 더 크게 출력되는 경우가 있었습니다.
OpenLiteSpeed 환경에서는 왜 CLS 변화가 더 크게 느껴졌나요?
LiteSpeed Cache와 광고 렌더링 타이밍이 같이 영향을 주는 경우가 있었고, 캐시 반영 속도 차이 때문에 모바일에서 이동 폭이 더 크게 보이기도 했습니다.
