CLS 해결 방법 광고 높이 설정 확인하는 법
요즘 저의 웹사이트 CLS 때문에 코어웹바이탈이 무너졌습니다. 그리고 사실 코어웹바이탈이 무너진 이후에는 구글 서치 콘솔에서 URL을 Google에 등록하려고 해도 잘 되지가 않는 것 같습니다. 이에 따라 한 가지 CLS 해결 방법인 광고 높이 설정 확인하는 법 알아보겠습니다.
구글 서치 콘솔에서 줄어든 색인 생성 수
2024년 10월 29일까지 생성된 색인의 수는 170개였습니다. 그때까지 포스팅 된 수가 150여개 정도 되니, 그래도 색인 수는 정상적으로 생성이 되고 있구나 라고 생각을 했습니다.
하지만, 10월 30일을 기점으로 138개로 줄었다가, 현재 생성된 색인 수는 14개에 불과하게 되었습니다. 글이 검색 엔진에 노출이 되지 않으니 당연히 수익도 많이 줄었습니다.
그런데, 신기한 것은 URL이 Google에 등록되어 있지 않음으로 뜬 URL을 테스트까지 해서 색인 생성 요청까지 마쳤음에도 여전히 URL이 Google에 등록되어 있지 않음으로 계속해서 나온다는 것입니다. 며칠이 지나서 확인을 해봐도 마찬가지였습니다.
무너진 코어웹바이탈
구글 서치 콘솔의 코어웹바이탈을 확인해 보았습니다. 데스크톱 코어웹바이탈에서 10월 30일에 변화가 있기는 했습니다. 느린 URL의 수가 팍 줄어든 것입니다. 그런데 보통 느린 URL이 줄어들면 더 좋은 것 아닌가요?
모바일 코어웹바이탈은 데이터 부족으로 그래프가 나오지 않았습니다.
PageSpeed Insights
구글 PSI 웹사이트에서 저의 위의 웹사이트 성능을 확인해 보았습니다. 역시 CLS가 빨간색 위에 가 있는 것을 확인할 수 있습니다.
CLS는 웹페이지가 떴을 때 페이지 요소들의 이동하는 것을 의미하는데, 높으면 높을수록(빨간색) 사용자 경험 측면에 좋지 않는 영향을 미칩니다.
사용자가 웹페이지에 들어와서 이제 막 콘텐츠를 읽거나, 보려고 하는데 이동이 있어 갑자기 뒤로 밀리거나 하면 방문자의 집중이 흔들리면서 안 좋은 경험을 하게 되는 것은 구글이 정말 안 좋아합니다.
그래서 우리는 사용자 경험을 높이기 위해서 CLS를 잘 관리해야 하는 것입니다. 일반적으로 녹색 부분에 수치가 들어가면 잘 관리하고 있는 것으로 생각하시면 됩니다.
CLS 해결 방법
워드프레스 등에서 기본으로 제공하는 폰트가 아닌 예쁜 폰트를 외부에서 다운로드 받아 설치한 경우에 처음에 기본 폰트로 웹페이지가 로딩됐다가 갑자기 지정된 폰트로 변경되는 것을 보신 경험이 있으실 겁니다. 그래서 저는 폰트를 삭제하고 기본으로 쓰고 있습니다.
그 중에서 광고 레이아웃은 정말 CLS에 많은 영향을 주는 것 같습니다. 광고 레이아웃으로 인해 CLS에 영향을 줄 경우에는 사전에 그 자리에 광고가 들어갈 자리를 지정해 놓고, 그 여유폭까지 생각하는 것이 중요합니다.
CLS 해결 방법 중에 하나인 광고 높이 설정이 바로 그것입니다.
웹사이트 블로그 목록이 나오는 페이지의 사이드바 광고입니다. 광고 크기는 300*600로 반응형 광고입니다.
광고 높이 설정 방법
CLS 해결 방법은 광고가 나오는 자리를 처음부터 지정해 둠으로서, 나중에 광고가 기존 콘텐츠(텍스트, 썸네일, 사진 등) 위치가 겹침에 따라 이동이 일어나는 것을 막기 위함입니다.
자리를 처음부터 지정할 때 특히 광고 길이 같은 경우에는 조금 더 여유폭을 두는 것을 추천 드립니다. 그래서 위의 광고의 경우 세로 길이 600이지만 저는 610으로 설정을 해 두었습니다.
처음에 괜찮았던 CLS가 수치가 올라가게 되면, 설치한 폰트, 삽입 이미지 그리고 광고 위치를 한번 살펴볼 필요가 있습니다. 특히 광고의 경우 위와 같이 사이즈 크기에 따른 높이도 한번 확인해 보시기 바랍니다.
광고 높이 설정 위치
워드프레스 관리자 화면으로 들어와서 [모양]-[위젯]에 들어갑니다. 광고 코드가 들어가는 공간을 만드는 곳을 클릭하고 Advanced 버튼을 누르세요. 그러면 Structured Setting에서 최소 높이를 설정하실 수 있습니다.
위의 사진 중에 빨간색 네모를 참고하시면 이해가 쉽게 되실 겁니다.
마무리
오늘은 CLS 해결 방법 중에 한 가지인 광고 높이 설정에 대해서 알아보았습니다. 아무래도 웹사이트가 처음 로딩이 될 때 가장 먼저 눈에 띄는 사이드바 광고 위주로 설명을 드려 보았습니다.
사실 이렇게 확인을 한다고 해서 무조건 CLS가 나아지는 것은 아닙니다. CLS의 경우 너무나 다양한 원인이 있어 사실 완벽하게 수정하기가 여간 어려운 것이 아닙니다. 저도 하나씩 시도하고 확인하고 있는 중입니다.
혹시나 저와 같은 상황에 있으신 분들을 위해 저의 경험담을 올려 보았습니다. 글 읽어 주셔서 감사합니다.
