애드센스 광고 빠르게 로딩하기

웹페이지를 지연하여 구글 애드센스 광고 동기화

"구글 애드센스 광고 단위를 생성하게 되면 광고 로딩과 관련해 동기/비동기 방식에 대한 옵션이 있다."라고 말하려 하였으나 본 포스트의 참고자료로 쓸겸 관련 옵션을 캡처하러 애드센스를 방문 하였더니.. 헐~ 그 세 이 옵션이 사라 졌다.

과거 구글 애드센스는 광고 표현방식에 있어 웹페이지와 동기화 할 수있는 관련 옵션을 제공했다.

원래 이 옵션이 주는 의미는 웹페이지 로딩과 속도와 맞추어(동기화 방식) 표시 할지 아니면 웹페이지는 웹페이지대로 광고는 광고대로 서버 응답에 따라 각각 따로 표시할지에 대한 옵션이다. 필자의 기억으로는 이렇게 동기/비동기 구현 방식을 구분해서 그에 따른 광고 코드가 달랐던 기억이 있다. 따로 이에 대한 설정을 하지 않으면 비동기방식이 기본 디폴트값 이다. 근데 이 옵션은 있으나 마나 대부분의 웹사이트에서 웹페이지 로딩 속도가 애드센스 광고에 비해 빠르게 로딩 된다. 사실 구글 애드센스 광고의 반응 속도가 느린 것은 생각해 보라 얼마나 전세계 수도 없이 많은 웹페이지들이 동시 다발 적으로 얼마나 많은 광고 요청을 하고 있을지 이와 관련해 발생된 트래픽은 아무리 고성능의 네트워크와 하드웨어를 해도 감당하기 어려울 것이다. 어떻게 보면 구글이니까 가능한 일 일지도 모르겠다. 이런 이유로 대부분의 웹사이트에서 애드센스를 운영하는 웹마스터들은 비동기 방식을 선호했다. 애드센스 측도 이 부분을 충분히 의식했는지 언근슬쩍 이 옵션을 없애 버린 게 아닐까 짐작된다.

나의 웹사이트를 방문하는 이용자는 컨텐츠(정보)에만 관심 있지 페이지 내 게재되고 있는 광고 따위는 관심이 없다. 경우에 따라서는 이 광고를 브라우저에 아예 표시하지 않게 하는 확장프로그램을 쓰기도 한다.

웹페이지 상단에 자리하는 광고의 경우 '조회 가능 Active view'가 다른 광고들에 비해 그 수치가 형편 없이 낮은 경우가 있다. 그 이유는 상단 광고가 표시되기 전에 웹페이지(컨텐츠)가 먼저 로딩 되기 때문이다. 특히 필자의 블로그와 같은 웹페이지 레이아웃을 가진 사이트에서는 상단 광고가 가지는 비중이 다른 광고들에 비해 상대적으로 크다. 전반적으로 웹페이지 다른 요소들 보다 차지하는 면적도 크고 일단 젤 눈에 잘 뛰는 핵심 위치이기 때문에 웹마스터 입장에서는 이 광고를 어떻게든 웹페이지를 이용하는 사용자 눈에 들게 하여 최종 클릭을 발생 시켜주길 은근히 기대한다.

  ※  참고 자료
조회 가능 Active View란? 측정 가능한 모든 노출수 중 조회 가능한 노출수의 비율입니다. 예를 들어 사이트의 광고에 100회의 측정 가능한 노출이 발생했다고 가정해 보겠습니다. 이는 Active View 태그가 조회율을 측정할 수 있는 노출이 100회 발생했다는 의미입니다. 만약 이 100회의 노출수 중 단지 10회만 조회 가능한 것으로 측정되었다면 사이트의 Active View 조회율은 10%가 됩니다. = 구글애드센스

필자는 웹페이지 로딩 속도 보다 현저히 느린 이 애드센스 로딩 속도를 개선하기 위해 여러 방법을 모색해 봤지만 웹페이지 내 스크립트(Script) 요소들을 최적화 외 뾰족한 방법이 없었다. 애드센스 서버의 반응 속도가 느린 이상 웹페이지가 최적화가 아무리 잘 이루어진다 할 지라도 필자가 원하는 결과를 얻을 수 없다. 여기서 말하는 결과란 최소한 컨테츠와 광고가 동시에 노출 되거나 광고가 좀 더 일직 떠줘 웹페이지를 이용하는 이용자가 광고도 표시되기 전에 컨텐츠로 이동하기 위해 스크롤(Scroll)을 휙~ 내려버리는 경우를 방지하는 것이다. 이것은 필자 뿐 아니라 애드센스를 운영하는 모든 웹마스터들의 바람이기도 하다.

