페이지 속도에 영향을 주지 않으면서 광고를 효과적으로 로드하기

오늘날의 디지털 세상에서 온라인 광고는 우리 모두가 즐기는 무료 웹의 중요한 부분입니다. 하지만 광고가 잘못 구현되면 탐색 환경이 느려지고 사용자의 만족도가 떨어지고 참여도가 낮아질 수 있습니다. 페이지 속도에 영향을 주지 않으면서 광고를 효과적으로 로드하고, 원활한 사용자 환경을 보장하며, 웹사이트 소유자의 수익 기회를 극대화하는 방법에 대해 알아보세요.

Markus Bordihn
Markus Bordihn

웹사이트는 온라인 광고에 대한 의존도가 매우 높습니다. 그러나 웹사이트에 광고가 게재되면 사용자 경험과 전반적인 페이지 실적이 저하될 수 있습니다. 따라서 웹사이트 소유자와 광고주의 수익 창출과 실적, 사용자 경험 사이의 균형을 유지하는 것이 중요합니다.

높은 수익을 목표로 콘텐츠 내에 광고를 광범위하게 배치하는 웹사이트를 생각해 보세요. 그러나 광고 수가 너무 많으면 사용자가 실망하게 되어 사용자 경험이 저하되고 이탈률이 높아지게 됩니다. 광고를 통해 상당한 수익을 창출할 수 있지만 이탈은 웹사이트의 성공에 심각한 영향을 줍니다.

이와는 반대로 광고가 없는 웹사이트를 생각해 보세요. 이 광고 없는 환경은 빠른 로드 시간과 원활한 탐색 환경으로 인해 상당한 수의 사용자를 유치합니다. 그러나 수익 창출 전략이 마련되어 있지 않으면 웹사이트에서 수익을 창출하기 어려워 장기적인 지속 가능성과 성장을 저해할 수 있습니다.

두 시나리오 모두 수익 창출, 사용자, 실적의 균형을 맞추는 것이 중요하다는 것을 보여줍니다.

코어 웹 바이탈 활용

페이지 속도에 부정적인 영향을 미치지 않고 광고를 로드하려면 코어 웹 바이탈을 통과해야 합니다. 최대 콘텐츠 페인트 (LCP), 누적 레이아웃 변경 (CLS), 다음 페인트 상호작용 (INP)과 같은 측정항목으로 구성된 코어 웹 바이탈은 웹사이트의 사용자 환경 품질을 측정하는 사용자 환경 측정항목입니다.

최대 콘텐츠 렌더링 시간(LCP)

이 측정항목은 콘텐츠가 포함된 가장 큰 요소가 표시 영역 내에 표시되는 데 걸리는 시간을 측정하므로 LCP 최적화에 집중하는 것이 중요합니다. 광고 콘텐츠의 로드 시간을 최소화하고 비동기 로드 기법을 우선시함으로써 웹사이트 소유자는 LCP를 줄이고 페이지에서 콘텐츠가 가장 중요한 요소의 렌더링 시간을 줄일 수 있습니다.

다음 페인트와의 상호작용 (INP)

둘째, 반응형 사용자 환경을 위해서는 INP를 개선하는 것이 중요합니다. INP는 페이지의 수명 전반에 걸쳐 발생하는 각각의 클릭, 탭, 키보드 상호작용의 지연 시간을 측정합니다. 결과 값은 완료하는 데 가장 오래 걸린 상호작용인 경우가 많으며, 사용자 상호작용에 빠르게 반응할 수 있는 페이지의 전반적인 기능을 나타냅니다.

사용자 상호작용을 지연시키는 광고는 INP에 부정적인 영향을 미칩니다. 이렇게 되면 속도가 느려지거나 극단적인 경우에 완전히 망가진 느낌이 드는 사용 환경이 조성되어 사용자가 실망할 수 있습니다. 광고에 지연 로드를 구현하고 중요하지 않은 JavaScript 실행을 지연하면 페이지의 INP를 줄일 수 있으므로 전반적인 페이지 응답성을 개선할 수 있습니다.

레이아웃 변경 횟수(CLS)

