코어 웹 바이탈 평가 CLS 0.1 초과 애드센스가 원인?!

안녕하세요. 취미 사진가 나라입니다.

HTML를 활용할 수 있는 티스토리, 워드프레스 등의 블로그를 운영하면서, 블로그를 꾸미고 조금이라도 빠르게 노출시킬 수 있도록 신경 쓰시는 블로거 분들도 많으실 것이라 생각합니다. 저 역시 그러하니까요.

구글의 PageSpeed Insights를 통해 '코어 웹 바이탈 평가' 수치를 보고 CLS(Cumulative Layout Shift) 수치가 0.1을 초과하는 경우가 있으시다면... 결론적으로 말씀드리면 애드센스가 원인일 가능성이 매우 큽니다.

이번 포스팅에서는 애드센스로 인해 발생된 코어 웹 바이탈 평가 CLS 0.1 초과 문제를 해결하는 방법을 소개해 드리겠습니다.

CLS(Cumulative Layout Shift) 란 무엇인가?

CLS는 누적 레이아웃 이동을 말합니다.

쉽게 설명하면... 웹 페이지를 읽으려 하는데, 갑자기 레이아웃 이동이 되거나 텍스트가 움직여 읽던 부분의 위치가 바뀌는 등의 경우를 말하는 것입니다. 

만약, 클릭해야 하는 버튼을 누르려는 찰나에 레이아웃이 이동되면서 누르려는 버튼이 다른 곳에 위치하게 된다면.... 사용자 입장에서는 큰 불편을 겪게 될 것입니다.

이렇듯 CLS는  페이지의 전체 수명 동안 발생하는 모든 예기치 않은 레이아웃 이동에 대해 가장 큰 레이아웃 이동 점수 버스트를 뜻합니다.

CLS 수치는 0.1 이하면 양호, 0.1 이상이 되면 개선을 필요로 하고, 0.25 이상이 되면 매우 취약하다는 뜻입니다. CLS 수치가 0.1이 초과되면 아래와 같은 개선 권장 메시지가 구글 서치콘솔에 나타납니다. 이 경우 구글 검색 순위에 영향을 줄 수 있으니 빠르게 해결하는 것이 좋습니다. 

애드센스 무엇이 문제인가...

애드센스를 블로그에 게시할 때 많은 분들이 상단 위치를 선호하고 있습니다.

아무래도 첫 애드센스 광고 노출이다 보니 클릭율도 높고, 상단 위치의 광고 CPC(클릭당비용)가 높은 이유 때문이기도 합니다.

그런데 이런 애드센스가 블로그 자체 서버에서 뿌려주는 것이 아닌 구글 서버에서 뿌려주는 것이니만큼 시차가 발생할 수밖에 없는데요.

그러다 보니 상단 광고가 곧바로 나오지 않고, 몇 초 후에 표출되면서 게시글을 아래로 밀어내는 문제가 발생되기도 합니다.

이 때문에 코어 웹 바이탈 평가의 CLS 수치가 0.1초를 넘어서서 주의/경고 표시를 하는 것이라 볼 수 있습니다.

CLS 0.1 초과 애드센스 문제 해결 방법은?

애드센스가 게시되면서 게시글을 아래로 밀어내는 이유가 반응형으로 설정되었기 때문입니다.

반응형은 브라우저, 모바일에 따라 자동으로 그 크기를 설정해 주는 장점이 있지만... 적용되는 데 있어 약간의 딜레이를 보이고 있기 때문입니다.

그래서, CLS 0.1초 초과 해결을 하기 위해서는 애드센스가 표출되는 칸을 미리 만들어 놓고, 그곳에 애드센스가 나오게 하면  됩니다.

방법은 크게 어렵지 않습니다.

티스토리 수익 연동 방식

티스토리에서 애드센스 연동 페이지로 연동하기를 하였다면, 데스크톱과 모바일 광고 사이즈 변경을 해주면 됩니다.

수익 → 애드센스 관리 → 광고 설정 → 본문 상단 → 수정

• PC : 728 x 90
• 모바일 : 300 x 250

이렇게 설정함으로써 애드센스 크기가 고정이 되어 CLS에 큰 영향을 끼치지 않게 됩니다.

티스토리 수동 방식 (※ 워드프레스 참고 사항)

우선 티스토리 관리자 페이지 → 스킨편집 → HTML 편집 → CSS 선택

하단에 아래의 코드를 넣어 줍니다.

.ad-container {
   width: 100%; /* Set to the width of your ad unit */
   height: 280px; /* Set to the height of your ad unit */
}

그리고 저장을 합니다.

다시 HTML을 선택하고....

<div class="ad-container">
   <ins class="adsbygoogle"
        style="display:inline-block"
        data-ad-client="ca-pub-YourAdSenseID"
        data-ad-slot="YourAdSlotID"></ins>
   <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
   </script>
</div>

수동으로 설정해 둔 애드센스 코드 위에 "ad-container"를  div로 씌웁니다.

이렇게 함으로써 페이지 레이아웃에서 애드센스가 표출된 공간을 미리 예약하고, 그 공간에서 애드센스가 표출되게 됩니다.

[참고*워드프레스의 경우 위 코드들을 사용자 CSS와  ad-inserter 플러그인을 이용하여 적용할 수 있습니다.*]

기타 해결 방법

PageSpeed Insights의 '코어 웹 바이탈 평가' CLS 측정이 첫 노출되는 페이지를 대상(스크롤 전 페이지)으로 측정하기 때문에, 애드센스를 상단에 노출시키지 않고, 첫 노출된 페이지 이후인 중간 부분부터 노출되게 하면 됩니다.

글을 마치며...

PageSpeed Insights의 '코어 웹 바이탈 평가' 수치가 좋을수록 사이트 검색율이 높고 유입되어 오는 방문자가 오래 머물 수 있다고 알려져 있지만, 실제 그러한지는 알 수 없습니다.

콘텐츠가 나쁘다면 아무리 블로그 코드들이 최적화되어 빠르다고 하여도, 금세 이탈하기 때문입니다.

따라서, PageSpeed Insights는 참고용으로만 보는 것이 좋으며, 너무 맹신하여도 안될 것입니다.

측정 서버조차 한국에서 있는 것이 아니라고도 하니, 당연히 수치가 떨어질 수밖에 없으니까요.