블로그에 들어갔을 때 갑자기 화면이 덜컥거리며 글자가 아래로 밀리는 경험, 한 번쯤 해보셨을 거예요. 이걸 CLS(누적 레이아웃 변경)라고 부르는데, 사용자 입장에서도 불편하지만 검색 엔진 점수에도 꽤 안 좋은 영향을 미쳐요. 오늘은 광고나 이미지 로딩 때문에 생기는 이 문제를 어떻게 하면 깔끔하게 해결할 수 있는지 이야기해볼게요.
CLS 점수가 검색 순위에 미치는 진짜 영향
CLS는 말 그대로 사용자가 페이지를 보고 있는 중에 예기치 않게 레이아웃이 바뀌는 정도를 말해요. 페이지가 처음 열릴 때 콘텐츠가 이리저리 움직이면 정신이 없잖아요? 이 수치가 높으면 구글이나 네이버 같은 검색 엔진은 “이 사이트는 사용자에게 불편해”라고 판단하게 돼요.
만약 CLS 점수가 기준치를 넘어가면 상위 노출은 정말 힘들어질 수 있어요. 요즘 검색 엔진들은 페이지의 품질을 아주 중요하게 보거든요.
왜 자꾸 레이아웃이 변경되는 걸까요?
제 블로그도 최근에 점검해보니 상단 메뉴 바로 아래에 있는 이미지 때문에 점수가 깎이고 있었어요. 이미지가 뒤늦게 로딩되면서 자리를 잡느라 밑에 있던 글들을 밀어내버린 거죠. 이렇게 되면 CLS 수치가 올라가게 됩니다.
이 문제를 해결하려고 상단에 있는 요소들을 하나씩 뜯어고쳤는데요, 보통 이런 현상이 생기는 이유는 대략 정해져 있어요.
| CLS가 생기는 주된 이유 | 해결하는 방법 (기술 팁) |
|---|---|
| 동적 광고나 위젯이 늦게 뜰 때 | CSS로 미리 높이와 너비를 지정해서 자리 맡아두기 |
| 이미지 크기를 안 적었을 때 | HTML 태그에 width, height 꼭 적어주기 |
| 웹 폰트가 깜빡거릴 때 | font-display: swap 같은 속성 활용하기 |
작은 움직임도 놓치지 마세요
사실 제 블로그의 CLS 값은 0.006 정도로 아주 작았어요. 통과 기준인 0.1보다 훨씬 낮아서 크게 걱정할 수준은 아니었죠. 하지만 이런 작은 움직임들이 모여서 결국 SEO 점수에 미묘한 차이를 만들기 때문에, 미리미리 잡아두는 게 마음 편해요. 성능 최적화는 이렇게 하나씩 고쳐나가는 과정인 것 같아요.
무엇부터 고쳐야 할까요?
레이아웃이 왜 바뀌는지 범인을 찾아야 해요. 가장 먼저 의심해볼 건 ‘움직이는 요소’들이에요. 0순위로 상단에 배치된 요소들을 점검해보세요. 화면 위쪽이 흔들리면 사용자가 바로 알아채기 때문에 CLS 점수에 정말 큰 타격을 줍니다.
동적 광고가 범인일 때 해결하는 방법
광고가 화면을 밀어내는 과정
우리가 흔히 쓰는 광고들은 페이지가 다 열리고 나서 나중에 뿅 하고 나타나는 경우가 많아요. 이때 광고가 들어갈 자리가 비워져 있지 않으면, 광고 크기만큼 글 내용이 아래로 훅 내려가게 되죠.
✔ 예를 들어, 글을 읽고 있는데 갑자기 광고가 뜨면서 보고 있던 줄이 아래로 도망가는 상황이에요.
✔ 물론 자동 광고가 상단과 하단에 번갈아 나오면 평균 점수는 괜찮게 나와서 코어 웹 바이탈 테스트를 통과할 수도 있어요.
테스트를 10번 해서 7번 정도만 통과하면 합격이거든요. 상단에만 계속 광고가 뜨지 않게 조절하면 CLS 문제를 어느 정도 피할 수는 있어요.
광고 자리 미리 맡아두기 (가장 확실한 방법)
가장 좋은 방법은 광고가 들어올 자리를 미리 찜해두는 거예요. 영역을 미리 확보해두면 광고가 늦게 뜨든 말든 레이아웃은 그대로 유지되거든요.
그냥 광고가 들어갈 위치와 크기를 미리 정해주면 끝나요.
CSS에서 min-height(최소 높이)나 width 같은 속성을 써서 공간을 비워두세요. 이게 CLS를 잡는 핵심이에요. 빈 공간이 이미 있으니 광고가 로딩되어도 콘텐츠가 밀려날 일이 없겠죠?
이렇게 최적화 작업을 해두면
광고가 아무리 많이 떠도 화면은 흔들리지 않아서 정말 깔끔해요.
검색 엔진 입장에서 CLS는 꽤 중요한 문제예요. 어렵게 생각하지 말고 ‘사용자가 보기 편하게 만든다’고 생각하면 쉬워요. 사용자 경험이 좋아지면 SEO 점수는 자연스럽게 따라오니까요.
Q: 0.1 점수 기준은 어떻게 계산하는 건가요?
A: 얼마나 화면이 많이 바뀌었는지(영향 비율)와 얼마나 멀리 이동했는지(거리 비율)를 곱해서 계산해요. 결과가 0.1보다 작으면 ‘아주 좋음’ 상태니까 안심하셔도 돼요.
Q: 광고 크기가 다 제각각인데 어떻게 자리를 잡죠?
A: 들어올 수 있는 가장 큰 광고 사이즈를 기준으로 공간을 잡아두는 게 안전해요. 모바일이랑 PC 화면 크기에 맞춰서 따로따로 설정해주면 더 완벽하고요.
Q: 고치고 나면 언제 반영되나요?
A: 테스트 도구에서는 바로 점수가 좋아지지만, 네이버나 구글이 실제 사용자 데이터까지 수집해서 “어? 좋아졌네” 하고 인식하는 데는 보통 28일 정도 걸려요. 느긋하게 기다리시면 됩니다.
