서드 파티 리소스를 더 빠르게 로드하여 수익을 늘리는 방법을 알아보세요.
이 우수사례에서는 서드 파티 리소스의 성능을 개선하면 어떻게 비즈니스 측정항목을 향상할 수 있는지 살펴봅니다. 이전 연구에서는 광고 지연 시간 증가의 비용을 측정했지만 이 연구에서는 실제 성능 개선의 가치를 보여줍니다.
0.5%
게시자 수익 증대
2%
초기 광고 스크립트 로드 증가
출처: Google 내부 데이터, 2019년 6월~7월
배경
Google 게시자 태그(GPT)는 웹에서 디스플레이 광고를 요청하고 렌더링하는 Google Ad Manager용 광고 태그 지정 스크립트입니다. GPT팀은 GPT에 간단한 stale-while-revalidate HTTP 헤더를 구현하여 게시자 파트너를 위한 Google 디스플레이 광고의 속도와 실적을 개선할 수 있었습니다. 이 동일한 기술은 최신 코드를 로드하는 것보다 스크립트를 최대한 빨리 로드하는 것이 더 중요한 다른 모든 시나리오에 적용할 수 있습니다.
문제
GPT는 부트스트랩 스크립트 gpt.js로 배포되며, 이 스크립트는 15분의 짧은 TTL(수명)이 부여됩니다. 이처럼 TTL을 짧게 설정하면 스크립트를 빠르게 업데이트하거나 롤백할 수 있습니다. 로드되면 gpt.js는 TTL이 더 긴 추가 구현 스크립트를 요청하고 로드합니다.
15분 TTL이 만료되면 캐시의 gpt.js 버전이 비활성화되므로 재검증해야 합니다. 이전에는 이 재검증 프로세스에서 스크립트의 최신 사본을 가져오기 위해 동기식 네트워크 요청을 실행하여 첫 번째 광고 요청에 지연 시간이 추가되었습니다.
해결 방법
stale-while-revalidate 속성은 Cache-Control 헤더에서 사용되며 애셋이 비동기식으로 재검증되는 동안 캐시에서 비활성 애셋을 사용할 수 있는 추가 시간 간격을 정의합니다. 이를 통해 개발자는 캐시된 콘텐츠를 즉시 로드하는 즉시성과 캐시된 콘텐츠의 업데이트가 향후 사용되도록 하는 최신 상태 간에 균형을 유지할 수 있습니다.
Google 디스플레이 광고 우수사례
GPT팀은 브라우저에서 stale-while-revalidate를 구현할 것으로 예상하여 2016년에 gpt.js HTTP 응답에 이 Cache-Control 헤더를 추가했습니다.
cache-control: private, max-age=900, stale-while-revalidate=3600
이 설정은 이전에 캐시된 값의 15분~60분 후에 gpt.js가 요청되면 캐시된 값이 비활성 상태이더라도 요청을 처리하는 데 사용된다는 것을 의미합니다. 동시에 백그라운드에서 재검증 요청이 실행되어 향후 사용할 수 있도록 캐시를 최신 값으로 채웁니다.
Chrome은 버전 75에서 전체 트래픽의 99% 에 stale-while-revalidate를 출시했으며, 이 기능을 일시적으로 사용 중지한 상태의 트래픽 중 1% 는 그 영향을 측정했습니다. GPT팀은 광고 스크립트에 stale-while-revalidate의 효과를 테스트하기 위해 이 1%(실험 그룹)의 측정항목과 기능이 사용 설정된 트래픽의 1%(통제 그룹) 샘플을 기록했습니다. 샘플 크기가 52억 Google 디스플레이 광고 노출수인 2주 동안 측정항목을 기록한 결과, 대조군에서는 다음과 같은 결과를 확인했습니다.
- 광고 노출수 0.3% 증가
- 수익이 0.5% 증가했습니다.
- 초기 광고 스크립트 로드(페이지 로드 시작 후 500밀리초 미만)가 2% 증가했습니다.
- 전체적으로 광고 스크립트 로드 성공률이 1.1% 증가했습니다.
위 차트에서 볼 수 있듯이 이 실험의 결과는 성공적인 광고 스크립트 로드가 증가했기 때문일 수 있으며, 대부분의 로드는 페이지 로드 프로세스 초기에 발생합니다.
사이트에 비활성 상태에서 재검증 구현
GPT팀은 stale-while-revalidate를 사용하여 HTTP 헤더를 비교적 간단하게 변경하면 속도를 개선하고 비즈니스 측정항목을 높일 수 있음을 확인했습니다. 사이트에서 stale-while-revalidate를 구현하는 방법에 관한 자세한 내용은 stale-while-revalidate를 사용하여 최신 상태 유지 게시물을 참고하세요.