재출시된 웹사이트의 광고 조회가능성은 75% 이상, 이탈률은 50% 감소하고 페이지 조회수는 27% 증가했습니다.
Google이 코어 웹 바이탈 이니셔티브를 발표했을 때 독일 게시자인 Netzwellt는 우수한 페이지 경험을 제공하고 광고 기반 수익 창출을 개선할 수 있는 이 새로운 측정항목의 잠재력을 빠르게 깨달았습니다. 이에 따라 광고 태그와 게재위치를 동시에 최적화하면서 일반적인 실적 권장사항을 적용하면서 웹사이트를 재출시하기로 했습니다. 우수한 UX와 빠른 페이지를 목표로 노력하는 것은 사용자 참여와 광고 수익을 최적화할 수 있는 방법임이 입증되었습니다. 페이지 조회수는 27%, 광고 조회가능성은 75%, 광고 수익은 18% 증가했습니다.
27%
페이지 조회수 증가
18%
광고 수익 증가
75%
광고 조회가능성
도전과제
다른 많은 뉴스 게시자와 마찬가지로 Netzwellt는 높은 광고 수익을 유지하면서 사용자 환경과 페이지 속도 최적화 사이에서 적절한 균형을 찾는 데 어려움을 겪었습니다. 이들이 직면한 주요 과제는 다음과 같습니다.
- 특히 여러 크기의 슬롯과 상단 배너에서 광고에 의해 트리거된 레이아웃 변경으로 인해 누적 레이아웃 변경 (CLS)이 많이 발생합니다.
- 최대 콘텐츠 페인트 (LCP)는 광고가 가장 큰 페인트이거나 히어로 이미지 로드의 대역폭을 사용하여 늦게 제공됩니다.
- 광고, 헤더 입찰, 기타 목적에 필요한 서드 파티 JavaScript로 인해 최초 입력 반응 시간 (FID)이 높습니다.
- 서드 파티 공급업체에서 제어하는 동의 대화상자에서 Core Web Vitals의 부작용(레이아웃 변경에도 추가되었으며 가장 늦게 가장 큰 페인트로 감지될 수 있음)
코어 웹 바이탈을 위한 뉴스 웹사이트 최적화
Netzwellt는 코어 웹 바이탈 관련 작업을 시작하면서 코어 웹 바이탈 최적화가 광고에 부정적인 영향을 미칠 필요는 없지만 광고 조회가능성을 개선할 수 있는 기회로 활용할 수 있다는 사실을 빠르게 깨달았습니다. 따라서 Netzwellt팀은 코어 웹 바이탈을 최적화하여 광고 조회가능성을 75% 이상 높여 가치가 더 높은 광고를 유치했습니다(디스플레이 광고의 전 세계 평균은 50%미만).
CLS 최적화
광고는 종종 늦게 로드되며 (때로는 지연 로드를 통해 의식적으로 로드됨) 여러 크기와 유동적인 광고 게재위치로 인해 실제 크기를 미리 알 수 없는 경우가 많습니다.
문제는 스크롤 없이 볼 수 있는 부분과 스크롤해야 볼 수 있는 부분의 두 가지 광고로 구분할 수 있습니다.
스크롤 없이 볼 수 있는 부분에 게재되는 광고는 크기를 알 수 없는 로드 지연으로 인해 레이아웃 급증을 일으킬 수 있습니다. 필요한 가장 큰 공간을 차단하면 UX가 악화될 수 있지만 광고주에게 고정 크기를 요청하면 광고 수입이 감소할 수 있습니다. Netzwellt는 상단 광고를 고정하고 허용되는 더 큰 배너 크기를 일부 제거하여 이 문제를 해결했습니다. 오버레이된 광고는 크기가 다른 광고에서 레이아웃 점프가 트리거되지 않도록 합니다. 게재 가능한 크기가 줄면 광고 판매에 영향을 미치지만 조회가능성이 높을수록 이를 쉽게 상쇄할 수 있습니다.
이전 데이터 및 A/B 테스트를 통해 Netzwellt는 다양한 기기 및 화면 크기에 맞는 크기와 위치, 공간 예약에 사용되는 CSS 미디어 규칙을 찾을 수 있었습니다.
스크롤해야 볼 수 있는 부분의 광고는 크게 개선할 여지가 있는 부분입니다.
- 배너가 보이지 않지만 로드되면 광고 조회가능성이 낮아지고 페이지 경험을 악화시킵니다.
- 사용자가 스크롤할 때 로드되는 배너는 추가적인 콘텐츠 이동을 유도할 수 있습니다.
우수한 페이지 경험과 높은 광고 조회가능성을 유지하기 위해 Netzwellt는 지연 로드를 구현하고 최소 공통분모 크기에 맞게 공간을 예약했습니다. 여러 크기 영역에서 배너는 높이 250픽셀을 예약하여 300x250~300x600 크기로 요청했습니다. 그 결과 크기가 작은 경우 레이아웃이 바뀌지 않고 대형 배너의 경우 레이아웃 변경 횟수도 크게 줄었습니다. 이 접근 방식은 최적의 것은 아니지만 시작과 좋은 절충안입니다.
추가로 최적화하기 위해 Netzwellt는 Intersection Observer 및 Network Information API를 사용하여 광고 게재위치를 제어하고 레이아웃 변경을 줄였습니다. 스크롤 위치와 네트워크 연결 품질에 따라 광고 위치와 지연 로드 전략이 달라지며, 광고는 여러 크기에서 고정 크기로 변경될 수 있습니다. 이 알고리즘의 목표는 항상 레이아웃 변경을 최소화하면서 광고 조회가능성을 극대화하는 것입니다. NetworkInfo API를 지원하지 않는 브라우저는 기기 및 IP에서 파생된 네트워크 유형의 조합에 기반한 프록시 값을 사용합니다. 이 적응형 로드 전략은 특히 인터넷 연결이 느린 사용자의 CLS를 줄입니다.
FID 최적화
광고에는 많은 추가 JavaScript 라이브러리가 함께 제공되는 경우가 많기 때문에 첫 입력 지연은 뉴스 게시자에게 문제로 보일 수 있습니다. Lighthouse와 같은 실험실 데이터를 볼 때는 부정적인 영향을 미치는 것 같습니다. 하지만 2020 Web Almanac의 필드 데이터를 살펴보면 많은 웹사이트가 충분히 빠르게 응답합니다. 이는 JavaScript 로드가 지연되거나 (첫 입력 후) 지연되거나, 잘 캐싱 (예: v8 코드 캐싱 처리)되거나, 광고 공급업체에 의해 제대로 최적화되기 때문입니다. 공급업체 조회가능성 추적기는 장기 작업을 피합니다. 따라서 런타임의 합계가 긴 총 차단 시간 (TBT)과 FID는 영향을 받지 않습니다. Netzwellt에게는 FID가 큰 문제가 아니었지만 다음과 같이 최적화해야 할 몇 가지 사항이 여전히 있었습니다.
- 광고 스크립트 및 제공업체를 줄이고 가능한 경우 단일 스택에 집중
- defer 또는 async로 모든 스크립트 로드
- 트리쉐이킹 및 번들 해제에 webpack 또는 유사한 기술 사용
- BEM과 유사한 간단한 CSS 규칙 사용
- 장기 실행 작업 방지 및 idle-until-urgent 패턴 사용
- 레이아웃이 영향을 받는 위치에서 RequestAnimationFrame을 사용합니다.
LCP 최적화
최대 콘텐츠 페인트는 두 가지 방식으로 광고의 영향을 받을 수 있습니다. 즉, 광고를 가장 큰 페인트로 인식하는 것이나 간접적으로 네트워크 대역폭을 정체하거나 중요한 경로에 영향을 주어 실제 가장 큰 페인트(예: 히어로 이미지)가 충분히 빠르게 로드되지 않도록 하는 것입니다.
Netzwellt는 CLS에 맞춰 최적화하면서 상단 광고 슬롯에서 이미 중간 직사각형 광고를 삭제했습니다. 이렇게 하면 광고가 가장 큰 요소가 되지 않는다는 추가적인 이점이 있습니다.
Netzwellt는 엄격한 정책에 따라 광고 위에 콘텐츠를 우선시합니다. Netzwellt는 스크롤 없이 볼 수 있는 부분에 사용되는 히어로 이미지와 글꼴에 우선순위를 두고 광고 스크립트 및 광고보다 우선하도록 주요 경로를 최적화했습니다. 이러한 우선순위 덕분에 광고의 LCP가 영향을 받지 않았습니다.
이러한 최적화 외에도 Netzwellt는 다른 모범 사례를 따랐습니다.
- 주요 렌더링 경로에서 CSS를 분리하여 헤더에 넣었습니다.
- 가장 중요한 글꼴, 스크립트, 이미지가 미리 로드되었습니다.
- 스크롤 없이 볼 수 있는 부분에 표시되는 이미지의 지연 로드를 피했습니다.
font-display="swap"을 사용했습니다.
GDPR 동의 및 코어 웹 바이탈
동의 대화상자가 코어 웹 바이탈에 부정적인 영향을 미치는 경우가 많습니다. 광고와 마찬가지로 다음 두 가지 방식으로 동의 대화상자가 코어 웹 바이탈에 영향을 미칠 수 있습니다.
- 가장 큰 페인트로 감지되거나 레이아웃 변경을 일으킨다는 것을 명시적으로 나타냅니다.
- 암시적으로, 실제 최대 페인트에서 대역폭을 훔치거나, 최대 페인트에 이르는 주요 경로를 차단하거나, 동의가 이루어질 때까지 광고를 지연함으로써 결과적으로 레이아웃 변경을 트리거할 수 있습니다.
Netzwelt는 최적화도 구현한 서드 파티 동의 제공업체와 협력합니다. 첫 번째 Netzwellt는 간단한 함정을 피할 수 있었습니다.
- 동의 스크립트는 중요한 리소스를 차단하지 않도록 비동기적으로 로드됩니다.
- 동의는 큰 요소가 LCP 내에서 가장 큰 요소로 사용될 수 없도록 형식이 지정됩니다.
- 동의 오버레이는
position: fixed를 사용하여 변화를 방지합니다. - 광고는 동의를 받은 후에만 표시되지만, 광고가 로드될 때 레이아웃이 바뀌지 않도록 사전에 적절한 공백이 유지됩니다.
- 동의 대화상자의 표시 및 배치로 인해 레이아웃 변경이 트리거되지 않는지 확인합니다. 여기서 한 가지 문제는 서비스 제공업체의 스크롤 잠금 옵션이 발견되어 해결되었습니다. 이 옵션은 스크롤 시 기사의 주요 콘텐츠를 이동하여 동의가 표시되는 동안 스크롤을 사용 중지하여 레이아웃이 바뀌었습니다.
이 작업을 마친 후에도 여전히 현장 CLS와 실습 CLS 간에 큰 불일치가 있었습니다. 실습 CLS는 0에 가까웠지만 필드 값은 기준점을 크게 상회했습니다. 조사 결과, 현재 필드 데이터에만 올바르게 캡처되는 동의 iframe 내 레이아웃 변경이 문제의 원인이었습니다. Netzwellt는 이 문제를 개선하기 위해 서드 파티 동의 제공업체와 계속 협력하고 있습니다.
뉴스 구독 모델 및 코어 웹 바이탈
뉴스 게시자는 저널리즘에 자금을 지원하기 위해 구독 모델로 전환하고 있습니다. 사용자는 사용자 환경이 열악한 웹사이트를 구독하지 않으므로 이 모델은 코어 웹 바이탈과 관련이 있습니다. 또한 구독자는 유료 콘텐츠에 광고가 표시된다고 예상하지 않지만 광고를 숨기면 레이아웃이 변경될 수 있습니다. 웹사이트에서는 사용자에게 해당 콘텐츠를 조회할 권한이 있는지, 광고를 게재할지를 확인해야 합니다. 이러한 확인으로 인해 추가 지연 시간이 발생하여 콘텐츠가 변경되거나 사용자 환경이 저하될 수 있습니다.
Netzwellt는 콘텐츠가 항상 무료이지만 구독자에게 광고가 표시되지 않는 모델을 사용하고 있습니다. 또한 지연 시간과 레이아웃 변경을 줄이기 위해 자격을 쿼리하고 저장하는 다양한 방법을 조사했습니다.
사용 권한의 초기 쿼리로 인해 항상 지연 시간이 발생하므로 사용 권한 쿼리에 시간이 너무 오래 걸리면 사이트에 마지막으로 캐시된 상태가 표시됩니다. 즉, 신규 구독자의 경우 유료 사용자가 광고를 한 번 볼 가능성이 약간 있습니다. 구독을 종료하는 사용자에게는 로컬에 저장된 사용 권한이 업데이트되기 전에 광고가 없는 로드 1회가 표시될 수 있습니다. 사용 권한이 확인되면 향후 탐색 중 추가 지연 시간과 레이아웃 변경을 방지하기 위해 LocalStorage API를 사용하여 로컬로 저장됩니다.
최적화 결과
Netzwellt의 최적화 결과는 그 자체로 의미가 있습니다. PageSpeed Insights 점수는 전 세계 뉴스 게시자 중 독보적인 수준입니다.
최적화로 페이지 경험이 개선되었지만, 비즈니스를 염두에 두고 광고 경험, 광고 조회가능성, 수익을 개선했습니다. 최적화된 페이지를 다시 실행한 후 CPM이 20~30% 증가하고 광고 조회가능성이 75%를 넘었습니다. 하지만 Netzwellt에서는 전체 수익 증가폭이 훨씬 더 높다고 가정합니다. 재출시 이후 트래픽이 증가했으며, 이는 개선된 UX로 인한 더 높은 사용자 참여와 낮은 이탈률의 때문일 수 있습니다. 트래픽이 자연스럽게 변동하므로 이러한 효과를 정량화하고 인과 관계로 설정하기가 어렵고 글로벌 팬데믹의 영향도 있습니다. 이러한 간접적인 영향으로 인해 Netzwellt가 사이트를 검토할 때 CPM뿐만 아니라 항상 모든 수치를 살피는 이유는 오해의 소지가 있을 수 있기 때문입니다. 코어 웹 바이탈 및 UX 측정항목은 모든 광고 관련 측정항목과 함께 실제 상황을 보여줍니다.
향후 계획
Netzwellt는 향후 서드 파티 쿠키가 없는 미래에는 콘텐츠를 통한 문맥 타겟팅과 우수한 UX 및 페이지 경험 (광고 조회가능성 포함)이 결합되는 것이 뉴스 게시자로서 성공의 열쇠라고 믿습니다.
따라서 Netzwellt는 Core Web Vitals에 그치지 않고 새로운 Digital Goods API를 사용하여 프로그레시브 웹 앱 (PWA), 오프라인 콘텐츠, 어두운 모드, 웹 공유 API, 신뢰할 수 있는 웹 활동 (TWA)과 같은 여러 최신 웹 기능을 구현함으로써 한 걸음 더 나아갑니다.