애드센스 중복 스크립트 없애기 (로딩 속도 개선?)
애드센스 승인 이후에 우리는 반응형 광고를 만들어서 티스토리 곳곳에 배치를 합니다. 최근에는 티스토리 관리자에서 애드센스 카테고리가 추가되면서 광고를 넣기가 무척이나 편리해졌습니다. 이렇게 불철주야 티스토리 플랫폼을 발전시키고 있는 개발진 여러분들께 감사의 말씀을 올립니다.
예전부터 의구심이 들었던 부분이 하나 있습니다. 바로 애드센스 스크립트 부분입니다. 혹시 여러분들은 눈치채셨습니까? 광고를 생성할 때마다 스크립트가 중복이 되고 있다는 사실을 말입니다. 아직 무슨 소린지 모르시겠다구요? 그러면 하나씩 살펴봅시다. 참고로 이 과정은 반드시 필요한건 아닙니다. 안 하셔도 됩니다.
애드센스 스크립트 구조
<script data-ad-client="ca-pub-xxxxxxxxxxxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>먼저 위의 스크립트 코드입니다. 이것은 우리가 최초 애드센스 승인을 받을 때 스킨의 <head>안쪽에 삽입하는 승인코드입니다. 승인 이후에는 이 스크립트 코드로 인해서 광고가 나타나게 되지요. 또한 수동 설정을 통해서 디테일한 반응형 광고 설정이 가능합니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxx"
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>네. 바로 이 스크립트 입니다. 광고를 생성할때마다 이 스크립트가 생성됩니다. 그리고 우리는 아무것도 모른채 전체 코드를 몽땅 복사해서 스킨에 붙여넣습니다. 즉 위의 코드가 광고 생성 개수만큼 스킨에 들어가 있는 겁니다. 만약 10개의 반응형 애드센스를 만들었다면 스킨에는 이 스크립트 코드가 무려 11개가 들어있는 셈입니다.
...네? 10개가 아니고 왜 11개냐구요? 그 이유는 위에 다 나와있습니다. 최초 승인 받을 때 <head> 안에 집어넣는 스크립트에도 이게 포함되어 있습니다. 한번 살펴보시기 바랍니다. 코드는 위에 다 있으니까 쉽게 파악 할 수 있을겁니다. 확인해 보시면 정말로 해당 스크립트가 포함되어 있다는걸 확인 할 수 있습니다. 그래도 잘 모르시겠다구요?
<script data-ad-client="ca-pub-xxxxxxxxxxxx" async src=https://pagead2.googlesyndication.com/pagea/js/adsbygooglejs"></script>
다시 한 번 이렇게 주목해서 비교해 보시기 바랍니다. 주황색 부분이랑 같다는걸 확인하셨을 겁니다. 그렇습니다. 최초 애드센스 승인을 받기 위해서 <head>안쪽에 삽입했던 승인 코드에도 중복 스크립트가 포함이 되어 있는 상황입니다. 그럼 대체 이 스크립트는 무슨 스크립트인가요?
이 스크립트는 구글의 광고를 받아오는 자바스크립트 CDN 주소입니다. 웹폰트나 폰트어썸 같은 웹 아이콘을 사용할 때에도 이런 스크립트를 사용하곤 합니다. 같은 개념이라고 생각하시면 됩니다. 그리고 이러한 스크립트는 여러개를 사용할 필요가 전혀 없습니다. 최초 <head>에 한 번 세팅하고 끝입니다. 더 이상 사용을 하지 않아도 된다는 의미입니다. 하지만 어디까지나 이건 이론이자 개인 생각일 뿐입니다. 그래서 구글애드센스팀에 문의를 했습니다. 이후에 다음과 같은 답변을 받을 수 있었습니다.
이런 내용입니다. 이미지가 보이지 않는 분들을 위해서 아래에 텍스트로 한번 더 옮겨놓도록 하겠습니다.
안녕하세요 유길용 게시자님.
문의 주신 첨부의 스크립트 코드는 반응형/수동형 광고 여부와 상관없이 1개 이상의 광고 코드 구현 시 중복 구현이 필요 없음을 기술팀과 확인하였습니다. 따라서 문의 주신 것과 같이 속도에 영향을 최소한으로 하기 위해 게시자의 판단에 따라 반본 구현 시 제외 후 구현하셔도 광고 게재에 문제가 없습니다. 광고 코드 구현 시에는 1) 반응형 코드 수정방법 과 2) 애드센스 광고 코드 수정 정책을 참고하시어 구현 해 주시길 추천 드리며 확인 후 추가 질문은 언제든 본 메일에 회신 주시기 바랍니다. 어려운 시기 항상 건강 유의하시고 행복한 하루 되세요! 감사합니다.
즉 중복되는 스크립트를 하나로 통합해도 아무 문제가 없다는 소리입니다. 그러면 답이 나왔습니다. 최초 승인을 위해 <head>안쪽에 삽입했던 스크립트 코드는 그대로 두고, 나머지 수동으로 삽입한 애드센스의 스크립트 가장 첫 줄을 모두 제거해주면 됩니다. 즉 이렇게 되는거죠.
중복 스크립트 제거 방법
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>이것이 순정 반응형 애드센스 코드입니다.
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>이렇게 만들어주면 되는 것입니다. 간단하죠? 가장 위에 있는 스크립트 코드만 삭제합니다. 이렇게해도 광고가 출력되는건 변함 없습니다. 참고로 ins와 그 아래의 script의 역할은 다음과 같습니다.
●ins : 광고 게시자, 광고 번호, 광고 스타일 정보가 담겨있는 태그. 사용자 입맛에 맞게 수정 가능 (애드센스 광고 정책에 벗어나지 않도록 수정)
●<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> : 애드센스 광고 출력 스크립트 (이게 없으면 광고가 보이지 않음)
이렇게 두개의 요소들을 제외한 가장 윗 줄의 스크립트만 삭제하시면 됩니다. 지금 친절한효자손 취미생활 티스토리에서 출력되는 모든 애드센스 광고는 중복 스크립트를 몽땅 제거한 상태입니다. (자동 광고 제외 - 자동 광고는 수정 불가) 보시는 것 처럼 광고 잘 나오고 있죠? 이렇게 어렵지않게 애드센스의 중복되는 스크립트를 제거 할 수 있습니다.
로딩 속도 변화
솔직히 엄청나게 빨라졌다는 생각은 들지 않습니다. 다만 조금은 속도가 향상된 것 같은 "기분"이 듭니다. 사실 티스토리 로딩 속도를 늦추게 만드는 가장 일등공신은 애드센스거든요.
수익 변화
없습니다. 똑같습니다.
그러면 굳이 안 해도 되는거 아닌가?
맞습니다. 굳이 안 해도 됩니다. 그래서 서두에 무조건 필요한 과정이 아니라고 말씀 드렸죠? 개인 성격상 그냥 이런게 눈에 밟혀서 좀 더 깔끔한 코드를 구현하고 싶었기 때문입니다. 혹시 모르죠. 조금이라도 로딩 속도나 수익에 영향을 줄지도요. 물론 무조건 긍정적인 효과라는 보장은 없습니다. 모험인거죠. 끝.
