Descubra como o carregamento mais rápido de recursos de terceiros pode aumentar a receita.
Este estudo de caso destaca como melhorar o desempenho de recursos de terceiros pode aumentar as métricas de negócios. Embora um estudo anterior tenha medido o custo da latência de anúncios adicionais, ele demonstra o valor de uma melhoria de desempenho no mundo real:
0,5%
Aumento de receita para editores
2%
Aumento nos carregamentos iniciais de scripts de anúncios
Fonte: dados internos do Google, junho a julho de 2019.
Contexto
A Tag do editor do Google (GPT) é o script de inclusão de tag 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 parceiros editores. 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 recente.
O problema
A GPT é implantada como um script de bootstrapping, gpt.js, que recebe 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 de gpt.js em cache fica desatualizada e precisa ser revalidada. Anteriormente, esse processo de revalidação envolvia uma solicitação de rede síncrona para buscar uma nova cópia do script, o que adicionava latência à primeira solicitação de anúncio.
A solução
O atributo stale-while-revalidate é usado pelo cabeçalho Cache-Control e define uma janela extra de tempo em que um cache pode usar um recurso desatualizado enquanto ele é revalidado de forma assíncrona. Isso ajuda os desenvolvedores a equilibrar a rapidez com o carregamento imediato do conteúdo em cache e
atualização, garantindo que as atualizações do conteúdo armazenado em cache sejam usadas no futuro.
Estudo de caso dos anúncios de display do Google
A equipe da GPT adicionou o cabeçalho Cache-Control à resposta HTTP gpt.js em 2016, antes da implementação do stale-while-revalidate pelos navegadores:
cache-control: private, max-age=900, stale-while-revalidate=3600
Essa configuração significa que, se gpt.js for solicitado entre 15 e 60 minutos após o valor anterior em cache, ele será usado para atender à solicitação, mesmo que esteja desatualizada. Ao mesmo tempo, uma solicitação de revalidação é feita em segundo plano para preencher o cache com um novo valor para uso futuro.
O Chrome lançou a stale-while-revalidate na versão 75 para 99% de todo o tráfego, deixando 1% do tráfego com o recurso desativado temporariamente para medir o impacto. A equipe da GPT registrou métricas desse 1% (o grupo experimental), bem como de uma amostra de 1% do tráfego com o recurso ativado (o grupo de controle), para testar a eficácia do stale-while-revalidate nos scripts de anúncios. Ao longo de duas semanas de métricas registradas com base em 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.
- Aumento de 2% nos carregamentos iniciais de scripts de anúncios (menos de 500 ms a partir do início do carregamento da página).
- Aumento geral de 1,1% nos carregamentos de scripts de anúncios bem-sucedidos.
Conforme mostrado no gráfico acima, os resultados dessa experiência podem ser atribuídos a um aumento nos carregamentos de scripts de anúncios, sendo que a maioria ocorre no início do processo de carregamento da página.
Como implementar obsoleto durante a revalidação no seu site
A equipe da GPT percebeu que fazer uma mudança relativamente simples nos cabeçalhos HTTP com stale-while-revalidate pode aumentar a velocidade e impulsionar as métricas de negócios. Confira a postagem Como manter as informações atualizadas usando "obsoletos enquanto revalida" (em inglês) para saber mais sobre a implementação da stale-while-revalidate no seu site.