Como remover scripts de terceiros inúteis que estão destruindo a pontuação do Lighthouse do seu site
Identifique e adie pixels de rastreamento, scripts de chat e tags externas que travam a linha de execução principal do navegador do cliente.
No cenário altamente competitivo do B2B digital, a velocidade de carregamento de uma página web não é apenas uma métrica de vaidade técnica; ela é um fator crítico de conversão e SEO. Quando analisamos a performance de portais corporativos e e-commerces, um dos principais vilões identificados pelo Lighthouse do Google é o acúmulo de scripts de terceiros (third-party scripts).
Muitas empresas adicionam pixels de rastreamento, ferramentas de gravação de tela (como Hotjar e Clarity), chats de suporte em tempo real (como Zendesk e JivoChat) e tags de automação de marketing sem um plano de governança técnica. O resultado é catastrófico: a linha de execução principal (main thread) do navegador é bloqueada por dezenas de conexões DNS e execuções de JavaScript complexas, destruindo métricas de Core Web Vitals como Total Blocking Time (TBT) e Interaction to Next Paint (INP).
Neste guia prático, você aprenderá como auditar, identificar e adiar scripts externos para restaurar a performance do seu front-end sem perder inteligência de dados ou funcionalidades de negócio.
O que são Scripts de Terceiros e por que eles degradam a performance?
Scripts de Terceiros (Third-Party Scripts) são quaisquer fragmentos de código JavaScript executados em seu site que são fornecidos e hospedados por provedores externos. Eles são amplamente utilizados para análises de tráfego, publicidade segmentada, testes A/B, widgets sociais e suporte ao cliente.
Ao carregar um script externo diretamente no cabeçalho (<head>) da página de forma síncrona, o navegador precisa interromper a análise e renderização do HTML para fazer a resolução DNS do domínio externo, realizar o handshake SSL, baixar o arquivo .js, analisar (parse), compilar e executar o código. Esse comportamento cria gargalos massivos de processamento na CPU do dispositivo do usuário, resultando em uma página que parece congelada.
Diagnosticando o Impacto de JavaScript com Chrome DevTools
Antes de sair deletando códigos, é fundamental metrificar com precisão onde está o desperdício de performance.
1. Aba Coverage (Cobertura de Código)
O Chrome DevTools possui uma ferramenta poderosa chamada Coverage. Ela analisa o quanto do código JavaScript e CSS baixado realmente foi executado durante a renderização inicial.
- Abra o Chrome DevTools (
F12). - Pressione
Ctrl + Shift + P(ouCmd + Shift + Pno Mac) e digite “Coverage”. - Selecione Start instrumenting coverage and reload page.
- O painel mostrará uma lista de arquivos JS carregados e a barra vermelha representará o percentual de código que não foi executado. Frequentemente, scripts de marketing mostram mais de 80% de código não utilizado na primeira dobra de tela.
2. O Relatório do Lighthouse
No Lighthouse, fique atento a três seções específicas:
- Reduce the impact of third-party code: Detalha o tempo de bloqueio da linha de execução principal causado por cada domínio externo.
- Reduce JavaScript execution time: Indica quais scripts demandam muito poder de processamento da CPU do cliente.
- Minimize main-thread work: Exibe o tempo que o navegador passou parseando e renderizando o layout, que é diretamente afetado por scripts pesados.
Estratégias para Otimizar e Adiar Scripts de Terceiros
Para obter uma pontuação 90+ no Lighthouse mantendo a funcionalidade de rastreamento e chats de vendas, devemos seguir a seguinte hierarquia de mitigação:
Comparativo de Métodos de Carregamento de JavaScript
| Método | Bloqueia Renderização? | Quando é executado? | Indicado para |
|---|---|---|---|
Síncrono (<script src="...">) | Sim | Imediatamente (pausa a leitura do HTML) | Scripts essenciais e críticos do sistema. |
Async (async) | Não (durante o download) | Assim que o download é concluído (pode bloquear renderização se baixar rápido) | Scripts independentes (ex: analytics básico). |
Defer (defer) | Não | Somente após o parsing completo do HTML ser concluído | Scripts que manipulam a DOM de forma não crítica. |
| Atraso Inteligente (Interação do Usuário) | Não | Quando o usuário mexe o mouse, rola a página ou toca na tela | Chats de suporte, pixels secundários e Hotjar. |
| Web Workers (ex: Partytown) | Não | Roda em thread separada (em segundo plano) | Google Tag Manager, trackers de comportamento. |
Guia de Implementação: Carregamento Sob Demanda (Lazy Loading Inteligente)
Uma das maneiras mais eficientes de otimizar chats de suporte (como Zendesk, Hubspot Chat ou JivoChat) é evitar o seu carregamento até que o usuário execute alguma ação na página. A maioria dos usuários que entra na sua landing page não clica no chat imediatamente nos primeiros 2 segundos, por que gastar banda e processamento com isso no início?
Veja abaixo um script JavaScript genérico que atrasa a inicialização de scripts de terceiros até que o usuário realize a primeira interação real (rolagem, movimento do mouse ou toque na tela):
// Função para injetar scripts de terceiros apenas sob demanda
function carregarScriptsDeTerceiros() {
// Evitar carregamento duplicado
if (window.scriptsDeTerceirosCarregados) return;
window.scriptsDeTerceirosCarregados = true;
console.log("Iniciando carregamento de scripts de terceiros...");
// Exemplo: Script do JivoChat ou Pixel do Facebook
const scriptPixel = document.createElement("script");
scriptPixel.src = "https://connect.facebook.net/pt_BR/sdk.js";
scriptPixel.async = true;
document.head.appendChild(scriptPixel);
// Exemplo: Script de Chat ou Suporte
const scriptChat = document.createElement("script");
scriptChat.src = "https://code.jivosite.com/widget/SEU_ID_AQUI";
scriptChat.async = true;
document.head.appendChild(scriptChat);
// Remover os event listeners para evitar chamadas redundantes
removerListenersDeInteracao();
}
function removerListenersDeInteracao() {
const eventos = ["touchstart", "scroll", "mousemove", "keydown"];
eventos.forEach(evento => {
window.removeEventListener(evento, carregarScriptsDeTerceiros, { passive: true });
});
}
// Registrar eventos de interação para disparar o carregamento
function iniciarMonitoramentoInteracao() {
const eventos = ["touchstart", "scroll", "mousemove", "keydown"];
eventos.forEach(evento => {
window.addEventListener(evento, carregarScriptsDeTerceiros, { passive: true });
});
}
// Inicializa o monitoramento de interação
iniciarMonitoramentoInteracao();Otimizando com Resource Hints: dns-prefetch e preconnect
Caso você precise obrigatoriamente carregar um script nas fases iniciais do site, use Resource Hints para adiantar o estabelecimento da conexão de rede com os servidores do terceiro. Isso poupa centenas de milissegundos de latência.
Adicione estas tags no seu <head>:
<!-- Indica ao navegador para iniciar a resolução DNS o quanto antes -->
<link rel="dns-prefetch" href="https://connect.facebook.net">
<!-- Abre a conexão TCP e realiza o handshake SSL com antecedência -->
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin>Conclusão e Próximos Passos
Limpar o excesso de scripts de terceiros é uma tarefa que envolve alinhamento entre o time técnico de desenvolvimento e a equipe de marketing ou produto. Os passos fundamentais a partir de hoje são:
- Auditar: Rode o teste de Cobertura no Chrome DevTools.
- Eliminar: Delete pixels legados ou de campanhas inativas.
- Adiar: Utilize carregamento condicional para widgets interativos, como chats.
- Isolar: Considere usar bibliotecas modernas como o Partytown para rodar o GTM dentro de Web Workers.
Ao aplicar essas práticas, a pontuação do seu Lighthouse sairá da zona vermelha, trazendo benefícios diretos no seu posicionamento orgânico e, mais importante, diminuindo a taxa de rejeição da sua página de vendas.