애드센스 서버의 반응속도가 느려서 발생하는 위와 같은 문제를 해결하는 방법은 나의 웹사이트의 웹페이지(컨텐츠)를 애드센스 반응속도 만큼 지연 시켜 컨텐츠와 동시에 광고가 게시하는 것이다. 이는 각각의 서버반응 속도가 달라 발생하는 낮은 조회 가능 Active view수치를 개선 할 수 있다는 것이고 이것은 곧 애드센스 수익 상승 효과를 기대 할 수 있다. 그러나 빠른 반응속도를 자랑하는 나의 웹페이지를 임의로 지연 시킨다는 건 상식적으로 용납 할 수도 없을 뿐더러 이를 이용하는 이용자에게도 지연에 따른 대기 시간이 그만큼 늘어나 불편을 준다. 그리고 대형 포탈사에서 제공하는 블로그류의 경우 보안상의 이유로 서버단(server side)에 접근할 수 있는 권한이 없음으로 서버단(server side)에서 지연과 관련해 취할 수 있는 방법은 사실상 없다.

그렇다면 단 하나 내가 접근 가능한 웹페이지에 관련 스크립트를 구현해 웹페이지 로딩을 인위적으로 조절 함으로써 광고와 컨텐츠를 어느 정도 동기화 할 수 있다. 여기에는 웹페이지가 로딩될 시간 동안 표시해 줄 적절한 로딩 애니메이션(Animation) 사용이 중요하다. 이 로딩 애니메이션 사용은 웹페이지(광고포함)가 로딩 될 때까지 이를 이용하는 이용자에게 시선을 끌어 곧 페이지가 곧 로딩 된다는 기대감을 주며 지연 대기에 따른 시간도 짧게 느껴지게 만드는 효과가 있다.

사실 필자는 처음 이 스크립트를 도입에 있어 과연 효과가 있을지 반심반의 했다. 하지만 실제 테스트한 체감상의 느낌은 기대 이상이다. 이와 관련해 데이터가 쌓이면 정리해서 올릴 계획이다. 웹페이지 로딩중에 웹페이지 로딩중 이라고 알리는 스크립트는와 웹페이지가 완전히 로딩이 완료됨을 표시해 주는 스크립트 사용은 과거에도 많이 이용되었다. 필자는 그동안 웹페이지를 대기하는 사용자 입장에서 그만큼 늘어나는 대기 시간의 불편을 그리 탐탐치 않게 생각했고 이런 이유로 관련 스크립트 도입을 고려해 본 적은 없다. 나의 웹페이지가 로딩완료 될때까지 사용자를 대기를 시킬 이유는 하나도 없다. 다만 컨텐츠의 집중도를 높일 이유로 이러한 스크립트를 사용해 왔다면 전혀 이해 안 가는 부분은 않으나 이 스크립트의 성격은 다르다. 바로 애드센스 광고와 웹페이지로딩을 어느 정도 동기화 하는데 목적이 있고 조회 가능 Active view수치를 향상 시켜 줄 것을 기대한다.

웹페이지의 <body>가 시작하는 부분에 다음과 같이 추가 한다.

<body>

<!--로딩 대기-->
<div id="loadOverwrapper">
   <div class="loader"></div>
</div>

</boby>앞에 다음과 같은 자바스크립트(JAVA Script)를 삽입한다.

<!--로딩 대기-->	
<script>
function rmLoadOverwapper(){
	document.querySelector("#loadOverwrapper").style.display="none";
}

	try {
	document.querySelector("iframe[onload*='google']").onload=function(){
		rmLoadOverwapper();
	}
	setTimeout(function(){
		rmLoadOverwapper();
	}, 2500);
}

catch(err) {
	setTimeout(function(){
		rmLoadOverwapper();
	}, 2500);
}
</script>

</body>

이 스크립트를 핵심은 google이라는 문제열을 가지는 iframe태그를 체크한다. 즉, 구글 에드센스광고 코드는 google이라는 문구를 포함한 iframe형태로 웹페이지에 로딩 됨으로 첫 번째 애드센스 광고가 로딩을 시도하면 인위적으로 막아 놓은 웹페이지를 표시한다.

그리고 CSS로 구현되는 간단한 애니매이션을 CSS페이지에 추가 한다.

/* 로딩 사이클 애니매이션 */
.loader {
  margin: 5% auto;
  height: 100px;
  width: 100px;
  border: 6px solid #fff;
  border-right-color: #c30;
  border-top-color: #c30;
  border-radius: 100%;
  -webkit-animation: spin 800ms infinite linear;
          animation: spin 800ms infinite linear;
}

