Descubra como o carregamento mais rápido de recursos de terceiros pode aumentar a receita.
Neste estudo de caso, destacamos como melhorar o desempenho de recursos de terceiros pode impulsionar as métricas de negócios. Embora um estudo anterior tenha medido o custo da latência adicional de anúncios, este estudo demonstra o valor de uma melhoria de desempenho real:
0,5%
Aumento de receita para editores
2%
Aumento nos carregamentos iniciais do script de anúncio
Fonte: dados internos do Google, junho a julho de 2019.
Contexto
A Tag do editor do Google (GPT) é o script de codificação de anúncio do Google Ad Manager que solicita e renderiza anúncios de display na Web. Ao implementar um cabeçalho HTTP stale-while-revalidate
simples para a GPT, a equipe da GPT conseguiu melhorar a velocidade e o desempenho dos anúncios de display do Google para os editores parceiros. Essa mesma técnica pode ser aplicada a qualquer outro cenário em que carregar scripts o mais rápido possível é mais importante do que carregar o código mais atualizado.
O problema
A GPT é implantada como um script de inicialização, gpt.js
, que tem um curto time to live (TTL) de 15 minutos. Esse TTL curto permite que o script seja atualizado ou revertido rapidamente. Depois de carregado, gpt.js
solicita e carrega scripts de implementação adicionais, que têm um TTL mais longo.
Depois que o TTL de 15 minutos expira, a versão do gpt.js
no cache fica desatualizada e precisa ser revalidada. Antes, esse processo de revalidação envolvia uma solicitação de rede síncrona para buscar uma nova cópia do script, adicionando latência à primeira solicitação de anúncio.
A solução
O atributo stale-while-revalidate
é usado pelo cabeçalho Cache-Control
e define um período extra em que um cache pode usar um recurso desatualizado enquanto o recurso é revalidado de maneira assíncrona. Isso ajuda os desenvolvedores a equilibrar a urgência (carregar conteúdo armazenado em cache imediatamente) e
a atualização (garantir que as atualizações do conteúdo armazenado em cache sejam usadas no futuro).
Estudo de caso sobre anúncios de display do Google
A equipe da GPT adicionou esse cabeçalho Cache-Control
à resposta HTTP gpt.js
em 2016, esperando que os navegadores implementem stale-while-revalidate
:
cache-control: private, max-age=900, stale-while-revalidate=3600
Com essa configuração, se gpt.js
for solicitado entre 15 e 60 minutos após o valor armazenado em cache anterior, ele será usado para atender à solicitação, mesmo que esteja desatualizado. Ao mesmo tempo, uma solicitação de revalidação será feita em segundo plano para preencher o cache com um novo valor para uso futuro.
O Chrome lançou o stale-while-revalidate
na versão 75 em 99% de todo o tráfego, deixando 1% do tráfego com o recurso desativado temporariamente para medir o impacto dele. A equipe da GPT registrou métricas desse 1% (o grupo experimental), bem como uma amostra de 1% do tráfego com o recurso ativado (o grupo de controle), para testar a eficácia de stale-while-revalidate
para scripts de anúncios. Ao longo de 2 semanas de métricas registradas a partir de uma amostra de 5,2 bilhões de impressões de anúncios de display do Google, o grupo de controle observou:
- Aumento de 0,3% nas impressões de anúncios.
- Aumento de 0,5% na receita.
- 2% de aumento nos carregamentos iniciais do script de anúncio (menos de 500 ms desde o início do carregamento da página).
- Aumento de 1,1% nos carregamentos de scripts de anúncios bem-sucedidos em geral.
Como mostrado no gráfico acima, os resultados dessa experiência podem ser atribuídos a um aumento nos carregamentos de scripts de anúncio bem-sucedidos, sendo que a maioria deles ocorre no início do processo de carregamento da página.
Como implementar a "desatualização durante a revalidação" no site
A equipe da GPT observou que fazer uma alteração relativamente simples nos cabeçalhos HTTP com stale-while-revalidate
pode melhorar a velocidade e impulsionar as métricas de negócios. Consulte a postagem Como atualizar com o tempo desatualizado e revalidar (em inglês) para saber mais sobre a implementação de stale-while-revalidate
no seu site.