마지막으로 CLS는 페이지 로드 중에 발생하는 예기치 않은 레이아웃 변경의 양을 측정하여 페이지의 시각적 안정성을 측정합니다. 동적으로 로드되거나 크기가 조절되는 광고는 레이아웃이 불안정하여 사용자가 페이지의 위치를 추적하지 못하거나 예기치 않은 레이아웃 변경으로 인해 의도치 않게 잘못된 요소를 탭하게 되어 사용자 경험이 저하될 수 있습니다. 이 문제를 완화하려면 웹사이트 소유자가 CLS를 최적화하여 광고가 레이아웃 변경을 방지하도록 공간을 예약하도록 해야 하며, 갑작스러운 콘텐츠 리플로우를 방지하도록 광고 크기를 최적화해야 합니다.

고유한 콘텐츠 블록으로 웹페이지 구조화

CSS content-visibility: 속성을 사용하면서 텍스트, 이미지 및 광고 콘텐츠 모두를 위한 콘텐츠 블록으로 웹페이지를 구조화하면 최신 브라우저에서 전반적인 렌더링 시간을 크게 개선할 수 있습니다.

이러한 콘텐츠 블록 내에서 content-visibility: 속성을 전략적으로 적용하여 텍스트, 이미지, 광고 콘텐츠의 렌더링 프로세스를 최적화할 수 있습니다. 이렇게 하면 현재 표시 영역에 있는 콘텐츠만 완전히 렌더링되므로 초기 페이지 로드 속도가 빨라지고 사용자 상호작용이 더 원활해집니다. 이러한 실적 향상은 광고가 많은 페이지를 다룰 때 특히 유용합니다.

중요한 광고 슬롯의 우선순위 지정

모든 광고 슬롯이 동일한 것은 아닙니다. 예를 들어 일반적으로 스크롤 없이 볼 수 있는 부분의 광고 슬롯은 조회가능성과 수익 창출 면에서 스크롤해야 볼 수 있는 부분의 광고 슬롯보다 더 가치가 높습니다. 스크롤 없이 볼 수 있는 부분의 광고는 첫 번째 표시 영역에서 스크롤하지 않고도 볼 수 있기 때문에 사용자가 볼 가능성이 더 높기 때문입니다. 스크롤해야 볼 수 있는 부분 광고는 사용자가 페이지를 충분히 아래로 스크롤하면 표시됩니다.

스크롤 없이 볼 수 있는 부분 광고

'스크롤 없이 볼 수 있는 부분' 광고 개념을 시각적으로 표현

스크롤 없이 볼 수 있는 부분의 광고 슬롯은 웹페이지에서 스크롤 없이 볼 수 있는 부분을 의미하며, 디지털 광고에서 상당한 가치를 갖습니다. 이러한 주요 게재위치는 다음과 같은 이유로 가치가 있는 것으로 간주됩니다.

  • 스크롤 없이 볼 수 있는 부분에 게재된 광고는 웹페이지를 로드하는 즉시 사용자에게 표시됩니다. 사용자가 이러한 광고를 보고 참여할 가능성이 높기 때문에 클릭률이 높아집니다.
  • 광고주는 보통 웹페이지의 상단을 가장 중요한 위치로 여깁니다. 사용자가 사이트를 방문할 때 받는 첫인상으로, 영향력이 큰 프리미엄 광고를 게재하는 데 중요한 영역입니다.
  • 스크롤 없이 볼 수 있는 부분에 있는 광고는 사용자가 바로 볼 수 있는 곳에 위치하므로 조회가능 노출률이 가장 높습니다. 이렇게 하면 페이지를 방문하는 대부분의 사용자가 아래로 스크롤하지 않고도 이러한 광고를 볼 수 있습니다.

