Analytics, chat, mapas, pixels de campanha e testes A/B costumam chegar como uma linha de JavaScript. Essa linha pode abrir conexões, baixar outros scripts, criar iframes e ocupar a thread principal muito depois do carregamento inicial.

O tamanho da tag no HTML, portanto, diz pouco. Para reduzir o custo de terceiros, você precisa descobrir tudo o que cada integração inicia, medir o trabalho no navegador e decidir quando esse trabalho merece acontecer.

Este guia parte de uma regra simples: uma tag deve ter responsável, finalidade e condição de carregamento. Se ninguém consegue explicar um desses pontos, a primeira opção é remover, não otimizar.

Faça um inventário por fornecedor

Comece pelo HTML, pelo gerenciador de tags e pelos componentes que injetam scripts. Registre cada origem externa em uma tabela.

Integração Responsável Para que serve Quando carrega Dependências
analytics produto medir eventos principais após consentimento script e endpoint de coleta
chat suporte abrir atendimento após clique iframe, fontes e imagens
mapa comercial mostrar endereço ao chegar perto da seção iframe e tiles
teste A/B growth escolher variante antes da renderização script e API

Não pare no primeiro domínio. Uma tag pode carregar recursos de outras origens. Abra a aba Network, filtre por JS, ordene por Initiator e siga a cadeia até o pedido inicial.

O guia de revisão de scripts de terceiros cobre procedência, permissões, integridade e plano de remoção. Aqui o foco é o custo de rede e execução depois que a integração foi aprovada.

Meça bytes, tempo de CPU e efeito na página

Uma integração pode ter poucos kilobytes e ainda registrar listeners caros. Outra pode transferir muito conteúdo sem tocar a thread principal. Meça as duas dimensões.

No Chrome DevTools:

  1. use um perfil de celular com CPU e rede limitadas;
  2. grave o carregamento no painel Performance;
  3. abra a tabela de primeira e terceira parte no resumo;
  4. agrupe a visão Bottom-up por produto ou origem;
  5. anote tempo de avaliação, long tasks e requisições iniciadas;
  6. repita três vezes para reduzir variações do fornecedor.

A referência atual do painel Performance mostra a origem e a duração própria de cada evento na thread principal. Ela também liga uma requisição ao iniciador e exibe mudanças de prioridade.

Registre uma linha de base curta:

URL e Version:
cenário e dispositivo:
fornecedor:
requisições:
bytes transferidos:
tempo de CPU:
long tasks atribuídas:
efeito em LCP e INP:

O artigo sobre JavaScript na thread principal ajuda a separar download, parse, compilação e execução.

Bloqueie a origem para medir o contrafactual

Números isolados não mostram o que a página ganharia sem uma tag. Use o Network request blocking do DevTools para bloquear a URL ou o domínio e repita o mesmo cenário.

Compare:

  • início da renderização;
  • LCP;
  • tarefas longas antes e depois da primeira interação;
  • bytes e número de requisições;
  • funcionamento do formulário, da navegação e da medição essencial.

O guia do web.dev para JavaScript de terceiros recomenda esse teste com limitação de CPU e rede. O bloqueio é um experimento local. Ele não substitui a remoção no código nem prova sozinho que a tag pode sair.

Se a página quebra quando um fornecedor fica indisponível, há também um problema de resiliência. Conteúdo principal, navegação e envio de formulário não deveriam depender da resposta de uma tag de marketing.

Remova tags sem dono ou sem decisão

Gerenciadores de tags acumulam campanhas encerradas, pixels duplicados e gatilhos que disparam em todas as rotas. Antes de trocar atributos, exclua o que não tem uso comprovado.

Pergunte ao responsável:

  • qual decisão depende deste dado?
  • qual evento e rota são necessários?
  • por quanto tempo a integração ficará ativa?
  • existe outra tag coletando a mesma informação?
  • o contrato permite carregar só depois do consentimento?

Remover um fornecedor elimina sua transferência, execução, risco de falha e manutenção. Trocar async por defer apenas muda quando parte desse custo chega.

Documente a exclusão no mesmo PR. Se alguém precisar da tag depois, terá de recuperar a finalidade e revisar o impacto em vez de reativar um snippet sem contexto.

Escolha async, defer ou carregamento sob demanda

Um script externo sem async, defer ou type="module" pode interromper o parser do HTML enquanto baixa e executa.

<script defer src="https://cdn.example.com/widget.js"></script>

Use defer quando a ordem entre scripts importa e a execução pode esperar o fim do parse. Scripts diferidos preservam a ordem do documento.

<script async src="https://cdn.example.com/analytics.js"></script>

