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