Cloudflare Workers 기반 Edge A/B 테스트로 Flicker 제거 및 컨텍스트 생성 속도 70% 향상

Context

Client-side JavaScript 실행 후 콘텐츠가 변경되는 Flicker 현상으로 인한 Core Web Vitals 저하 및 사용자 경험 훼손. Origin Server의 배포 주기 제약으로 인한 실시간 HTML 수정의 어려움 및 성능 병목 발생.

Technical Solution

• Edge Network에서 Request를 인터셉트하여 HTML 전송 전 Variant 결정 및 라우팅 수행
• Cookie 기반 Sticky Session으로 사용자별 실험 일관성 유지 및 세션 관리
• HTMLRewriter API를 활용한 Stream 방식의 HTML 실시간 변조로 Origin Server 부하 제거
• Workers KV를 통한 실험 설정의 코드 분리를 통해 배포 없는 실시간 실험 제어 구현
• Cache-Control: private 및 실험 쿠키 기반 Cache Key 설계를 통한 CDN 캐싱 무결성 확보

Impact

• Client-only SDK 대비 Context 생성 속도 60-70% 향상
• Edge-side HTML 변조를 통한 Flicker Zero 구현
• 전통적 Serverless 플랫폼 대비 2-3배의 비용 절감 달성

Key Takeaway

연산 로직을 Edge로 전진 배치하여 네트워크 홉을 줄이고, 스트리밍 방식의 HTML 수정으로 렌더링 성능과 배포 유연성을 동시에 확보하는 아키텍처 전략