@-webkit-keyframes "spin" {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@keyframes "spin" {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

저장 후 페이지를 테스트 한다. 표시된 숫자는 얼마나 지연 시킬지 최대(maximum) 대기 시간이다. 2500(ms)는 2.5초를 뜻한다. 저는 2.5초를 쓰고 있으나 자신의 웹페이지에 대충 첫 번째 애드센스 광고가 언제쯤 표시되는지 평균값을 넣어 주면 비소로 광고와 페이지가 동시에 표시되거나(광고가 2.5초보다 빠르게 표시될 경우 그 만큼의 로딩 시간은 짧아짐) 최대 2.5초 대기 후 광고가 로드되지 않더라도 바로 웹페이지를 표시한다. 즉, 애드센스 광고 게시가 2.5초 보다 느리다면 대기를 멈추고 강제로 페이지를 표시한다. 웹페이지를 이용하는 이용자의 대기 시간을 최소화해 이에 따른 불편을 줄이고 애드센스 광고 게시율도 동시에 높이려면 자신의 웹사이트 환경에 맞는 적절한 시간 조절이 매우 중요하다.

참고로 위에 사용된 애니매이션은 CSS로 구현 했지만 페이지에서 바로 gif등의 애니메이션 이미지 파일을 직접 읽어와 이를 대체할 수도 있다.

스크립트 구현에 참고한 페이지
https://nubiz.tistory.com/670 - 상단 광고의 active view 수치를 높이는 로딩화면과 그 효과

참고한 애니메이션 효과
http://story.pxd.co.kr/922 - [인터랙션] CSS를 이용한 로딩 애니메이션, 이상 입니다.

※   저작권 관련 안내
본 블로그의 모든 글과 사진 및 영상은저작권 보호를 받는 게시물 입니다. 본 블로그의 내용을 링크 및 인용 할 때에는 꼭 출처를 밝혀주세요. 게시자 허락없는 무단도용은 당신을 불행하게 만들 수도 있습니다.

해외에서 한국 실시간 방송(TV)를 보기 위해서 이 페이지를 방문했다면 바로아래 링크를 이용하세요. 간단한 설정으로 고화질 TV서비스를 받을 수 있습니다.

코디(kodi)로 해외→한국(TV) 실시간 방송 보기

새롭게 시작하는 코디(kodi) 실시간 TV 이용 안내

IPTV 코디(kodi) 한국 실시간 방송 테스트 종료와 함께 국내 이용자는 더 이상 코디 tvheadend PVR, HTSP 클라이언트를 이용할 수 없게 됩니다.

국내 이용자를 위한 고화질 실시간 방송이 새로운 방식으로 서비스됩니다. 이 방식은 코디(kodi)의 애드온인'PVR IPTV Simple Client'설정으로 사용 가능하며 탑이슈에서 제공하는 공개(외부) EPG url 등록을 통해 EPG정보까지 완벽 구현됩니다. 자세한 정보는 새롭게 시작하는 코디(kodi) 실시간TV 이용 안내와 아래 동영상을 참고하십시오.

위의 내용과 별개로 기존 자료실(이 페이지)은 계속 운영됩니다.


코디(kodi) m3u등록 및 외부EPG설정 / 탑이슈제공 영상

새롭게 시작하는 코디(kodi) 실시간TV 이용 안내

한국 IPTV - kodi(코디), 팟플레이어, tvheadend(티비헤드엔드) 자료실

본 자료실에는 KT 올레(olleh)TV, LG 유플러스(U+)TV, SK B(broadband)TV에서 시청 가능한 m3u dpl 파일 등이 제공 됩니다.

본 자료실에 접근 가능한 권한을 얻기 위해서는 PC에서 TV보기 포스트 본문의 하단 '마치면서...' 부분을 살펴 주십시오.


PC로 TV보기! 무료시청 (실시간, HD, UHD, 케이블, 유료채널) / 탑이슈제공 영상


TV셋톱박스(KT 올레TV, LG 유플러스TV, SK BTV)에서 유료 채널 무료로 보기 / 탑이슈제공 영상

PC로 TV보기! 무료 (HD, 케이블, 유료채널, 해외→한국)

2018.10.22 - KT 방송 신호가 암호화 방식으로 바뀌어 전송되어 일부 종편을 포함한 채널이 시청 불가 하다고 합니다. 여기 공용 채널(153ch)도 영향을 받아 몇몇 채널이 나오지 않고 있습니다. 지속 가능한 채널 확보를 위해 노력해보겠습니다.

2018.10.04 - 해외 거주 한국 동포 및 거주자를 위한 한국 실시간 방송 테스트 중입니다. 31일 종료 예정

2018.09.01 - 각 통신사 구분없이 해외에서 한국 실시간 HD방송을 바로 볼 수 있는 153개 의 채널이 등록 되었습니다. 물론 국내 이용자도 시청 할 수 있습니다.

2018.09.01 - 세계 주요 방송 128채널이 등록되었습니다.

해외에서 한국 실시간 방송(TV)를 보기 위해서 이 페이지를 방문했다면 바로아래 링크를 이용하세요. 간단한 설정으로 고화질 TV서비스를 받을 수 있습니다.

코디(kodi)로 해외→한국(TV) 실시간 방송 보기

새롭게 시작하는 코디(kodi) 실시간 TV 이용 안내

국내 이용자를 위한 고화질 실시간 방송 구현에 대해 다 방면으로 생각해본 결과 tvheadend HTSP 방식은 개인 네트워크로는 많은 수의 접속자 트랙픽을 감당 할 수 없고 안정적인 서비스를 지속적으로 유지 할 수 없다는 결론입니다. 따라서 각 통신사에서 직접 송출하는 신호를 이용한 m3u를 코디(kodi)의 애드온인 'PVR IPTV Simple Client'에 등록해서 사용하는 방식을 택했습니다. 이 방식은 각 통신사의 고품질 네트워크(회선)을 사용함으로 UHD포함 고화질.고음질의 TV시청이 가능해 지며 각 통신사의 판매되는 IPTV 상품과 구현되는 원리도 똑같습니다. 즉, 본인의 인터넷 환경만 좋다면 버퍼링 없는 영상으로 TV시청이 가능합니다.

외부 접속 및 모바일 환경에서 LTE 데이터 등 무선접속 시 TV시청이 어려운 점을 감안, 외부 접속시 사용할 수 있는 공용(http방식, TCP 프로토콜) m3u가 따로 제공됩니다. 이 파일은 통산사 구분을 하지 않으며 유/무선 인터넷 연결가능한 상태이면 원할한 TV시청이 가능합니다.

아울러 탑이슈에서 제공하는 공개(외부) EPG url 등록을 통해 EPG정보까지 완벽 구현됩니다. 이를 위해 본 자료실의 제공되고 있는 통신 3사(KT,LG,SK) m3u의 대대적인 작업이 있었으며 코디(kodi)등의 플레이어를 통해 각 통신사 IPTV 상품을 이용하듯 사용 가능합니다.

EPG(TV프로그램 가이드)기능은 코디(kodi)는 물론이고 m3u 재생 가능한 관련 플레이어에서 EPG정보를 지원하는 경우 해당 플레이어에 EPG정보도 표시됩니다.

현재 통신 3사 KT(70ch), LG(190ch), SK(250ch) 업데이트된 m3u와 외부 EPG 접속을 위한 url이 제공되고 있습니다. (지원 채널 개수는 변동이 있을 수 있습니다.)


코디(kodi) m3u등록 및 외부EPG설정 / 탑이슈제공 영상

이 서비스는 여러분의 후원을 통해 이루어집니다.

이 서비스는 일정금액 후원 후 이용 할 수 있습니다. 후원은 최소 5천 원부터 가능하며, 후원금은 장비 업그레이드와 유지 비용으로 사용됩니다. 후원은 절때 강제 사항이 아니며 보다 안정적인이고 지속가능한 서비스 유지를 위한 방안이니 늘리 이해해 주시기 바랍니다.

SC제일은행 : 77720390237
카카오뱅크 : 3333063200547

예금주 : 서승종


자료실 미리보기


현재 운영 중인 자료실 캡처 화면

현재 운영 되고 있는 페이지 일부분을 캡처한 화면입니다. 기본적으로 IPTV를 시청하기 위한 m3u파일을 제공하며 여러 멤버들과의 이 주제의 다양한 의견 교환과 정보 공유도 할 수 있습니다.

또한 tvheadend 스트리밍 서버에 관심이 있고 구축을 계획하고 있다면 이에 필요한 여러 사항들도 자문해 드리고 도울 수 있는 범위 내에서 도와 드립니다.

이 서비스는 한번 후원으로 기간 제한 없이 이용 할 수 있습니다.

후원 후 hots01@daum.net으로 입금자 성함, 후원금액, 사용 중인 통신사를 기제, 메일 주시면 자세한 설명과 이용 방법을 제공합니다.