by
Dec 21. 2021
애드센스 광고가 사이트 속도를 느리게 한다고요?
수동 광고를 하는 분들을 위한 애드센스 코드 입력 방법
티스토리 블로그나 워드프레스 블로그, 기타 사이트를 운영하는 분들이 주로 사용하는 수익 모델은 CPC 광고 중 하나인 애드센스라고 생각한다. 나 또한 애드센스를 주력으로 운영하고 있다. 애드센스를 다뤄본 기간은 대략 13~14년 정도 된다.
내가 처음 애드센스를 할 때는 반응형 사이트라는 것도 없었고 반응형 광고 단위도 없었다. 몇 개 광고 크기 별로 선택해서 사용할 수 있었을 뿐이다. 강산이 한번 변할 시간이 지나면서 애드센스 광고도 많은 변화가 있었다. 무엇보다 반응형 사이트들이 대세가 되고 모바일이 대세가 되었던 것이 가장 큰 변화가 아니었을까 싶다. 그에 덩달아 애드센스 광고도 빠르게 변하였다.
주력으로 운영했던 티스토리 블로그도 많은 변화가 있었다. 스킨의 종류가 반응형이 생겼고 모바일스킨은 구닥다리 산물이 되어 갔다.(그렇지만 모바일 스킨이 없어지지는 않았으면 좋겠다.) 얼마 전 티스토리 블로그에서 생긴 큰 변화는 수익 메뉴가 생겼다는 것이다. 명목은 ads.txt 문제를 해결하기 위해서 수익 메뉴를 사용하라고 했는데 나는 이 메뉴를 사용하지 않는다. ads.txt 문제가 생겨도 수익에 문제가 생기지 않으리라는 믿음도 있다. ads.txt는 그저 명분에 불과할지도 모른다.
여하튼 티스토리 수익 메뉴를 사용하지 않는 몇 가지 이유가 있는데 그중 광고 코드를 삽입하는 방식에 대해 이야기하고자 한다.
애드센스 광고는 사이트 속도를 느리게 한다.
사이트 속도를 느리게 하는 여러 가지 원인이 있는데 그중 하나가 자바스크립트(javascript)이다. 사이트 코드를 보면 <script>~</script>라고 정의된 코드들을 말한다. 사이트 속도 검사를 해보면 자바스크립트 때문에 속도에 좋지 않은 영향을 주는 것을 자주 볼 수 있다.
사이트에 자바스크립트가 많을수록 사이트 속도가 저하된다. 티스토리 역시 많은 자바스크립트 코드를 사용하고 있다. 애드센스 코드 역시 자바스크립트 코드를 사용한다. 문제는 티스토리 운영자가 티스토리 사이트의 자바스크립트 수를 줄일 권한은 없다. 줄일 수 있는 자바스크립트 코드는 오직 광고 코드일 뿐이다.
하지만 수익을 생각한다면 무턱대고 광고를 줄이지도 못한다. 다행히 자바스크립트를 줄이기 위해 광고 개수를 줄이지 않고 자바스크립트만 최소한으로 쓰는 방법이 있다. 애드센스 코드는 보통 다음과 같이 생겼다.
<script>~</script>가 두 개나 사용되고 있다.
이 중 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345678912345678" crossorigin="anonymous"></script> 첫 번째 줄 코드는 애드센스를 작동시키기 위한 js 파일을 호출하는 것으로 가장 많은 리소스가 소요된다.
마지막 줄의
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
이 코드는 광고를 푸시해주는 코드로 광고 단위마다 꼭 필요하다.
여러 개의 광고 코드를 만들어 보면 알겠지만 첫 번째 줄의 스크립트 코드는 동일하다는 것을 알 수 있다. 그리고 이 코드는 페이지에 단 한 번만 호출되면 된다. 애드센스 자동 광고를 활성화시킬 때도 이 코드가 필요함을 알 수 있다.
속도 개선을 위한 애드센스 광고 삽입 방법
매 광고 코드에서 이 첫 번째 줄의 스크립트가 실행되면 그만큼 사이트 속도가 느려지는 것이다. 그래서 이 첫 번째 줄 코드는 단 한 번만 사용되게 쓰는 것이 좋다. 방법은
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345678912345678" crossorigin="anonymous"></script>
이 코드를 <head> 영역에 넣어두고 본문에 사용되는 광고 코드는 이 부위를 제외한 것만 쓰는 것이다.
<head>~</head> 영역에는 첫 번째 줄 코드를 넣고
광고를 노출하고자 하는 부위에 나머지 광고 코드를 넣는 것이다.
이렇게 광고 코드를 넣는 것만으로도 사이트 속도를 많이 개선시킬 수 있다.
티스토리 수익 메뉴 연동 시 애드센스 삽입 형태
지금까지 얘기한 것은 나처럼 티스토리에서 수동 광고를 쓰는 사람들이 쓸 수 있는 방법이다. 티스토리의 수익 메뉴를 연동해서 쓴다면 이렇게 코드를 내 입맛대로 개선할 수 없다. 권한을 티스토리에 위임한 것이나 마찬가지이다. 수익 메뉴에 연동하면 실제 광고 코드가 어떻게 들어가고 있는지 다른 사이트들을 살펴봤다.
<head> 영역에는
이런 코드가 생기고
본문 상단 코드는
