제목이 거창하네요. 티스토리 등 설치형 블로그를 하시는 블로거 분들은 대부분 구글 애드센스 광고를 부착(?)하고 계실텐데요.
보통 디폴트로 설정되어 있는 비동기식 코드를 사용하고 계실 겁니다.
|
#블로그꾸미기 |
|
비동기식 광고코드의 올바른 사용과 속도 최적화 |
|
by 즈칸루하 |
여러분은 여러분들의 애드센스 광고코드를 어떻게 삽입하고 계신가요?
어떤 분은 블로그 관리 페이지의 html소스에 코드를 바로 삽입해서 사용하시는 분도 계실 것이고 또 다른 분은 포스팅할 때마다 서식을 이용해서 광고코드를 입력하시는 분도 계신 것으로 알고 있습니다.
어떤 방식을 사용하시던지, 비동기식 자바스크립트로 이루어진 광고 코드의 이해를 가지고 사용하시면 좋을 듯 해서 이 포스팅을 시작해봅니다.
동기식 비동기식의 차이점과 비동기식 방식의 광고코드를 제대로 사용해서 블로그의 속도를 최적화하는 방법에 대해서 함께 알아보기로 합니다.
이 포스트의 주요 내용
- 동기식 자바스크립트와 비동기식 자바스크립트의 차이점
- 인터프리터 언어의 이해와 비동기식
- 그럼 어떻게 적용해야해?
구글 애드센스의 비동기식 코드를 가지고 오면 이런 모양입니다.
스크립트 코드를 자세히 보시면 첫번째 script 뒤에 async 단어가 보입니다.
동기식 자바스크립트와 비동기식 자바스크립트의 차이점
이 걸 말로 표현하려면 조금 막역합니다만 그래도 표현을 해보겠습니다.
동기식이란 한마디로 동기화(synchronous) 되어서 변경할 수 없는 방식이란 뜻입니다.
이 표현은 아주 국부적인 표현입니다만 이해를 위해서 적었습니다. 정적인 html문서 등이 이에 해당한다고 볼 수 있습니다.
한 번 출력하면 바꿀수 없기 때문에 변경된 문서등을 보여주려면 화면을 새로고침하거나 다른 링크로의 이동 등이 필요하죠.
반면에 비동기식이란 동기화 되지않은(asynchronous) 방식의 표현방식이랄 수 있습니다.
동기화 되지 않았기에 화면을 새로고치지 않고도 사용자의 입력에 따라 변하는 페이지 구성을 보여줄 수도 있는 방식입니다.
예를들어서 설명하는 것이 이해에 가장 좋을 것 같습니다.
대표적인 예로 네이버나 구글의 자동완성 기능입니다. 구글에서 가장 처음 도입한 방식입니다.
위 예제에서 보이는 것 처럼 화면을 새로고침하거나 페이지 이동 등이 없는데도 불구하고 "동기식과" 라는 검색어를 입력 시 입력박스 아래로
자동완성기능으로 연관검색어 등이 노출이 됩니다. 이와 같은 것이 비동기식 자바스크립트를 이용한 방식입니다..
인터프리터 언어의 이해와 비동기식
비동기식 방식의 이해에 대해서 조금 이해가 되셨나요?
그런데 갑자기 인터프리터 언어가 왜 등장하나 하고 궁금해 하실 텐데요. 이는 포스팅의 결론부까지 보시면 알게 되실 겁니다.
그럼 인터프리터(interpreter) 언어란 무엇일까요?
인터프리터 언어에는 자바스크립트나 html, asp, php 등 웹에서 사용되는 언어가 이에 해당합니다.
언어나 코드를 위에서 부터 순차적으로 한줄씩 읽어들이면서 컴파일(compile)하는 방식을 인터프리터 언어라고 합니다.
이에 대한 이해가 조금 되어있어야 아래의 최적화 애드센스 광고코드를 구현할 때 약간의 도움이 됩니다.
우리가 사용하는 광고코드 또한 자바스크립트로 이루어져 있으며, 자바스크립트는 대표적인 인터프리터 언어입니다.
그럼 어떻게 적용해야해야 할까요?
벌써 결론부입니다.
우리가 사용하는 애드센스 광고코드는 비동기식 자바스크립트로 되어 있으며, 자바스크립트는 인터프리터 언어입니다.
만약 우리가 애드센스 광고코드를 하나만 사용한다면 이 포스팅이 필요없습니다.
하지만 보통 광고를 2~3개를 게재하고자 하시는 분들이 대부분이실 건데요. 이때 저 코드를 원하는 곳에 삽일할 때마다 모두 입력한다면,
우리의 블로그에 그만큼 속도에 악영향을 끼치게 됩니다.
블로그 속도 최적화를 고려해서 애드센스 광고를 넣기 전에, 우선 코드를 세부분에 나눠서 이해를 해보겠습니다.
2 : <ins class="adsbygoogle" ~~~></ins>
3 : <script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>
첫번째 코드는 js파일을 포함 시키는 겁니다. adsbygoogle.js 파일은 브라우저에 해당 url을 입력하면 다운로드해서 살펴볼수 있습니다.
필요하신분은 한번 보시길 바래요. 여기에 구글광고 코드에 대한 정의 등이 들어있습니다.
이 코드는 전 페이지에 걸쳐서 한번만 구현하면 됩니다. 여러번 정의되어 있을 시 그만큼 속도 저하를 일으킵니다.
두번째 부분이 바로 개별 광고가 들어가는 위치에 하나씩 있어야하는 코드입니다.
세번째 코드는 .push() 명령어로 각각의 <ins></ins> 부분에 광고를 입력하는 자바스크립트 코드입니다.
이는 소스의 간편화를 위해서 아래 처럼 변경가능 한데요.
$('.adsbygoogle').each(function(){(adsbygoogle = window.adsbygoogle || []).push({});});
jquery를 이용한 소스 간편화입니다. 티스토리 블로그에는 jquery가 사용가능해서 바로 적용시키면 됩니다.
위 코드를 해석하자면, 클래스이름이 adsbygoogle 인 코드가 있다면 각각 함수(function)를 실행해라 정도의 뜻입니다.
일일이 하나씩 세번째 코드를 넣을 필요가 없고 단 한번만 넣으면 되는 거죠.
정리하면 이렇습니다.
1번과 3번의 변형코드를 하나로 묶습니다.
그리고 <body>의 가장 아래쪽 </body>바로 위쪽에 위치시킵니다.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
$('.adsbygoogle').each(function(){(adsbygoogle = window.adsbygoogle || []).push({});});
</body>
이렇게 위치시키는 이유가 바로 아까 궁금해 하셨던 인터프리터 언어의 이해에 대한 부분인데요.
코드를 순차적으로 모두 읽은 후 마지막에 우리의 애드센스 광고를 실행시키기 위해서입니다.
<ins></ins>코드가 나오기 전에 저 코드가 먼저 실행되면 안되겠죠?
<body>의 마지막</body>에 위치시키는 이유입니다.
이제 광고를 노출시키고 싶은 곳에 각각 <ins></ins> 부분을 삽입합니다.
|
광고코드를 수정하는 것은 정책위반이 아닐까?
|
여러분의 애드센스 광고코드도 최적화를 시켜서 블로그 속도 최적화를 이루시기 바랍니다.
댓글