애드센스가 원래 비동기로 작동을 하게 되어 있습니다. 그런데 실제로 애드센스를 페이지에 출력을 해보면 애드센스로 인한 컨텐츠 로딩 속도가 아주 약간 영향이 있습니다.
이를 완전히 컨텐츠가 뜬 후 로딩 될 수 있도록 조치를 할 수 있습니다. 오픈소스 LAB.js 를 사용해서 반복적으로 실행되는 스크립트도 1번만 실행되도록 하면서 모든 컨텐츠가 뜬 후 애드센스가 요청되도록 할 수 있어 컨텐츠가 뜨는 속도가 더 빨라지게 할 수 있습니다.
반대로 이야기하면 애드센스는 나중에 뜹니다. 카카오 애드핏도 함께 처리가 가능합니다.
저희 라이믹스 꿀팁에 나오는 구글 애드센스, 카카오 애드핏 광고가 나오는 것을 유심히 살펴보시면 컨텐츠 뜬 직후에 뜹니다.
https://github.com/getify/LABjs
위 자료 중 LAB.js 파일 하나만 있으면 됩니다.
파일을 다운받아서 사이트에 업로드 해 둡니다. 저희는 레이아웃에서 해당 파일을 불러올 것이라 레이아웃의 /js 폴더에 업로드 했습니다.
레이아웃에
<script src="js/LAB.js"></script>
우선 LAB.js 를 불러오게 위 스크립트를 작성해 줍니다.
그리고
<script>
jQuery(function($) {
$(window).load(function() {
$LAB
.script("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js")
.wait(function () {
var adn = jQuery('.adsbygoogle').length;
if (adn > 0) {
for (var i = 0; i < adn; i++) {
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
});
});
});
</script>
원래 구글광고의 스크립트는
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890"
data-ad-slot="12345678"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
위와 같이 되어 있는데요.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
는 필요가 없습니다. 매번 광고단위 마다 이게 실행되는데 이제 위에 작성한 스크립트에서 딱 한번만 실행됩니다.
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
이것도 필요가 없습니다. 위에 작성된 스크립트에서 구글 애드센스 갯수를 확인한 다음 광고 갯수 만큼 반복해서 실행되게 코드가 작성되어 있습니다.
지금 말씀 드린 두가지를 제거한 구글 광고코드로 바꿔서 다시 넣어주세요.
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890"
data-ad-slot="12345678"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
이부분만 넣어주면 됩니다. 모든 광고를 다 위 부분만 남기는 것으로 다 바꿔 줍니다.
저희는 카카오 애드핏도 마찬가지로 함께 처리했습니다.
<script>
jQuery(function($) {
$(window).load(function() {
$LAB
.script("//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js")
.wait(function () {
var adn = jQuery('.adsbygoogle').length;
if (adn > 0) {
for (var i = 0; i < adn; i++) {
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
})
.wait(function () {
var kadn = jQuery('.kakao_ad_area').length;
if (kadn > 0) {
$LAB.script("//t1.daumcdn.net/adfit/static/ad.min.js")
}
})
});
});
</script>
구글 애드센스 광고코드는 위에 말씀 드린
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890"
data-ad-slot="12345678"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
의 부분만
카카오 애드핏 또한
<ins class="kakao_ad_area" style="display:none;"
data-ad-unit = "DAN-***********"
data-ad-width = "320"
data-ad-height = "100"></ins>
아래 스크립트를 제거한 위 부분만 넣어주는 것으로 변경합니다.
애드센스,애드핏이 컨텐츠가 완전히 로딩 된 직후에 뜨게 됩니다. 애드센스와 애드핏으로 인한 페이지 로딩 지연이 없어져 항상 빠른 페이지 출력이 가능해집니다.
