Lighthouse와 WebPageTest에서 쿠키 동의 배너 우회하기

Lighthouse, WebPageTest 또는 유사한 도구로 페이지를 테스트할 때, 쿠키 동의 배너가 종종 문제를 일으킵니다.

Consent Management Platform(CMP)은 레이아웃 시프트(CLS에 기여)를 유발할 수 있습니다. 모바일에서는 배너가 Largest Contentful Paint(LCP)의 주요 요소로 감지되기도 하고, 페이지의 다른 부분을 시각적으로 가려 버립니다. 또 올바르게 구현되어 있다면 페이지의 일부 리소스만 로드되기도 합니다.

사이트를 분석할 때 저는 실제 사용자 환경에 더 가까운, 보다 완전한 성능 관점을 얻기 위해 먼저 이 동의 배너를 어떻게 우회할지부터 확인합니다.

이 글에서는 쿠키 배너와 관련된 성능 문제, 이를 우회하는 방법, 그리고 우회를 위해 설정해야 할 쿠키나 localStorage 항목을 판별하는 절차를 다룹니다.

쿠키 배너의 문제점

Layout Shift, 즉 CLS

일부 배너는 페이지 상단에 다른 콘텐츠보다 먼저 표시됩니다. 배너가 페이지 렌더링이 시작된 뒤 삽입되면 초기 콘텐츠 전체가 아래로 밀리게 됩니다.

twitch.tv의 필름스트립에서는 약 4.0초에 CMP가 표시되면서 0.126의 레이아웃 시프트가 발생하는 것을 볼 수 있습니다.

이런 문제를 피하려면 배너 코드가 페이지의 초기 DOM에 포함되어야 하며, 표시 여부 판단이 초기 렌더링 전에 이뤄져야 합니다.

또 다른 방법은 배너를 페이지 콘텐츠 위에 겹쳐 보이는 팝인으로 띄워 나머지 콘텐츠를 가리고, 페이지 접근 전에 사용자의 선택을 필수로 만드는 것입니다. 이 요령은 CMP의 클릭률을 극대화하기도 합니다.

Largest Contentful Paint, 즉 LCP

일부 페이지, 특히 모바일에서는 쿠키 동의 배너가 LCP로 감지됩니다. 이런 동작은 사이트의 성능 지표를 심각하게 왜곡할 수 있습니다.

OneTrust를 사용하는 allianz.fr의 예시로, 쿠키 배너가 표시될 때 LCP(빨간 박스)가 발생합니다.

페이지 템플릿을 다양하게 테스트하는 것이 중요합니다. 일부 페이지에서는 바로 앞 캡처처럼 페이지의 대표 이미지가 LCP로 제대로 잡히기도 합니다.

INP 테스트

2024년 3월 업데이트 이후 Interaction to Next Paint(INP)는 독립적인 Core Web Vitals가 되었습니다. DebugBear INP Tester 같은 도구로 INP를 테스트할 때, GTM 등 서드파티 분석 스크립트가 활성화되지 않으면 측정값이 왜곡될 수 있습니다.

💡 실사용 환경(예: Real User Monitoring으로 세션을 추적할 때)에서는 CMP가 첫 페이지에서만 표시되므로 LCP가 CMP에서 감지되는 것은 한 번에 그칩니다.

부분적인 측정

EU 국가에서는 올바르게 구성된 CMP가 사용자 동의 전까지 서드파티 리소스 로드를 차단해야 합니다.

쿠키를 수락하지 않은 상태로만 성능을 테스트하면, 쿠키를 수락한 사용자의 실제 경험을 반영하지 못합니다.

실제로 서드파티 스크립트는 최소한 페이지 무게를 늘리고, 보통은 JavaScript 실행 시간(때로는 long task)과 레이아웃 시프트까지 추가하여 페이지의 웹 성능을 악화시킵니다.

Allianz 사이트에서 쿠키 수락 전후의 페이지 무게 비교: 쿠키 수락 후(빨간색)가 더 무겁습니다.

Allianz 사이트에서 쿠키 수락 전후의 웹 성능 지표 비교: 쿠키 활성화 시(빨간색) 수치가 더 나쁩니다이 캡처에서 리소스 무게와 웹 성능 지표가 서드파티가 주입될 때 더 나빠지는 것이 분명합니다.

쿠키 배너를 거쳐 올바르게 웹 성능을 테스트하는 방법

기본적으로 쿠키를 수락하도록 하려면 몇 가지 방법이 있습니다. 일부 CMP의 경우 쿠키 수락 시 브라우저에 어떤 쿠키가 추가되는지 확인한 뒤, 그 쿠키들을 웹 성능 테스트 도구에 추가하면 됩니다.

⚠️ Quantcast처럼 사용자 동의를 localStorage 등으로 보관하는 경우도 있습니다. 이때는 쿠키 추가뿐 아니라 localStorage 주입까지 시뮬레이션하는 스크립트를 만들어야 합니다.

요약

RGPD 준수를 위해 CMP를 통합하면 웹사이트 성능에 영향을 줄 수 있습니다. 공급업체를 선택할 때는 여러 기준을 고려해야 하며, 그중 웹 성능도 반드시 포함되어야 합니다.

공급업체를 결정했다면, 쿠키를 수락한 사용자와 동일하게 서드파티를 로드하여 실제 성능을 계속 테스트할 수 있는 방법을 반드시 구현하세요.