그러나 초기 보기에서 스크롤 없이 볼 수 있는 광고 슬롯을 활용할 때는 수익 창출과 사용자 환경 사이의 균형을 유지하는 것이 중요합니다. 다음은 몇 가지 주요 고려사항입니다.

  • 첫 번째 화면 광고 슬롯은 사용자의 초기 표시 영역에서 최대한 빠르게 로드되어야 합니다. 광고 로드 속도가 느리면 사용자 경험에 부정적인 영향을 미치고 이탈률이 증가할 수 있습니다. 원활한 사용자 및 탐색 환경을 유지하려면 광고 로드 시간을 최적화하는 것이 중요합니다.
  • 스크롤 없이 볼 수 있는 부분의 광고 게재위치도 중요하지만 이 자리에 너무 많은 광고가 게재되지 않도록 해야 합니다. 과도한 광고는 페이지를 복잡하게 만들고 콘텐츠 가독성을 저하하며 사용자 경험을 저하시킵니다. 수익 창출과 깔끔하고 사용자 친화적인 레이아웃을 유지하는 것 사이에서 균형을 맞추도록 노력하세요.
  • 스크롤 없이 볼 수 있는 부분의 광고 슬롯이 다양한 화면 크기 및 기기와 호환되는지 확인하세요. 반응형 디자인 방식을 통해 사용자의 화면 크기와 관계없이 일관되고 시각적으로 매력적인 레이아웃을 유지할 수 있습니다.

스크롤해야 볼 수 있는 부분 광고

'스크롤해야 볼 수 있는 부분' 광고 개념을 시각적으로 표현

스크롤해야 볼 수 있는 부분의 광고 슬롯, 즉 웹페이지 내에서 아래로 스크롤해야만 보이는 광고 슬롯은 디지털 광고 세계에서 상당한 가치를 지니고 있습니다. 이러한 게재위치는 스크롤 없이 볼 수 있는 부분을 보완하는 차별화된 장점을 제공합니다.

스크롤해야 볼 수 있는 부분에 게재된 광고는 아래로 스크롤하여 더 많은 콘텐츠를 탐색하는 사용자에게 도움이 됩니다. 이러한 게재위치는 추가적인 정보를 적극적으로 찾는 참여도 높은 사용자의 관심을 끌 수 있으므로 보다 복잡한 메시지나 스토리텔링을 전달하고자 하는 브랜드에 적합합니다.

  • 처음에 표시되지 않는 광고 슬롯은 옆에 있는 콘텐츠와 나란히 맞춰져 문맥상 관련성이 더 높은 기회를 제공할 수 있습니다. 이렇게 하면 사용자가 탐색 중인 콘텐츠와 관련된 광고를 찾을 때 사용자의 참여도가 높아질 수 있습니다.
  • 스크롤해야 볼 수 있는 부분의 광고는 신중하게 디자인하면 주변 콘텐츠와 자연스럽게 어우러져 사용자에게 방해가 되지 않는 것처럼 보입니다. 네이티브 광고라고도 하는 이러한 통합은 더욱 조화로운 사용자 경험을 제공할 수 있습니다.
  • 스크롤 필수 광고 게재위치는 넉넉한 공간과 자유로운 실험 등 더욱 창의적인 디자인과 형식의 유연성을 제공합니다. 동영상 광고, 상호작용 요소, 더 큰 이미지를 지연 로드하면 사용자 경험을 방해하지 않으면서 사용자의 관심을 끌 수 있습니다.

하지만 스크롤해야 볼 수 있는 광고 게재위치의 경우 다음 사항을 고려해야 합니다.

  • 스크롤해야 볼 수 있는 부분에 광고를 게재하는 것도 효과적일 수 있지만, 사용자가 아래로 스크롤하도록 유도하는 것이 중요합니다. 시각적 신호나 콘텐츠 티저를 구현하면 사용자가 추가로 탐색하도록 유도하여 광고 노출 가능성을 높일 수 있습니다.
  • 스크롤해야 볼 수 있는 부분에 광고를 게재하면 콘텐츠 품질이나 가독성을 떨어뜨리지 않습니다. 사용자가 부담스럽게 느끼지 않도록 광고와 콘텐츠 간의 균형을 유지하여 긍정적인 사용자 경험을 보장합니다.
  • 스크롤 없이 볼 수 있는 부분의 광고 게재위치와 달리 스크롤해야 볼 수 있는 부분의 광고는 바로 로드하지 않아도 됩니다. 이러한 광고가 사용자의 표시 영역에 가까워질 때까지 광고 로드를 지연하면 전반적인 페이지 로드 속도를 개선하고 초기 페이지 렌더링 시간을 줄일 수 있습니다.

전략적으로 사용할 경우 스크롤해야 볼 수 있는 부분 광고는 스크롤 없이 볼 수 있는 부분의 광고를 보완하고 창의적인 광고 형식과 문맥 관련성을 위한 플랫폼을 제공할 수 있습니다. 하지만 유용한 사용자 환경을 제공하려면 가시성을 최적화하고 콘텐츠의 균형을 유지하고 광고 로드 시간을 관리해야 합니다.

