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

Last Updated: 2024년 04월 23일 | 16개 댓글

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

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

참고:


16 개 댓글

Leave a Comment

  1. 안녕하세요, 항상 도움받고 있습니다 :)
    플러그인 Advanced Ads Pro 를 추천하셨는데 저는 이 문제를 해결하기 위해 Ad lnserter Pro 를 설치했습니다. 이것도 Lazy Load 기능이 있다는데 별도 설정을 해야되는건지 제 사이트 속도가 전혀 좋아지지 않더라구요. Lazy Load 기능 작동시키기 위한 어떤 설정이 필요한걸까요? 추천해주신 Advanced Ads Pro 로 바꿔야되나 고민도 됩니다..ㅜ

    응답
    • 안녕하세요, 승제님. 이런 기능의 플러그인이 있다는 것을 알려드린 것뿐이며 해당 플러그인을 추천하는 것은 아닙니다. 해당 플러그인이 작동하지 않는 것 같다면, 먼저는 매뉴얼을 살펴보시기 바랍니다.

      이 블로그에서는 이 글에서 소개하는 스크립트를 사용하여 애드센스 광고를 지연 로드시키고 있습니다. 이러한 스크립트를 사용할 때에는 광고가 제대로 표시되는지 면밀한 관찰이 필요한 것 같습니다.

      응답
  2. 안녕하세요. 또 질문입니다. ㅎㅎ
    혹시 현재 애드센스 코드는 어떻게 삽입하셨나요?
    저의 경우는 제너레이터프레스 테마 후크로 헤더에 자동광고 코드를 넣고, 나머지 광고소스는 맨 첫줄 중복되는 코드를 제외하고 넣었습니다. 그런데 페이지 속도가 상당히 느려서.. 여기까지 왔습니다.

    몰래? 이 사이트 속도를 분석하니 굉장히 빠르더라고요. 애드센스 관련 코드도 보이지 않고요.
    어떤식으로 진행하셨는지 알고 싶습니다

    응답
    • 애드센스 광고 개수를 늘리면 속도에 부정적인 영향을 미칠 것입니다. 이 블로그에서는 GeneratePress 테마의 Element를 사용하여 광고 코드를 추가했습니다. 아마 본문에서 제시된 코드와 비슷한 코드(조금 다를 수 있음)를 활용하여 광고가 지연 로드 되도록 했던 것으로 기억합니다. (너무 오래되어 기억이 가물하네요.ㅎㅎ) 애드센스 사이트에서 자동광고 기능을 활성화한 경우, 본문에 광고 코드를 추가하면 헤더 섹션에 광고 코드를 별도로 추가할 필요는 없습니다.

      응답
      • 위와 같은 방식으로 하셨군요.!

        오.. 그럼 포스팅이 보여지는 곳이 아닌 곳에서는 자동광고 코드를 보이게 설정하고,
        포스팅이 보이는 곳에서는 자동광고코드를 안보이게 해서 사이트를 가볍게 할 수도 있겠네요.^^

      • 위와 코드와 비슷한 것으로 기억하지만 동일하지 않을 수 있습니다. 본문의 코드로 테스트를 해보시기 바랍니다. 구글 크롬 콘솔에서 오류가 발생하지 않는지 체크해보세요. 이 블로그 글에서는 콘솔에서 오류가 표시되지 않을 것입니다. 본문의 방식대로 하면 오류가 표시되었던 것 같습니다(오래되어 기억이 가물가물....).

      • 와 너무 감사합니다.! 우선 첫번째 두번째 모두 속도가 크게 증가하였습니다.
        첫번째는 autopize 플러그인을 사용하지 않기에 굳이써야 하나 싶어서.. 두번째로 넘어왔습니다.

        구글페이지속도는 모바일 96 pc 100 그리고 핑덤에서는 99가 나왔습니다.!

        다만, 어제 글에 남긴것처럼 광고가 나왔다 안나왔다 하는 문제가 또 다시 생겼네요.

        구글크롬콘솔에서도 오류와 경고가 모두 없어졌습니다.!!

        혹시 시간난다면 한 번만 훝어봐주실 수 있을까요

        https://e-asyman.com/

      • 구글 크롬 콘솔에서 오류가 발생하지 않네요. 글에 광고가 제대로 안 나오는 것은 며칠 더 지켜보시면 좋을 것 같습니다. 방문자 수가 적다면 방문자 수가 제법 될 때까지 기다린 후에 체크해보시기 바랍니다.

    • 구글 애드센스 광고 때문에 페이지 로딩 속도가 느린 경우에는 효과가 있을 것입니다.
      하지만 저는 페이지 상단에 있는 광고가 지연 로드되면서 제대로 로드되지 않는 것 같아서 사용은 하지 않고 있습니다.
      이 문제가 발생하는 경우 여러 개의 광고를 표시할 때 상단의 광고를 제외한 광고에 이 방법을 적용하면 효과가 있을 것입니다.

      응답
  3. 자동 광고에도 적용이 될까요?

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

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

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

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

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

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

      응답