애드센스 지연 로드하여 사이트 속도 높이기

구글 애드센스 스크립트는 다른 광고 플랫폼보다 속도가 빠른 편이지만 사이트 로딩 속도에 영향을 미칠 수밖에 없습니다. 특히 광고 개수가 많아지거나 애드센스 스크립트를 잘못 추가할 경우 사이트 속도가 현저히 느려질 수 있습니다. 이 글에서는 애드센스 지연 로드를 통해 사이트 속도를 높여 SEO를 개선하는 방법을 살펴보겠습니다.

먼저 소개하는 방법은 워드프레스에서 사용할 수 있고, 뒷부분에서 소개하는 방법은 워드프레스 뿐만 아니라 범용으로 활용이 가능합니다.

아래의 방법으로 사이트 속도가 개선되지 않는다면 다음 글에서 소개하는 무료 플러그인을 사용하여 테스트해보시기 바랍니다.

• 워드프레스 무료 애드센스 지연 로드 플러그인 - Flying Scripts

애드센스 지연 로드 기능을 제공하는 플러그인 - Advanced Ads Pro

Advanced Ads Pro는 무료 애드센스 플러그인인 Advanced Ads의 유료 버전입니다. 이 플러그인의 프로 버전에서는 광고를 레이지 로드하여 사이트 속도를 높여줍니다. 하지만 가격이 연간 39유로로 조금 부담이 되는 편입니다.

워드프레스에서 애드센스 광고를 정교하게 표시하고 싶은 경우 플러그인을 사용해볼 수 있습니다. 다음 글에서 워드프레스에서 사용할 수 있는 애드센스 광고 플러그인을 확인할 수 있습니다.

• 워드프레스에 애드센스 광고를 쉽게 추가할 수 있는 플러그인 소개

뉴스페이퍼 등 일부 매거진 테마에서는 애드센스 광고를 배치할 수 있는 기능을 테마 옵션을 통해 제공합니다. 그런 경우 테마에서 제공하는 광고 배치 기능을 사용할 수 있습니다.

워드프레스에서 애드센스 광고 지연 로드하기

워드프레스 블로그를 운영하고 있는 경우 "How to Setup Lazy Load for Google AdSense Ad units?"에서 소개하는 방법을 시도해볼 수 있습니다.

Technical details: Basically what happens that it load in asynchronous form, means browser continue downloading adsbygoogle.js script without blocking the HTML parsing.

But here, in the lazy loading method I am going to change the ASYNC method to real DEFER. The AdSense script will start downloading in browser, once window will complete loading the main web page. In this way, visitor don't have to wait for seeing whole page quickly for the AdSense.

기술적인 설명: 기본적으로 비동기(asynchronous) 형식으로 로드될 경우 HTML 파싱을 차단하지 않고 브라우저에서 adsbygoogle.js 스크립트를 계속 다운로드합니다. 그러나 참조된 글에서 소개하는 방법을 이용할 경우 ASYNC 방법을 실제 DEFER로 변경합니다. 즉, 메인 웹 페이지 로딩이 완료되면 브라우저에서 애드센스 스크립트를 다운로드하기 시작합니다. 그러므로 방문자는 애드센스 광고 때문에 전체 페이지가 로드되도록 기다릴 필요가 없습니다.

실제로 이 방법으로 테스트해보니 페이지 콘텐츠가 모두 로드된 후에 광고가 표시되는 것을 확인할 수 있었습니다.

애드센스 광고 스크립트 지연 로드시키는 방법:

이 블로그에서는 현재 아래의 방법으로 애드센스 광고 스크립트를 지연 로드하고 있습니다. 별다른 이상 없이 광고가 표출되는 것 같습니다.

1. 먼저 모든 광고 단위에서 다음 라인을 제거합니다.

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

2. 다음 자바스크립트 코드를 테마의 푸터에 추가합니다. (보통 </body> 태그 바로 앞에 추가하면 됩니다.)

<!--noptimize-->
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!--/noptimize-->

참고로 noptimize 태그는 Autoptimize 플러그인과의 호환을 위한 것이라고 합니다. 테마 파일에 코드를 추가하는 경우 차일드 테마를 만들어 작업하시기 바랍니다. 그렇지 않으면 테마가 업데이트될 경우에 추가한 스크립트 코드가 사라지게 됩니다.

GeneratePress 테마에서는 훅(HooK)을 사용하여 푸터 영역에 상기 광고 스크립트를 로드할 수 있습니다.

• 워드프레스 제너레이트프레스 테마 후크 사용하기

여러 개의 광고를 표시하는 경우 이 방법이 효과적일 수 있습니다. 실제 적용 전과 적용 후 속도를 비교해보시기 바랍니다. 참조된 글의 댓글을 보면 작동에는 이상이 없는 것 같습니다.

다른 방법: 애드센스 스크립트 지연 로드 스크립트를 사용하여 사이트 속도 높이기

다른 방법으로 아래에서 소개하는 방법을 시도해볼 수 있습니다(위의 방법과 비슷합니다). 이 방법은 워드프레스 뿐만 아니라 범용으로 활용할 수 있습니다. 경우에 따라 효과가 없을 수도 있습니다. 적용 전과 적용 후에 오류가 발생하지 않는지, 그리고 사이트 로딩 속도가 이전보다 빠른지 체크해보시기 바랍니다.

1. 애드센스 스크립트에서 다음 라인을 삭제하고 광고를 추가하도록 합니다. 여러 개의 광고를 추가하는 경우 지연 로드할 광고에서 이 라인을 모두 삭제하시면 됩니다.

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

2. 다음 코드를 </body> 바로 앞에 붙여넣기 합니다.

<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>

이제 광고가 제대로 표시되는지, 그리고 체감 속도가 빨라졌는지 확인하도록 합니다. 또한, 광고 수입에 영향이 없는지도 관찰하시기 바랍니다.

참고:

• 클라우드웨이즈로 워드프레스 시작하기 및 도메인 연결하기
• 가입형 워드프레스에 애드센스 배너 광고 게재하기