• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

5,072  

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

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

즉, 

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

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

 

 

방법1

 

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>

 

 

2.

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

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

 

<!--애드센스 로드2 - 홈짱 -->

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



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

<!--애드센스 로드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>


 

3.

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

 

<body<?php echo isset($g5['body_script']) ? $g5['body_script'] : ''; ?> onLoad="initialize_page();"><!--애드센스 로드3 - 홈짱 -->

 

 

4.

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

 

<!--애드센스 로드4 - 홈짱 -->

<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 (저는 이 방법 적용)

 

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>

 

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

 

2.

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

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

 

<!--애드센스 로드2 - 홈짱 -->

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



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

<!--애드센스 로드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>

 

 

3. 

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

 

<!-- 애드센스 로드3 - 홈짱 -->

<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

 



분류 제목 조회
web 서버 - 우분투 패키지 설치 명령어 자동 yes하기 (apt-get install -y 프로그램명)
5,093
5,093
news 씨아이보드가 그누보드(=냑)에서 완전 분리 (ciboard, sir.kr)
3,060
3,060
editplus 에디트플러스 (EditPlus) - HTML새문서 열기 (Ctrl + Shift + N)
3,047
3,047
editplus 에디트플러스 (EditPlus) - 새문서열기 (=보통문서열기 =빈페이지열기) (Ctrl + N)
2,171
2,171
editplus 에디트플러스 (EditPlus) - 파일클릭 프로그램실행 연결오류 에러해결 (= 튕김해결=튕기는증상해결)
5,583
5,583
web masonry (메이슨리) - 벽돌쌓기 레이아웃 정렬(= pinterest 핀터레스트 방식)
6,176
6,176
web PHP - 큰따옴표 작은따옴표 차이 ★★★★★
2,291
2,291
web 유튜브 썸네일생성 + 유투브 썸네일사이즈 (= 썸네일크기 = 썸네일종류 = 썸네일해상도) + 썸네일주소 (y…
12,283
12,283
web HTTPS 적용 후 URL 주소창에 자물쇠 안뜰때 조치사항 (SSL 적용 후, http 찾기)
4,448
4,448
editplus 에디트플러스 (EditPlus) - 일괄변경 단축키 ★ (Ctrl + H)
4,497
4,497
editplus 에디트플러스 (EditPlus) - 모두선택 (=전부선택) 단축키 (Ctrl + A)
2,451
2,451
editplus 에디트플러스 (EditPlus) - 실행취소 단축키 (Ctrl + Z), 재실행 단축키 (Ctrl + Y)
3,935
3,935
editplus 에디트플러스 (EditPlus) - 현재시각 (= 현재시간) 입력 단축키 (Ctrl + M)
2,760
2,760
editplus 에디트플러스 (EditPlus) - 오늘날짜요일 입력 단축키 (Ctrl + D)
2,940
2,940
editplus 에디트플러스 (EditPlus) - 탭 들여쓰기 설정 ★★★ (tab text-indent width) / …
10,128
10,128
editplus 에디트플러스 (EditPlus) - 자동완성기능 ★★★★★ (autocomplete)
8,463
8,463
web D2Coding (디투코딩) 개발자용 폰트 무료다운로드・설치 ★
6,906
6,906
talk 안녕하세요 오늘가입햇습니다! 1
2,733
2,733
money JS - 애드센스 로드 빠르게 (= 애드센스 로딩 속도 개선) ★
5,073
5,073
site 추천에디터 무료다운로드 주소 모음 (= 에디터종류 = 에디터추천 = 소스편집기무료다운좌표) (Editor, … 설문 중
8,346
8,346
131/157
목록
찾아주셔서 감사합니다. Since 2012