O script anti-flickering deixa meu site lento?
Resposta rápida
Um script anti-flickering adiciona, sim, uma latência marginal, normalmente de 50 a 150 ms, porque oculta brevemente o corpo da página enquanto a variante do teste A/B é aplicada, evitando um flash da versão original. Isso geralmente é aceitável, mas scripts anti-flicker mal implementados e sem timeout podem bloquear a renderização por tempo indefinido e prejudicar bastante as pontuações de Largest Contentful Paint.
Principais conclusões
- Scripts anti-flickering precisam ter um timeout máximo (normalmente de 1 a 3 segundos) para que a página seja renderizada mesmo que a variante não carregue.
- Ferramentas de teste A/B bem otimizadas, como a Mida, minimizam o impacto do anti-flicker com carregamento assíncrono rápido e um script leve, com menos de 20KB.
- Meça suas pontuações de LCP e FCP com e sem o script de teste A/B ativo para quantificar o custo real de desempenho no seu site específico.
A velocidade e o desempenho do seu site devem ser sempre as principais prioridades, pois podem impactar diretamente as taxas de conversão e o ranqueamento de SEO do seu site.
Quando o assunto é teste A/B, uma dúvida que surge com frequência é se adicionar um script anti-flickering deixa o site mais lento.
Neste post, vou explicar o que é um script anti-flickering, como ele funciona, qual o impacto na velocidade do site e algumas boas práticas para usá-lo.
O que é um script anti-flickering?
Um script anti-flickering, às vezes chamado de script de teste A/B, é um código que elimina o "flicker", ou piscada visual, que pode ocorrer quando você executa um teste A/B no seu site.
Veja o que acontece quando você configura um teste A/B sem um script anti-flickering:
- Um usuário acessa o seu site.
- A ferramenta de teste A/B carrega a página original (versão A).
- Quando o script de teste A/B termina de carregar, ele troca a versão A pela versão B.
- Essa troca é visível para o usuário e causa uma piscada visual incômoda entre as versões da página.
Veja um exemplo de como é um "flicker":
O script anti-flickering elimina essa piscada adiando a exibição da página ao usuário até que a versão correta tenha sido carregada.
Na prática, funciona assim:
- Um usuário acessa o seu site.
- O script anti-flickering exibe uma página em branco enquanto o teste A/B determina qual versão (A ou B) mostrar.
- Assim que o teste atribui a versão, todo o conteúdo da página carrega de forma fluida, sem nenhuma piscada entre as versões.
E se a ferramenta de teste A/B levasse 10 segundos para carregar?
Normalmente, um script anti-flickering tem uma configuração de timeout que você pode ajustar: se o script de teste A/B, por qualquer motivo, não estiver na página ou não carregar em XX segundos (no máximo 2 segundos), ele libera a página removendo a tela em branco.
Isso resulta em uma experiência do usuário mais fluida.
ESPERA AÍ!
Então você está atrasando a página de propósito com uma tela em branco ATÉ que o teste A/B determine qual versão usar? Isso não impacta a velocidade da página?
Como o script anti-flickering afeta a velocidade da página?
O impacto do script anti-flickering depende principalmente da rapidez com que o seu script de teste A/B consegue ser executado para determinar a versão da página.
Há alguns fatores de velocidade a considerar:
- Tempo de página em branco: É o tempo em que a página em branco fica visível enquanto o teste A/B determina a versão. Quanto menor esse período, menor o impacto na velocidade.
- Velocidade em cascata (waterfall): A maioria das ferramentas de teste A/B carrega de forma assíncrona para não bloquear o carregamento de outros elementos da página. Porém, o script anti-flickering atrasa a exibição da página completa até que o teste A/B termine de ser executado.
- Geografia: A localização do servidor da ferramenta de teste A/B pode causar latência de acordo com a região do usuário. Quanto maior a distância, mais lenta a execução.
- Carga do servidor: Uma carga pesada nos servidores de teste A/B também aumenta o tempo de execução do script.
Em resumo, um script de teste A/B de execução rápida minimiza o tempo de página em branco e o impacto de velocidade do script anti-flickering. Scripts mais lentos podem atrasar a exibição da página completa, prejudicando métricas de velocidade do site como o Time to First Byte.
Como você pode ver no exemplo acima, com um script de teste A/B rápido e com um script anti-flickering integrado, a página aparece em 0,63 s. Por outro lado, se o script de teste A/B for lento, não importa se você tem ou não um script anti-flickering: ele quase certamente vai prejudicar as conversões do seu site.
Ferramenta de teste A/B grátis
Faça seu próximo teste A/B do jeito certo
Editor visual, script de 15 KB, nativo do GA4 e grátis para sempre até 100.000 visitantes por mês. Sem precisar de desenvolvedor.
Boas práticas para o script anti-flickering
Com base nas questões de velocidade, quais são algumas boas práticas para usar scripts anti-flickering?
- Use apenas ao testar elementos Above The Fold (ATF). Ative somente nas páginas que alteram elementos ATF. Você não precisa de um script anti-flickering se o seu teste estiver abaixo da dobra, já que os usuários nunca vão notar o efeito de flickering.
- Use apenas quando o flickering for muito perceptível ou incômodo. Para mudanças sutis na página, o script pode não ser necessário.
- Escolha uma ferramenta de teste A/B RÁPIDA. Ferramentas mais rápidas minimizam o impacto e melhoram o desempenho geral do seu site. Converse com o seu fornecedor, se necessário.
- Reduza a latência geográfica. Use uma CDN para distribuir geograficamente os scripts de teste A/B.
Conclusão
Scripts anti-flickering podem proporcionar uma experiência melhor ao usuário ao eliminar piscadas incômodas durante testes A/B. No entanto, eles podem atrasar a exibição do conteúdo da página, dependendo da rapidez com que a ferramenta de teste A/B atribui a versão.
Com uma implementação bem otimizada, você pode aproveitar os benefícios dos scripts anti-flickering sem sacrificar a velocidade ou o desempenho do site.
