당신의 워드프레스 웹사이트가 구글 검색 순위에서 계속해서 밀리고 있다면, 혹시 CLS(Cumulative Layout Shift) 문제가 발생하고 있는 것은 아닐까요? 최근 구글의 정책 변화로 인해 CLS 문제가 지속적으로 대두되고 있는데, 이를 해결하지 않으면 검색 순위 하락은 물론 사용자 경험에도 악영향을 미칠 수 있습니다.
그렇다면 과연 CLS란 무엇이며, 이를 어떻게 해결할 수 있을까요? 오늘은 워드프레스 서치콘솔에서 CLS 문제를 진단하고, 실제적인 해결 방법을 알아보도록 하겠습니다.
| 목차 |
CLS란 무엇인가?
CLS(Cumulative Layout Shift)는 웹페이지 로딩 중에 발생하는 레이아웃 변화로 인해 사용자 경험에 부정적인 영향을 미치는 문제를 말합니다. 즉, 페이지가 로딩되는 동안 웹사이트의 모양이 계속해서 변하면 사용자들이 불편을 겪게 되는 것이죠.
CLS 문제의 원인
CLS 문제는 주로 동적 콘텐츠, 광고, 이미지 등이 페이지 로딩 중에 삽입되면서 발생합니다. 예를 들어, 반응형 애드센스 광고가 늦게 로딩되면서 다른 콘텐츠를 밀어내는 경우가 대표적입니다. 이렇게 변화하는 레이아웃으로 인해 사용자들이 의도치 않게 버튼을 누르거나 링크를 클릭하는 등의 문제가 발생할 수 있습니다.
CLS 문제의 영향
CLS 문제는 단순히 사용자 경험 악화에 그치지 않습니다. 구글은 2020년 5월부터 Core Web Vitals의 일부로 CLS를 평가하기 시작했는데, 이는 곧 검색 순위에도 영향을 미치게 됩니다. 즉, CLS 문제가 심각한 웹사이트는 구글 검색 결과에서 순위가 낮아질 수 있습니다.
그렇다면 과연 워드프레스 서치콘솔에서 CLS 문제를 어떻게 진단하고 해결할 수 있을까요?
워드프레스 서치콘솔 CLS 문제 해결하기?!
서치콘솔에서 CLS 문제 확인하기
워드프레스 웹사이트의 CLS 문제를 확인하려면 먼저 구글 서치콘솔에 접속해야 합니다. 서치콘솔에서 "Core Web Vitals" 보고서를 확인하면 CLS 점수가 표시되는데, 이 점수가 0.1을 초과하면 문제가 있다고 판단할 수 있습니다.
"구글은 CLS가 0.1을 초과할 경우 문제가 있다고 판단합니다. 이 경우 사용자 경험에 부정적인 영향을 미칠 수 있으므로 개선이 필요합니다."
구글 페이지 스피드로 CLS 확인하기
서치콘솔에서 CLS 문제가 확인되었다면, 구글 페이지 스피드 도구를 통해 보다 자세한 분석을 할 수 있습니다. 이 도구에서는 CLS 점수뿐만 아니라 다른 Core Web Vitals 지표들도 함께 확인할 수 있습니다.
제 워드프레스 웹사이트를 구글 페이지 스피드에 접속해 체크해 보니, CLS 점수가 0.13으로 측정되어 문제가 있다고 나왔습니다. 심지어 코어 웹바이탈 평가 자체도 실패했네요.
CLS 문제의 원인 파악하기
이 경우 CLS 문제의 주된 원인은 애드센스 광고로 인한 것으로 보입니다. 반응형 애드센스 광고가 늦게 로딩되면서 다른 콘텐츠를 밀어내는 현상이 발생했기 때문입니다.
CLS 문제 해결 방법
CLS 문제를 해결하기 위해서는 애드센스 광고의 위치를 고정하는 것이 가장 효과적입니다. 반응형 광고 대신 고정형 광고를 사용하면 레이아웃 변화를 최소화할 수 있습니다.
고정형 애드센스 광고 사용하기
애드센스에서 광고를 만들 때 반응형이 아닌 고정형 광고를 선택하면 됩니다. 고정형 광고는 너비와 높이가 고정되어 있어 레이아웃 변화를 줄일 수 있습니다. 일반적으로 280px 정도의 높이로 고정형 광고를 만들면 좋습니다.
하지만 고정형 광고를 사용하면 게재 가능한 광고 수가 제한되어 수익이 줄어들 수 있다는 단점이 있습니다.
애드센스 스타일로 광고 높이 고정하기
고정형 광고를 사용하기 어렵다면 애드센스 스타일에서 직접 광고의 높이를 고정할 수 있습니다. 애드센스 스크립트에 "display:block;height:280px"와 같이 높이를 지정하면 됩니다.
Ad Inserter로 광고 높이 고정하기
Ad Inserter 플러그인을 사용한다면 Misc - Display 메뉴에서 광고의 높이를 직접 설정할 수 있습니다. 앞서 언급한 280px을 여기에 입력하면 됩니다.
이렇게 애드센스 광고의 위치를 고정하면 CLS 문제를 해결할 수 있습니다. 실제로 테스트해 본 결과, 페이지의 애드센스 광고를 별도로 할당하여 CLS 문제를 해결할 수 있었습니다.
마무리
오늘 살펴본 바와 같이, 워드프레스 서치콘솔에서 CLS 문제를 진단하고 해결하는 방법은 다음과 같습니다:
- 서치콘솔: CLS 점수가 0.1을 초과하면 문제가 있다고 판단
- 페이지 스피드: CLS 점수와 Core Web Vitals 지표를 종합적으로 확인
- 원인 파악: 반응형 애드센스 광고가 주된 원인인 경우가 많음
- 해결 방법: 고정형 애드센스 광고 사용, 애드센스 스타일로 높이 고정, Ad Inserter로 높이 조절
이제 워드프레스 서치콘솔에서 CLS 문제를 진단하고 해결하는 방법을 알아보셨습니다. 앞으로 이 문제가 해결되어 검색 순위 상승과 더불어 사용자 경험 개선에도 도움이 되길 바랍니다. 궁금한 점이 더 있다면 언제든 문의해 주세요!
워드프레스 서치콘솔 CLS 문제를 해결하고 나서, 어떤 점이 달라졌나요? 앞으로 이를 어떻게 활용할 계획이신가요?