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

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

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

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

애드센스 지연 로드 기능을 제공하는 플러그인 - 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 플러그인과의 호환을 위한 것이라고 합니다. 테마 파일에 코드를 추가하는 경우 차일드 테마를 만들어 작업하시기 바랍니다. 그렇지 않으면 테마가 업데이트될 경우에 추가한 스크립트 코드가 사라지게 됩니다.

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

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

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

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>

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

참고:



4 개 댓글

  1. 자동 광고에도 적용이 될까요?

    자동 광고 스크립트에는 스크립트 안에 애드센스 고유 아이디가 있어서요.

    애드센스는 정말 최소의 광고 1~2개만 넣어도 속도를 너무 느리게 하니깐 고민이 많아요.
    사이트 속도가 느리면 SEO에 큰 영향이 있고, 애드센스 빼면 수익이라는 것이 전혀 없고. 딜레마에요.

    응답
    • 자동 광고에 적용하면 앞부분에 표시되는 광고가 제대로 표시되지 않을 가능성이 있을 수 있으므로, 제대로 작동하는지 테스트를 한 후에 적용 여부를 결정하시기 바랍니다.

      응답
  2. 확실히 lazyload 기능이 있으면 페이지를 한꺼번에 불러들이지 않아서 좋더군요. 광고가 좀 무겁게 뜨는 사이트는 참조하면 좋을 내용 같아요.

    좋은 정보 항상 감사드립니다.

    응답
    • 광고를 여러 개 표시하는 경우에 활용하면 페이지 로딩 속도가 빨라져 SEO에 도움이 될 것입니다.
      저는 하단의 일치하는 콘텐츠 광고를 레이지 로드하도록 설정했다가 해제했습니다.
      광고가 1~2개 있는 경우에는 가시적인 효과는 없는 것 같습니다.

      응답