Banners de cookies deixam seu site mais lento

Todos os artigos

Um banner de cookies pode deixar o seu site mais lento, mas o banner raramente é a parte cara. O script que o desenha é pequeno. O custo chega no momento em que alguém aceita, quando cada ferramenta de análise, de publicidade e de sessão que o banner estava segurando dispara de uma vez, em uma thread principal, depois de a sua página já ter pintado.

Duas coisas diferentes são chamadas de "o banner"

Quando alguém diz que o banner de cookies deixou o site mais lento, normalmente está descrevendo um de dois custos diferentes, e a diferença decide o que fazer a respeito.

O primeiro é a própria camada de consentimento: um script que decide se mostra um diálogo, o desenha, guarda a resposta e a transmite. Esse trabalho é genuinamente pequeno. Um script de consentimento é um diálogo e um pouco de estado, e os bem construídos carregam de forma assíncrona e reservam o próprio espaço.

O segundo é tudo o que a camada de consentimento estava travando. O seu tag manager, a análise, os pixels de publicidade, a gravação de sessão, o widget de chat. Nada disso rodou enquanto o visitante decidia. Tudo isso roda no instante em que ele aceita, e como a liberação acontece depois de a página ter pintado, ela cai em uma thread principal que o visitante já está tentando usar.

O que significa algo que a maioria dos conselhos de performance pula: um visitante que recusa recebe uma página materialmente mais rápida do que um que aceita. Você não está servindo um site. Está servindo dois, e o seu monitoramento está fazendo a média deles.

As quatro formas em que um banner realmente te custa

Os mecanismos são bem documentados, e os quatro têm conserto.

Bloqueio de renderização. Um script de consentimento carregado sem async ou defer segura o parser enquanto busca. Esse atraso cai antes de a sua página conseguir pintar qualquer coisa, inclusive em visitas repetidas em que a resposta já está guardada e o banner nunca vai aparecer.

O banner vira o seu Largest Contentful Paint. Se ele cobre uma fatia grande da viewport e chega mais tarde do que o seu conteúdo principal, o navegador mede o banner em vez do seu conteúdo. O limite do Google é 2,5 segundos, e um banner pintando aos 3 segundos acabou de decidir a sua nota.

Deslocamento de layout. Um banner injetado no fluxo do documento em vez de sobreposto a ele empurra tudo abaixo para baixo. O Cumulative Layout Shift deveria ficar abaixo de 0,1, e uma barra de largura total aparecendo meio segundo atrasada vai gastar esse orçamento sozinha.

O próprio clique de aceitar. Quando o manipulador de consentimento inicializa quatro fornecedores de forma síncrona, o clique que dispensa o banner congela a página. O Interaction to Next Paint deveria ficar abaixo de 200 milissegundos. As pessoas percebem este sem saber o nome dele, porque é o que dá a sensação de quebrado.

Por que a sua nota do PageSpeed não consegue ver o caminho caro

Aqui está a lacuna em quase todo artigo sobre esse assunto. O Lighthouse e o PageSpeed Insights carregam a sua página em um perfil limpo sem consentimento guardado, fazem as medições, e param. Eles nunca clicam em nada. Então o estado que eles medem é o estado pré escolha: a sua página, mais um banner, com a stack de tags inteira ainda travada atrás de um botão que ninguém apertou.

Essa é uma visão legítima de um visitante de primeira viagem. Também é a página mais barata que você serve. O caminho do aceite, o estado mais pesado que o seu site tem, nunca aparece na nota de laboratório, então os times otimizam o único número que conseguem ver enquanto o caminho caro fica sem medição por anos. Você tem que ir olhar de propósito, e leva uns dez minutos.

Como medir o seu próprio banner, nos dois caminhos

1. Tenha uma linha de base com o banner desligado

   Trace a página com o script de consentimento inteiramente bloqueado, no painel de bloqueio de requisições do seu navegador. Esse é o piso. Sem ele você não consegue separar o custo do consentimento do custo do que o consentimento libera.

2. Meça o estado que um visitante de primeira viagem vê

   A execução padrão do PageSpeed Insights: perfil novo, sem escolha guardada, banner na tela. A diferença em relação ao piso é o custo honesto do banner em si, e em um bem construído ele é pequeno.

3. Grave o caminho do aceite na mão

   Abra o painel de performance, comece a gravar, carregue a página, clique em aceitar, e continue gravando por alguns segundos. Agora dá para ver o que cai de fato: quantas requisições a escolha dispara e por quanto tempo a thread principal fica bloqueada. Nenhuma nota automática vai te mostrar isso, que é por que tão pouca gente olhou.

4. Grave o caminho da recusa também

   Repita o trace e clique em recusar. Em um site com o Consent Mode v2 ligado você ainda deve ver requisições do Google saindo, sem carregar identificadores. Isso é o design funcionando como pretendido, não um vazamento, e vale confirmar com os próprios olhos antes de alguém te dizer o contrário.

5. Separe os seus dados de campo por estado de consentimento

   Traces de laboratório te dizem o que pode acontecer; dados de campo te dizem o que acontece. Monitoramento misturado entre todos os visitantes faz a média de um caminho de recusa rápido com um caminho de aceite lento e esconde os dois. Se o seu suporta uma dimensão personalizada, carimbe o estado de consentimento nela e leia as duas populações separadas.

O que o Consent Mode muda, e o que não muda

Muita orientação ainda descreve o consentimento como uma chave dura: nenhum script roda até o visitante dizer sim. É assim que uma camada de consentimento bloqueante se comporta, e não é nada assim que se comporta um site rodando Consent Mode v2. Sob o Consent Mode avançado, as tags do Google carregam em toda página independentemente da resposta; o sinal muda o que elas podem guardar e enviar, não se elas existem. Então se o seu plano para um site mais rápido era travar as tags do Google atrás do consentimento, o peso não some. Só remover uma tag remove o custo dela.

A troca merece ser nomeada com honestidade, porque é a razão real de aceitar esse peso. Ligar os sinais da v2 é o que deixa o Google modelar as conversões que uma recusa apagaria, o que no trabalho com clientes da Amplio Data recupera algo na faixa de 20 a 40 por cento da medição que um banner de consentimento te custa. Essas são faixas medidas nas implementações de clientes da Amplio Data, não uma garantia. A recuperação depende da sua combinação de tráfego, das regiões e de como as suas tags estão configuradas. Uma configuração que bloqueia é uma página um pouco mais rápida que reporta menos do que aconteceu nela.

O piso que você não consegue otimizar

Parte desse custo é permanente, e fingir o contrário é como fornecedores prometem o que não conseguem entregar. Você sempre vai pagar pelo script que decide se mostra um diálogo, por ler a resposta guardada antes de as suas tags inicializarem, e pelas tags de que você genuinamente precisa.

O que dá para remover é o resto: o carregamento síncrono, a barra injetada tarde sem espaço reservado, os quatro fornecedores inicializando em um clique, a tag que ninguém olha desde 2023. Na nossa experiência essa última costuma ser o maior ganho disponível, e não tem nada a ver com consentimento.

Velocidade importa por um segundo motivo também, que cobrimos em aumentar a taxa de aceitação sem dark patterns: um banner que trava é dispensado por impaciência e não por preferência.

A abordagem do próprio Velo é a chata. Servir a camada de consentimento pela borda, mantê-la assíncrona, reservar o espaço dela para nada se mexer, e entregar a escolha às suas tags rápido o bastante para nada rio abaixo ficar esperando. A engenharia interessante pertence ao que acontece depois da resposta, não ao diálogo que a coleta.