오늘날 디지털 세상에서 온라인 광고는 우리 모두가 즐길 수 있는 무료 웹에서 매우 중요한 부분입니다. 하지만 광고가 제대로 구현되지 않으면 탐색 속도가 느려지고 사용자가 혼란스러워하며 참여도가 낮아질 수 있습니다. 페이지 속도에 영향을 주지 않으면서 원활한 사용자 환경을 보장하고 웹사이트 소유자의 수익 기회를 극대화하면서 광고를 효과적으로 로드하는 방법을 알아보세요.
대부분의 웹사이트는 온라인 광고에 크게 의존하고 있습니다. 그러나 광고가 웹사이트에 게재되면 사용자 환경과 전반적인 페이지 실적이 저하될 수 있습니다. 따라서 웹사이트 소유자와 광고주의 수익 창출과 실적, 그리고 사용자 환경 간에 균형을 유지하는 것이 중요합니다.
콘텐츠 내에 광고를 광범위하게 게재하여 높은 수익을 창출하는 웹사이트의 경우 그러나 광고가 너무 많아 사용자의 불만을 초래하여 사용자 만족도와 이탈률이 높아지게 됩니다. 광고를 통해 높은 수익을 얻을 수 있는 가능성에도 불구하고 이탈은 웹사이트의 성공을 악화시킵니다.
다른 한편으로는 광고가 없는 웹사이트를 생각해 보세요. 이 광고 없는 환경은 빠른 로드 시간과 원활한 탐색 환경으로 상당한 수의 사용자를 유치합니다. 하지만 수익 창출 전략이 마련되어 있지 않으면 웹사이트에서 수익을 창출하지 못하여 장기적인 지속 가능성과 성장을 저해할 수 있습니다.
두 시나리오 모두 수익 창출, 사용자, 실적의 균형을 맞추는 것이 얼마나 중요한지 잘 보여줍니다.
코어 웹 바이탈 활용하기
페이지 속도에 부정적인 영향을 주지 않으면서 광고를 로드하려면 코어 웹 바이탈을 통과하는 것이 중요합니다. Core Web Vitals는 콘텐츠가 포함된 최대 페인트 (LCP), 누적 레이아웃 변경 (CLS), 다음 페인트와의 상호작용 (INP)과 같은 측정항목으로 구성되어 있으며 웹사이트의 사용자 경험 품질을 측정하는 사용자 환경 측정항목입니다.
최대 콘텐츠 렌더링 시간(LCP)
이 측정항목은 가장 큰 콘텐츠가 포함된 요소가 표시 영역 내에 표시되는 데 걸리는 시간을 측정하기 때문에 LCP 최적화에 중점을 두어야 합니다. 웹사이트 소유자는 광고 콘텐츠의 로드 시간을 최소화하고 비동기 로드 기술에 우선순위를 부여함으로써 페이지에서 가장 눈에 띄는 콘텐츠 요소의 렌더링 시간을 줄이고 LCP를 줄일 수 있습니다.
다음 페인트에 대한 상호작용 (INP)
둘째, 반응형 사용자 경험을 위해서는 INP를 개선하는 것이 중요합니다. INP는 페이지의 수명 전체에 걸쳐 발생하는 모든 클릭, 탭, 키보드 상호작용의 지연 시간을 측정합니다. 결과 값은 완료하는 데 가장 오래 걸린 상호작용인 경우가 가장 많으며, 사용자 상호작용에 빠르게 반응하는 페이지의 전반적인 기능을 나타냅니다.
사용자 상호작용을 지연시키는 광고가 INP에 부정적인 영향을 미칩니다. 이로 인해 느려지거나 극단적인 경우에는 완전히 작동하지 않는 환경을 만들어 사용자가 실망할 수 있습니다. 광고를 위한 지연 로드를 구현하고 중요하지 않은 JavaScript 실행을 지연하면 페이지의 INP를 줄여 전반적인 페이지 응답성을 개선할 수 있습니다.
레이아웃 변경 횟수(CLS)
마지막으로 CLS는 페이지 로드 중에 발생하는 예상치 못한 레이아웃 변화의 양을 측정하여 페이지의 시각적 안정성을 측정합니다. 동적으로 로드되거나 크기가 조절되는 광고는 레이아웃이 불안정해질 수 있으며, 이로 인해 사용자가 페이지에서 현재 위치를 놓칠 수 있거나 예상치 못한 레이아웃 변경으로 인해 의도치 않게 잘못된 요소를 탭하게 되는 사용자 경험이 저하될 수 있습니다. 이 문제를 완화하려면 웹사이트 소유자는 CLS를 최적화하여 레이아웃 변경을 방지하기 위해 광고가 예약한 공간을 확보하도록 해야 하며, 광고 크기를 최적화하여 갑작스러운 콘텐츠 리플로우를 피해야 합니다.
웹페이지를 고유한 콘텐츠 블록으로 구성
CSS content-visibility:
속성을 사용하면서 텍스트, 이미지, 광고 콘텐츠 모두를 위한 콘텐츠 블록으로 웹페이지를 구성하면 최신 브라우저에서 전체 렌더링 시간을 크게 개선할 수 있습니다.
이러한 콘텐츠 블록 내에서 content-visibility:
속성을 전략적으로 적용하면 텍스트, 이미지, 광고 콘텐츠의 렌더링 프로세스를 최적화할 수 있습니다. 그러면 표시 영역의 콘텐츠만 완전히 렌더링되므로 초기 페이지 로드 속도가 빨라지고 사용자 상호작용이 원활해집니다. 이러한 성능 향상은 길이가 길거나 많은 광고가 포함된 페이지를 처리할 때 특히 유용합니다.
중요한 광고 슬롯의 우선순위 지정
모든 광고 슬롯이 동일한 것은 아닙니다. 예를 들어, 스크롤 없이 볼 수 있는 광고 슬롯은 조회가능성과 수익 창출 측면에서 스크롤해야 볼 수 있는 부분의 광고 슬롯보다 더 가치가 높습니다. 스크롤 없이 볼 수 있는 광고는 첫 번째 표시 영역에서 스크롤하지 않고도 볼 수 있기 때문에 사용자가 볼 가능성이 더 높기 때문입니다. 스크롤해야 볼 수 있는 부분의 광고는 사용자가 광고를 볼 수 있을 만큼 아래로 스크롤하면 표시됩니다.
스크롤 없이 볼 수 있는 부분의 광고
!['스크롤 없이 볼 수 있는 부분'을 시각적으로 표현 광고 개념](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-3.png?authuser=19&hl=ko)
스크롤 없이 볼 수 있는 부분의 광고 슬롯은 웹페이지에서 스크롤 없이 볼 수 있는 부분을 의미하며, 디지털 광고에서 상당한 가치를 보유하고 있습니다. 이러한 주요 게재위치는 다음과 같은 이유로 가치가 있는 것으로 간주됩니다.
- 스크롤 없이 볼 수 있는 부분에 게재된 광고는 사용자가 웹페이지를 로드하는 즉시 볼 수 있습니다. 사용자가 이러한 광고에 주목하고 참여할 가능성이 높기 때문에 클릭률이 높아집니다.
- 광고주는 종종 웹페이지의 상단을 가장 가치 있는 공간이라고 생각합니다. 사이트 방문은 사용자가 사이트를 방문할 때 느끼는 첫인상으로, 효과적인 프리미엄 광고를 게재하는 데 중요한 공간이 됩니다.
- 스크롤 없이 볼 수 있는 부분에 게재되는 광고는 사용자가 바로 볼 수 있기 때문에 조회 가능 노출률이 가장 높습니다. 이렇게 하면 페이지를 방문하는 대다수의 사용자가 스크롤하지 않고도 이러한 광고를 볼 수 있습니다.
하지만 초기 보기에서 스크롤 없이 볼 수 있는 부분의 광고 슬롯을 활용할 때는 수익 창출과 사용자 환경 사이의 균형을 유지하는 것이 중요합니다. 다음은 몇 가지 중요한 고려사항입니다.
- 첫 번째 화면 광고 슬롯은 사용자의 초기 표시 영역에서 최대한 빠르게 로드되어야 합니다. 광고 로드 속도가 느리면 사용자 경험에 부정적인 영향을 미치고 이탈률이 증가할 수 있습니다. 원활한 사용자 및 탐색 환경을 유지하려면 광고 로드 시간을 최적화하는 것이 중요합니다.
- 스크롤 없이 볼 수 있는 부분의 광고 게재위치도 중요하지만, 이렇게 중요한 공간에 광고를 너무 많이 게재하지 않는 것도 중요합니다. 과도한 광고는 페이지를 복잡하게 만들고, 콘텐츠 가독성을 방해하며, 사용자 경험을 저해합니다. 수익을 창출하는 것과 깔끔하고 사용자 친화적인 레이아웃을 유지하는 것 사이에서 균형을 유지하도록 노력하세요.
- 스크롤 없이 볼 수 있는 부분의 광고 슬롯이 다양한 화면 크기 및 기기와 호환되는지 확인하세요. 반응형 디자인 권장사항을 사용하면 사용자의 화면 크기와 관계없이 일관되고 시각적으로 매력적인 레이아웃을 유지하는 데 도움이 될 수 있습니다.
스크롤해야 볼 수 있는 부분 광고
!['스크롤해야 볼 수 있는 부분'의 시각적 표현 광고 개념](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-4.png?authuser=19&hl=ko)
스크롤해야 볼 수 있는 부분에 게재되는 광고 슬롯, 즉 스크롤해야 볼 수 있는 부분에 게재되는 광고 역시 디지털 광고 분야에서 상당한 가치를 지닙니다. 이러한 게재위치는 스크롤 없이 볼 수 있는 부분을 보완하는 독특한 이점을 제공합니다.
스크롤해야 볼 수 있는 부분에 게재되는 광고는 사용자가 더 많은 콘텐츠를 탐색할 때 유용합니다. 이러한 게재위치는 추가 정보를 적극적으로 찾는 참여도 높은 사용자의 관심을 끌기 때문에 좀 더 복잡한 메시지나 스토리텔링을 전달하려는 브랜드에 유용합니다.
- 처음에 보이지 않는 광고 슬롯은 옆에 있는 콘텐츠와 정렬되어 문맥 관련성을 확보할 수 있습니다. 이러한 일치를 통해 사용자가 탐색 중인 콘텐츠와 관련된 광고를 발견함에 따라 사용자 참여도를 높일 수 있습니다.
- 스크롤 해야 볼 수 있는 부분 광고를 신중하게 디자인하면 주변 콘텐츠와 자연스럽게 어우러져 사용자에게 덜 방해가 될 수 있습니다. 네이티브 광고라고도 하는 이 같은 통합을 통해 더 조화로운 사용자 경험을 제공할 수 있습니다.
- 스크롤이 필요한 광고 게재위치가 있으면 공간이 넉넉하고 자유롭게 실험할 수 있어 더욱 창의적인 디자인과 형식을 유연하게 활용할 수 있습니다. 동영상 광고, 양방향 요소, 큰 이미지를 지연 로드하여 경험을 방해하지 않으면서 사용자의 관심을 끌 수 있습니다.
그러나 스크롤해야 볼 수 있는 부분의 광고 게재위치의 경우 다음과 같은 사항을 고려해야 합니다.
- 스크롤해야 볼 수 있는 부분에 게재되는 광고도 효과적일 수 있지만 스크롤해야 볼 수 있는 부분에 광고가 게재됩니다. 시각적 신호나 콘텐츠 티저를 구현하면 사용자가 더 많은 콘텐츠를 탐색하도록 유도하여 광고가 게재될 가능성이 높아집니다.
- 스크롤해야 볼 수 있는 부분에 게재되는 광고의 경우 콘텐츠 품질이나 가독성이 저하되어서는 안 됩니다. 사용자에게 부담을 주지 않고 긍정적인 사용자 경험을 제공하기 위해 광고와 콘텐츠 간의 균형을 유지합니다.
- 스크롤 없이 볼 수 있는 부분의 광고 게재위치와 달리 스크롤 해야 볼 수 있는 부분의 광고는 즉시 로드하지 않아도 됩니다. 광고가 사용자의 표시 영역에 근접할 때까지 광고의 로드를 지연하면 전반적인 페이지 로드 속도를 개선하고 초기 페이지 렌더링 시간을 줄일 수 있습니다.
스크롤 없이 볼 수 있는 광고를 전략적으로 사용할 경우 스크롤 없이 볼 수 있는 부분의 광고를 보완하고, 창의적인 광고 형식과 문맥적 관련성을 위한 플랫폼을 제공할 수 있습니다. 하지만 가시성 최적화, 콘텐츠 균형 조정, 광고 로드 타이밍 관리는 긍정적인 사용자 경험을 보장하는 데 중요한 고려사항입니다.
현재 Google 게시자 태그 (GPT) 권장사항:
적절한 경우 광고 지연 로드
![지연 로드와 지연 로드 리소스를 비교한 시각화 리소스가 지연 로드되면 페이지 로드 중에 대역폭이 보존되고 사용자가 가장 쉽게 볼 수 있는 지점까지 리소스가 지연됩니다.](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-5.png?authuser=19&hl=ko)
지연 로드는 중요하지 않은 리소스가 필요할 때까지 로드를 지연시키는 기술입니다. 바로 보이지 않는 광고 (즉, 스크롤해야 볼 수 있는 부분의 광고)에 지연 로드를 적용하면 광고가 눈에 띌 때만 로드되므로 대역폭이 절약되고 전반적인 페이지 속도가 향상됩니다. 이제 브라우저에 loading=lazy
속성과 함께 iframe에 대한 네이티브 지연 로드가 포함됩니다.
지연 로드를 구현하면 사용자의 표시 영역에 도달하기 직전에 광고를 동적으로 가져와 페이지 수명 주기의 중요한 부분에서 기본 스레드에서 초기 로드 시간과 총 차단 시간 (TBT) (INP와의 상관관계가 높은)을 줄일 수 있으므로 사용자 경험에 미치는 부정적인 영향이 최소화됩니다.
페이지를 새로고침하지 않고 광고를 새로고침합니다.
![최상위 페이지를 새로고침하지 않고 페이지에서 새로고침되는 광고를 시각화한 것입니다.](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-6.gif?authuser=19&hl=ko)
페이지 성능과 광고 로드의 균형을 맞출 수 있는 또 다른 기법은 전체 페이지를 새로고침하지 않고 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>
광고 크기, 게재위치, 형식 최적화
![표시 영역 크기가 다양한 기기를 보여주는 삽화로, 광고 게재위치가 녹색 상자로 양식화되어 있고 각각 '광고'라고 표시되어 있습니다.](https://web.developers.google.cn/static/articles/loading-ads-page-speed/image/fig-7.png?authuser=19&hl=ko)
광고의 크기, 게재위치, 형식은 페이지 속도에 상당한 영향을 미칠 수 있습니다. 광고 크기가 크면 페이지 로드 속도가 느려져 사용자가 불만을 느낄 수 있습니다. 이를 방지하려면 웹사이트 소유자가 광고주와 긴밀히 협력하여 광고 크기와 형식을 최적화해야 합니다. 압축된 이미지 형식과 효율적인 광고 소재 디자인을 사용하도록 장려하면 시각적 품질을 손상시키지 않으면서 파일 크기를 줄일 수 있습니다. 이러한 최적화를 통해 페이지 속도가 개선될 뿐만 아니라 대역폭이 제한된 사용자의 데이터 소비도 최소화됩니다.
더 나은 광고 표준(Better Ads Standard)
광고 표시와 관련하여 더 나은 광고 표준(Better Ads Standard)을 준수하는 것이 중요합니다. 더 나은 광고 표준(Better Ads Standard)은 방해가 되고 방해가 되는 광고 형식을 줄여 사용자 경험을 개선할 뿐만 아니라 광고 게재 위치 및 페이지 로드 시간에도 긍정적인 영향을 미칩니다.
이러한 표준을 따르면 광고를 방해하거나 방해가 되는 위치에 광고가 게재될 가능성이 높아져 사용자 참여도와 클릭률이 높아질 수 있습니다.
또한 이러한 가이드라인을 준수할 경우 가볍고 리소스 사용이 적은 광고 형식을 선호하므로 페이지 로드 속도가 빨라져 전반적인 웹사이트 실적과 사용자 만족도가 개선될 수 있습니다.
광고 네트워크 및 제공업체에 대한 전략적 평가
모든 광고 네트워크와 제공업체의 실적이 동일한 것은 아닙니다. 페이지 속도를 최적화하려면 웹사이트 소유자가 다양한 광고 네트워크, 헤더 입찰 구현 및 제공업체의 실적을 꼼꼼하게 평가해야 합니다.
속도를 우선시하고 간단한 광고 콘텐츠를 효율적으로 게재한 이력이 있는 제공업체와 파트너십을 맺으면 페이지 성능을 크게 높이고 사용자 경험을 개선할 수 있습니다.
결론
온라인 광고를 통해 수익을 극대화하면서 우수한 사용자 환경을 제공하려는 웹사이트 소유자에게는 수익 창출과 실적 간의 균형을 유지하는 것이 매우 중요합니다.
웹사이트 소유자는 비동기 로드, 지연 로드, 광고 형식 및 크기 최적화, 지능형 캐싱 활용 및 신중한 광고 네트워크 평가, 헤더 입찰 및 제공업체와 같은 기술을 사용하여 페이지 성능을 저하시키지 않고 광고를 로드하는 문제를 성공적으로 해결할 수 있습니다. 효율적인 광고 게재에 우선순위를 두면 궁극적으로 사용자 계층화, 참여도 향상, 지속 가능한 수익 창출을 보장할 수 있습니다.
각주
- 광고 서버에는 적용되는 제한사항 및 요구사항이 있을 수 있습니다. 예를 들어 Ad Manager에서는 게시자에게 UI에서 새로고침되는 인벤토리를 선언하도록 요구합니다. 일부 구매자는 240초 이상의 새로고침 선언을 요구합니다. 일반적으로 새로고침 사이의 간격이 길수록 구매자에게 더 바람직한 인벤토리가 됩니다. 자세히 알아보기