로그인

검색

Extra Form
추천지수 7

애드센스가 원래 비동기로 작동을 하게 되어 있습니다. 그런데 실제로 애드센스를 페이지에 출력을 해보면 애드센스로 인한 컨텐츠 로딩 속도가 아주 약간 영향이 있습니다.

 

이를 완전히 컨텐츠가 뜬 후 로딩 될 수 있도록 조치를 할 수 있습니다. 오픈소스  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> 

 

아래 스크립트를 제거한 위 부분만 넣어주는 것으로 변경합니다.

 

애드센스,애드핏이 컨텐츠가 완전히 로딩 된 직후에 뜨게 됩니다. 애드센스와 애드핏으로 인한 페이지 로딩 지연이 없어져 항상 빠른 페이지 출력이 가능해집니다.

 

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
2 추천

사이트로 수익내기(48)

사이트로 수익을 내는 방법에 관한 이야기를 다룹니다.

  1. read more
  2. Read More
  3. 애드블록 플러스 설치했습니다. 9

    Date2021.02.07 Views226 Votes2
    Read More
  4. Read More
  5. Read More
  6. Read More
  7. Read More
  8. Read More
  9. Read More
  10. Read More
  11. Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Read More
  17. Read More
  18. Read More
  19. 클릭몬 실적 리포트 확인은 언제 ?

    Date2020.08.29 Views113 Votes2
    Read More
  20. Read More
  21. Read More
Prev 1 2 3 Next
/ 3