회원보드

[money] JS - 애드센스 로드 빠르게 (= 애드센스 로딩 속도 개선) ★

4,689

목록 글쓰기

그누보드5 기준으로 설명. (참고로, 저는 방법2 사용 중)

방법1, 방법2 둘 다 원리는 동일. 단, 로드 이벤트 적용 방식만 다를 뿐.

즉,

adsbygoogle.js 외부 스크립트는 한번만 상단에 추가.

adsbygoogle = window ... 코드는 배너 개수만큼 하단에 추가.

방법1

비동기식 애드센스 코드에서 파란색 코드만 남기고 빨간색 <script> 코드는 삭제 후 추가

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

style="display:inline-block;width:336px;height:280px"

data-ad-client="ca-pub-○○○○○○○○○○○○"

data-ad-slot="○○○○○○○○○○"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

head.sub.php 파일안의 </head> 태그 바로 위에 아래 파란색코드 추가

방법1 - 애드센스 원본 코드 사용



<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

방법2 - 애드센스 로드 지연 코드 사용



<script type='text/javascript'>

//<![CDATA[

// Lazy Load AdSense

var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);

//]]>

</script>

head.sub.php 파일안의 <body> 태그 안에 아래 파란색코드 추가

<body<?php echo isset($g5['body_script']) ? $g5['body_script'] : ''; ?> onLoad="initialize_page();">

tail.sub.php 파일 </body> 바로 위쪽에 아래 코드 추가

<script>

function initialize_page() {

var ad_cnt = $('.adsbygoogle').length;

if (ad_cnt > 0) {

for(var i=0; i<ad_cnt ; i++) {

(adsbygoogle = window.adsbygoogle || []).push({});

}

}

}

</script>

※ 한 페이지에 노출되는 구글배너 개수만큼 각 라인 추가

정보출처: https://technosmarter.com/js/google-ads-load-after-page-has-loaded.php

방법2 (저는 이 방법 적용)

비동기식 애드센스 코드에서 파란색 코드만 남기고 빨간색 <script> 코드는 삭제 후 추가

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

style="display:inline-block;width:336px;height:280px"

data-ad-client="ca-pub-○○○○○○○○○○○○"

data-ad-slot="○○○○○○○○○○"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

PS. 별도의 파일로 만든 후, 인클루드 형태로 사용 가능.

사용 중인 head.sub.php 파일 상단 <head> 태그 안에 아래 코드 추가.

방법1 - 애드센스 원본 코드 사용



<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

방법2 - 애드센스 로드 지연 코드 사용



<script type='text/javascript'>

//<![CDATA[

// Lazy Load AdSense

var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);

//]]>

</script>

tail.sub.php 파일 </body> 바로 위쪽에 아래 코드 추가.

<script>

$(window).load( function() {

var ad_cnt = $('.adsbygoogle').length;

if (ad_cnt > 0) {

for(var i=0; i<ad_cnt ; i++) {

(adsbygoogle = window.adsbygoogle || []).push({});

}

}

});

</script>

PS.

그누보드5 <head> 태그 위치

① 테마 사용 X : /head.sub.php

② 테마 사용 O : /theme/사용테마/head.sub.php

그누보드5 </body> 태그 위치

① 테마 사용 X : /tail.sub.php
② 테마 사용 O : /theme/사용테마/tail.sub.php

회원보드 관련글

코멘트입력

목록 글쓰기


분류	제목



sports	카타르, 승부차기로 우즈베키스탄 제압하고 2023 아시안컵 4강 진출

talk	대한민국 축구 대표팀의 실질적 주장은 누구?

sports	토트넘, 경기 막판 에버튼에 통한의 동점골 허용

life	12:00 AM, 12:00 PM 의미

sports	일본, 이란에 역전패 당해 2023 아시안컵 4강 실패

sports	대한민국 축구, 심장에 너무 치명적이네요.

sports	대한민국 2023 아시안컵 4강 상대는 요르단

girl	회원 님 꿈속으로 가는 길을 잃어버린 처자

ucc	회원 님, 수학 근의공식 아시나요? [유머]

talk	아파트 대신에 내진 설계 잘 된 주택 구입하세요.

life	'시치미', '어처구니', '득달' 순우리말 어원 아시나요?

sports	토트넘이 브렌트퍼드 제압하고 4위로 올라갔네요.

vote	홈페이지 왜 만드시려고 하나요? 설문 설문 중

sports	일본, 바레인 꺾고 2023 아시안컵 8강 진출

ucc	친구 누나 왜 이리 이쁜 거야? [유머]

talk	사우디 vs 한국 축구 경기 보면서 가장 속 터졌던 사실

talk	호날두가 이번에도 대한민국을 구했네요.

dance	대한민국 8강 진출 축하 댄스

sports	대한민국 극적 동점골, 승부차기 끝에 2023 아시안컵 8강 진출

dance	바다 경치 죽이는 발코니에서 뮤직 댄스

9/152