애드센스 | 타사 코드 영향 줄이기 Lazyload
최상위 콘텐츠가 로드된 후에 애드센스 스크립트가 로드되도록 애드센스 스크립트를 비동기식으로 지연시켜 블로그의 속도를 높이는 방법입니다.
사이트 속도는 광고를 표시하기 위해 삽입한 애드센스 코드로 인해 애드센스 광고를 게시하기 전보다 애드센스 광고를 게시한 후 사이트를 로드하는 데 시간이 오래 걸리고 점수가 낮아지는데, 이 문제는 최상위 콘텐츠가 로드된 후에 애드센스 스크립트가 로드되도록 애드센스 스크립트를 비동기식으로 지연시키면 해결할 수 있습니다.
Lazyload AdSense 적용
기존 자동광고 애드센스 코드를 삭제하고 아래 코드의 표시된 부분을 자신의 ca-pub으로 교체한 후 붙여넣으세요.
<script>/*<![CDATA[*/
var lazyadsense = false;
window.addEventListener(
"scroll",
function () {
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
(function () {
var ad = document.createElement("script");
var crs = document.createAttribute("crossorigin");
crs.value = "anonymous";
ad.setAttributeNode(crs);
ad.async = true;
ad.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890xxxxxx";
var sc = document.getElementsByTagName("head")[0];
sc.parentNode.insertBefore(ad, sc);
})();
lazyadsense = true;
}
},
true
);
/*]]>*/</script>기존 광고 코드는 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-01234567890XXXXX" crossorigin="anonymous"></script>와 같은 형태로 </head> 또는 </body> 앞에 삽입하였을 것입니다.
위 작업을 완료했다면 PageSpeed Insights로 사이트 속도를 확인해보세요. 성능 항목에서 '타사 코드의 영향 줄임' 부분에 애드센스 관련 항목이 표시되지 않고 성능의 점수가 20~30점의 향상한 것을 확인할 수 있습니다.
올바른 애드센스 광고 단위 작성
아래와 같이 광고를 추가하면 추가된 광고마다 애드센스 adsbygoogle.js가 로드되므로 블로그를 로드하는 데 시간이 오래 걸리고 태그 오류의 원인이 될 수 있습니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-01234567890XXXXX"crossorigin="anonymous"></script>
<!-- Google Ads -->
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-01234567890XXXXX"
data-ad-slot="12345XXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>위 코드에서 표시된 부분은 이미 추가했으므로 광고 단위에 붙어 있는 코드는 필요하지 않습니다. 각 광고 단위 삽입 시 표시된 부분을 삭제하고 추가하세요.