현재 Google 게시자 태그 (GPT) 권장사항:

적절한 위치에 광고 지연 로드

지연 로드와 지연 로드가 아닌 리소스의 시각화 리소스가 지연 로드되면 페이지 로드 중에 대역폭이 보존되고 사용자가 리소스를 볼 가능성이 가장 높은 지점까지 리소스가 지연됩니다.

지연 로드는 중요하지 않은 리소스가 필요할 때까지 로드를 지연시키는 기술입니다. 바로 표시되지 않는 광고 (즉, 스크롤해야 볼 수 있는 부분의 광고)에 지연 로드를 적용하면 광고가 표시될 때만 로드되므로 대역폭이 절약되고 전반적인 페이지 속도가 개선됩니다. 이제 브라우저에 간단한 loading=lazy 속성과 함께 iframe에 대한 네이티브 지연 로드가 포함됩니다.

지연 로드를 구현하면 광고가 사용자의 표시 영역에 들어가려고 할 때 동적으로 가져오기 때문에 페이지 수명 주기의 중요한 부분에서 기본 스레드의 초기 로드 시간과 총 차단 시간 (TBT) (INP와 높은 상관관계 있음)이 감소합니다. 따라서 사용자 환경에 미치는 부정적인 영향이 최소화됩니다.

페이지를 새로고침하지 않고 광고 새로고침

최상위 페이지를 새로고침하지 않고 페이지에서 새로고침되는 광고를 시각화한 것입니다.

페이지 성능과 광고 로드의 균형을 맞출 수 있는 또 다른 기술은 전체 페이지를 다시 로드하지 않고 30~240초1마다 광고를 새로고침하는 것입니다. 이 접근 방식을 사용하면 사용자의 탐색 환경을 방해하거나 불필요한 지연을 초래하지 않고 광고 콘텐츠를 동적으로 업데이트할 수 있습니다.

모바일 앱의 경우 기존 웹 보기에서 광고를 새로고침하면 전체 페이지를 다시 로드하거나 WebView를 다시 만드는 것보다 성능이 향상됩니다. 이는 데이터와 리소스 오버헤드를 최소화하므로 처음부터 시작할 때 발생하는 지연 시간 없이 더 빠르게 콘텐츠를 업데이트하고 더 원활한 사용자 경험을 제공할 수 있기 때문입니다.

광고를 비동기식으로 새로고침하면 웹사이트 소유자는 페이지 콘텐츠를 그대로 유지하면서 실시간으로 광고 콘텐츠를 원활하게 업데이트할 수 있습니다. 이렇게 하면 전체 페이지를 새로 고칠 필요가 없어 페이지 속도가 개선될 뿐만 아니라 관련성 높고 흥미로운 광고가 계속 게재됩니다. 이 기법을 통해 웹사이트 소유자는 수익 창출과 실적 사이의 균형을 맞추고, 시의적절하고 흥미로운 광고 콘텐츠를 제공하는 동시에 사용자 경험에 미치는 부정적인 영향을 최소화할 수 있습니다.

광고 슬롯 새로고침은 레시피 페이지, DIY 튜토리얼, 기타 콘텐츠가 풍부한 웹사이트와 같이 사용자가 더 오래 머무르는 경향이 있는 페이지에서 특히 유용합니다. 예를 들어 사용자가 튜토리얼을 따라하는 데 상당한 시간을 할애할 수 있는 DIY 공예 페이지에서 단계 사이의 휴식 시간에 광고 슬롯을 전략적으로 새로고침하거나 이미지 갤러리를 시청하는 동안 광고 슬롯을 전략적으로 새로고침하면 사용자 경험과 광고 수익이 모두 향상될 수 있습니다. 레시피 페이지에서도 사용자가 재료 목록이나 조리법을 스크롤한 후 광고 슬롯을 새로고침하면 사용자의 관심을 유지할 수 있습니다.

비동기 로드 우선순위 지정

