구글 페이지 Adsense 성능 개선 방법

에드센스를 통한 블로그를 운영하다 보면, 항상 에드센스 속도에 늪에 빠지게 됩니다. 이번 포스팅 에서는 구글 성능 지표를 낮추는 Adsense의 Lazy Load 를 도입하여 속도를 올리는 방법을 살펴 보겠습니다.

01. 왜 느려지고 어떻게 개선할 수 있을까요 ?

일반적으로, 블로그를 개설 했을때 구글 페이지 속도는 90이 넘는 점수를 보이게 됩니다. 그러다가, Adsense 를 도입하는 순간 점수가 급격하게 감소하는 것을 경험하게 됩니다.

이를 통해 알수 있는 것은, 에드센스를 불러오는 작업 자체가 느리다는 것을 알 수 있습니다.
그런데, 에드센스는 구글에서 제공해주는 서비스 입니다. 우리가 직접 속도를 개선할 수 없다는 것이죠.

그렇다면, 우리는 어떻게 개선 할 수 있을까요 ?

우리는 이미지에 주로 사용되는, LazyLoad 기술을 이용하여 속도를 줄일 계획 입니다.

[출처] https://web.dev/browser-level-image-lazy-loading/

Lazyload란 사용자가 페이지에 접근할 때, 전체 내용을 준비해서 보여주는 것이 아닌, 사용자의 화면 중심으로 데이터를 로딩 하는 기법 입니다. 이를 통해, 페이지에 접근할때 출력되는 광고를 사용자의 화면 중심으로 보이게 할 수 있습니다. 이를 통해서, 사용자 관점에서 성능을 높일 수 있습니다.

02. Adsense.js 개선 적용 방법

본 방식은 워드프레스 + AD Inserter 을 병행해서 사용 하는 방법 입니다.

(01) AD Inserter 에서 광고 코드 중 상단의 Pub 코드를 제거 합니다.

[기존]

[변경]

(02) [설정] -> [Footer] 에 아래 코드를 추가 합니다.

<script type='text/javascript'>
//<![CDATA[
var lazyadsense2=!1;window.addEventListener("scroll",function(){if(0!=document.documentElement.scrollTop&&!1===lazyadsense2||0!=document.body.scrollTop&&!1===lazyadsense2){var e,a;(e=document.createElement("script")).setAttribute("data-ad-client","ca-pub-xxxxxxxxxxxxxxxxx"),e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",(a=document.getElementsByTagName("script")[0]).parentNode.insertBefore(e,a),lazyadsense2=!0}},!0);
//]]>
</script>

[출처] https://www.techyleaf.in/2021/08/lazyload-adsense-in-blogger.html

이렇게 하면 설정 완료 되었습니다.

03. 성능 비교

[도입 전]

[도입 후]

확실한 성능 효과 차이가 발생 됨을 알수 있습니다.
(접근성 점수가 달라졌는데, 이는 제가 테스트 후 이미지를 날려먹어서 ^^.. 스킨이 변경 되어 그렇습니다. )