Use async quando o script é independente e pode executar assim que chegar. A ordem entre scripts assíncronos não é garantida, e a execução ainda pode interromper o trabalho do parser.

Nenhum dos dois atributos elimina parse, compilação ou execução. Para chat, mapa, vídeo e avaliações, o melhor ponto costuma ser uma intenção real da pessoa ou a proximidade da seção.

button.addEventListener(
  "click",
  async () => {
    await import("./support-widget.js");
    openSupport();
  },
  { once: true },
);

Mantenha o botão funcional durante a carga, anuncie o estado e trate falhas. Um clique não pode desaparecer porque o servidor externo demorou.

Não transforme consentimento em fila de execução

Consentimento e prioridade de carregamento são decisões diferentes. Uma pessoa pode aceitar analytics sem precisar baixar imediatamente chat, mapas e widgets que ainda estão fora da tela.

Depois da permissão, aplique a condição correta para cada integração:

  • analytics essencial à medição começa conforme o plano de dados;
  • chat carrega no clique ou perto do botão;
  • mapa carrega perto da seção de endereço;
  • vídeo externo usa uma fachada até o play;
  • teste A/B só entra nas rotas e no período do experimento.

Não concentre tudo em um callback que dispara dezenas de tags de uma vez. Isso apenas desloca a disputa de CPU para o momento do consentimento e pode piorar a primeira interação.

Use preconnect com parcimônia

preconnect antecipa DNS, conexão e negociação TLS com uma origem. Ele faz sentido quando uma requisição importante para aquele domínio começará cedo e com alta probabilidade.

<link rel="preconnect" href="https://cdn.example.com" crossorigin />

Cada conexão também consome recursos. Não adicione um hint para todo domínio descoberto na aba Network. Priorize uma ou duas origens críticas, confirme a diferença no waterfall e remova o que não antecipa trabalho útil.

O guia de preload, preconnect e fetchpriority separa as funções de cada hint.

Evite duplicação no gerenciador de tags

Uma página pode instalar a mesma integração no código e no tag manager. Também pode disparar duas tags que carregam o mesmo SDK.

Procure por:

  • URLs repetidas com parâmetros diferentes;
  • identificadores de propriedade duplicados;
  • listeners equivalentes em clique, scroll e envio;
  • containers aninhados;
  • tags globais que também aparecem em templates de campanha;
  • bibliotecas que o widget já inclui internamente.

Compare o inventário com a aba Initiator. A duplicação nem sempre produz duas tags idênticas no HTML, mas aparece como duas cadeias chegando ao mesmo pacote ou endpoint.

Defina um orçamento por rota

Um orçamento transforma a revisão em regra de entrega. Escolha limites que o time consiga medir no CI ou em uma auditoria recorrente.

Home em celular:
- no máximo 3 origens externas antes do LCP
- nenhum widget de chat antes de interação
- nenhum long task de terceiro acima de 50 ms no cenário medido
- mapa e vídeo fora da primeira tela carregados sob demanda

O valor exato depende da rota e do negócio. O ponto é tornar cada nova tag uma troca visível. Se o orçamento estourar, o PR precisa remover, adiar ou justificar outro custo.

Republique e teste a URL pública

No Site no Ar, edite o Site existente em vez de criar outro endereço para a correção.

  1. chame get_context com o ID do Site;
  2. localize HTML, scripts e configuração dentro de public/;
  3. remova ou altere as integrações com as file tools;
  4. rode build e testes da página;
  5. mantenha public/sitemap.xml alinhado;
  6. use deploy para criar uma nova Version;
  7. acompanhe deploy_status até sucesso ou falha;
  8. repita o perfil na URL pública e no domínio próprio.

A documentação de Publicação explica por que somente public/ chega à URL. Alterar um arquivo-fonte sem atualizar o resultado publicado não muda o custo visto no navegador.

Prompt para auditar scripts de terceiros

Audite o custo de scripts de terceiros desta página sem publicar ainda.


URL e Version: [URL e commit]
Cenário: [dispositivo, rede e CPU]
Integrações esperadas: [lista e responsáveis]


1. Liste todas as origens externas e suas cadeias de iniciadores.
2. Meça requisições, bytes, tempo de CPU e long tasks por fornecedor.
3. Bloqueie uma origem por vez e compare o mesmo cenário três vezes.
4. Marque tags sem dono, duplicadas ou fora da rota correta.
5. Proponha remoção, deferimento ou carregamento por interação.
6. Preserve consentimento, eventos essenciais e fallback da página.
7. Rode build e mostre a comparação antes de publicar.

Uma integração útil pode continuar no site. Ela só não precisa disputar a primeira renderização e a primeira interação com o conteúdo que trouxe a pessoa até a página.