광고를 게재하는 동안 페이지 속도를 개선할 수 있는 가장 효과적인 전략 중 하나는 비동기 로드입니다. 비동기 로드는 기본 웹페이지 콘텐츠와는 별개로 광고를 로드하므로 광고가 완전히 로드될 때까지 기다리지 않고도 페이지를 계속 렌더링하면서 상호작용할 수 있습니다. 이렇게 하면 인지되는 로드 시간이 크게 감소하여 사용자 만족도가 향상됩니다.

스크립트 태그 정의에 async 속성을 포함합니다. 예를 들면 다음과 같습니다.

애드센스:

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

애드센스 (자동 광고):

<script async data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Google 게시자 태그:

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

광고 크기, 게재위치, 형식 최적화

표시 영역 크기가 다양한 기기에 있는 삽화. 광고 게재위치는 각각 &#39;Ad&#39;라고 표시된 초록색 상자 모양으로 표시되어 있습니다.

광고의 크기, 게재위치, 형식은 페이지 속도에 큰 영향을 미칠 수 있습니다. 광고 크기가 크면 페이지 로드 속도가 느려져 사용자가 불편을 겪을 수 있습니다. 문제를 완화하려면 웹사이트 소유자가 광고주와 긴밀하게 협력하여 광고 크기와 형식을 최적화해야 합니다. 압축된 이미지 형식을 사용하고 효율적인 광고 소재 디자인을 사용하도록 권장하면 시각적 품질을 저해하지 않으면서 파일 크기를 줄일 수 있습니다. 이러한 최적화를 통해 페이지 속도가 향상될 뿐만 아니라 대역폭이 제한된 사용자의 데이터 소비도 최소화됩니다.

더 나은 광고 표준(Better Ads Standard)

광고를 표시할 때는 더 나은 광고 표준(Better Ads Standard)을 준수해야 합니다. 그러면 방해가 되는 광고 형식을 줄여 사용자 경험을 개선할 뿐 아니라 광고 게재 위치와 페이지 로드 시간에 긍정적인 영향을 미칩니다.

이러한 기준을 따르면 방해가 덜 되고 방해가 되지 않는 위치에 광고가 게재될 가능성이 높으므로 사용자 참여 발생 시간 및 클릭률을 높일 수 있습니다.

또한 가볍고 리소스 사용이 적은 광고 형식이 선호되므로 이 가이드라인을 준수하면 페이지 로드 속도가 빨라져 전반적인 웹사이트 성능과 사용자 만족도가 높아질 수 있습니다.

광고 네트워크 및 제공업체에 대한 전략적 평가

모든 광고 네트워크와 제공업체가 실적 면에서 동일하게 만들어지는 것은 아닙니다. 최적의 페이지 속도를 얻으려면 웹사이트 소유자가 다양한 광고 네트워크, 헤더 입찰 구현, 제공업체의 실적을 꼼꼼하게 평가해야 합니다.

속도를 우선시하고 가벼운 광고 콘텐츠를 효율적으로 게재해 온 이력을 보유한 제공업체와 파트너십을 맺으면 페이지 실적이 크게 향상되고 사용자 환경이 개선될 수 있습니다.

결론

온라인 광고를 통해 수익을 극대화하는 동시에 우수한 사용자 경험을 제공하려는 웹사이트 소유자에게는 수익 창출과 실적 간의 균형을 유지하는 것이 중요합니다.

웹사이트 소유자는 비동기 로드, 지연 로드, 광고 형식 및 크기 최적화, 지능형 캐싱을 활용하고 광고 네트워크를 신중하게 평가하며, 헤더 입찰 및 제공업체와 같은 기술을 사용하여 페이지 실적을 저하시키지 않으면서 광고 로드의 어려움을 극복할 수 있습니다. 효율적인 광고 게재에 우선순위를 두면 궁극적으로 사용자 계층화, 참여도 증가, 지속 가능한 수익 창출이 보장됩니다.

각주

  1. 광고 서버에는 적용되는 제한사항과 요구사항이 있을 수 있습니다. 예를 들어 Ad Manager에서는 게시자에게 UI에서 새로고침되는 인벤토리를 선언해야 합니다. 일부 구매자는 새로고침 선언이 240초 이상이어야 합니다. 일반적으로 새로고침 사이의 간격이 길수록 구매자에게 더욱 매력적인 인벤토리가 됩니다. 자세히 알아보기