티스토리 애드센스 CLS 문제: 0.1 초과(모바일) 해결 방법? 경험담

티스토리 최상단(제목 위, 블로그 타이틀 위)에 큼지막한 애드센스 광고를 달았습니다. 모바일에서는 320 x 100 크기로 작게 출력되도록 했는데요, 텍스트로 광고 클릭을 요청할 수 없으니 시각적으로라도 존재감을 어필하는 것이지요. (CTR이 2% 밑으로는 절대 떨어지지 않는 마법같은 일이 일어나고 있는데, 언제까지 이어질지 모르겠습니다.)

 

구현은 예쁘게 된 것 같은데...

 

▲ 구글 서치 콘솔에서 쓰나미가 몰려 오더군요. 팍 솟구치는 것을 보니 골치가 아프게 생겼습니다.

 

이게 어디서 어떻게 나오는 에러 메세지인가 하면...

 

▼ 구글 서치 콘솔 - 코어 웹 바이탈 - 모바일 파트 - 보고서 열기 순으로 들어가서

 

▼ 개선이 필요함 항목의 체크박스를 찍어 보면 "CLS 문제: 0.1 초과(모바일)" 이라는 항목이 보입니다. 해당 항목을 클릭하면...

 

▼ 삐쭉 솟은 그래프를 볼 수 있는 것이지요.ㅠㅠ

▲ 원인 파악을 하기 위해, 하단의 예시 URL을 클릭했습니다. 그러면 오른쪽 사이드바가 나타나는데, PAGESPEED INSIGHTS를 클릭해 보세요. (직링크 : https://pagespeed.web.dev/ )

 

 

▼ Cumulative Layout Shift (CLS)... 0.05 나오는데? 모르겠어서 구글로 원인을 찾아 봤습니다.

 

https://seogilang.tistory.com/1479

https://limitsend.tistory.com/entry/구글-서치-콘솔-CLS초과-문제-해결-방법

▲ 공통적으로 제시하시는 방법 : height 값(높이)를 줘라.

https://web.dev/cls/

그리고 애드센스를 상단에 배치할 경우 CLS 값에 영향을 미칠 수 있다고 합니다.

https://support.google.com/webmasters/answer/9205520

(구글에서 제시하는 CLS 값 좋음/개선 필요/느림의 기준점은 위의 글에서 확인하시기 바랍니다.)

 

▼ 아무튼, 구글 PageSpeed Insights 화면으로 돌아와 휴대전화 탭에서 스크롤을 좀 더 내려보니, "성능 문제 진단하기" 카테고리에서 CLS 수치가 0.188까지 떨어졌더군요. 이거였구나.

 

▼ 스크롤을 더 내려서 CLS 항목들의 내용을 봐도 height 관련된 것들이 주로 나오더군요. 그래서 조치한 결과 휴대전화의 CLS 수치가 0.023까지 떨어졌습니다. 0.1 미만으로 나왔으니 된거죠?

 

▼ 수정 결과 확인 요청을 넣었습니다. 기다리는 일만 남았네요.

 

위에 링크했던 티스토리 블로그들은 애드센스 코드에 height 속성을 부여하는 쪽으로 가닥을 잡았는데, 저는 그것만으로 해결이 안 되길래 광고를 감싸는 <div> 태그에도 height 값을 지정해 줬습니다.

 

사실, 애드센스 CPC 급락 증상이 없었으면 모르고 넘어갔을 수도 있는 문제였습니다. 애드센스 CPC가 0.05부터 0.08까지 급락하면서 수익이 반토막 미만으로 떨어지길래 구글 서치 콘솔을 살폈는데, 우연히 CLS 문제: 0.1 초과(모바일) 문제가 순간적으로+광범위하게 뜨기 시작한 것을 발견한 거예요.

 

참고가 되셨으면 좋겠습니다.

 

▲ CLS 문제 0.1 초과 해결 완료 인증

 

※ 참고할만한 글

 - https://www.thinkwithgoogle.com/intl/ko-kr/

(광고)