Velocidade da página e scripts de prova social

Um widget de prova social só merece o seu lugar se não deixar mais lenta a página que ele tenta ajudar. O script do Provedly tem cerca de 6 KB compactado com gzip, carrega de forma assíncrona, é renderizado num Shadow DOM fora do seu layout e espera antes de desenhar qualquer coisa. Este artigo mostra exatamente o que acontece no carregamento, o que isso significa para os Core Web Vitals e as poucas decisões do seu lado que afetam o desempenho.

O que carrega, e quando

<script
    src="https://provedly.app/w/widget.js"
    data-token="pp_…"
    async
    defer
></script>

1. O navegador busca o widget.js sem bloquear a análise do HTML, por causa de async e defer.
2. O carregador faz GET /api/w/{token}/config, que retorna as configurações e até 30 registros recentes numa única resposta.
3. Depois do seu atraso inicial (3 segundos por padrão), a primeira notificação é renderizada. Cada renderização envia uma impressão para /track.
4. Enquanto a aba está aberta, um sinal de atividade chama /presence a cada 30 segundos para o contador ao vivo.

Essa é toda a pegada de rede: um script, uma requisição de configuração, uma pequena requisição por notificação exibida e um sinal de atividade a cada 30 segundos. Nenhuma fonte é baixada, nenhuma imagem, a menos que você use avatares com imagem, e nenhuma chamada a terceiros de dentro do widget.

Core Web Vitals, um por um

Largest Contentful Paint. O script não bloqueia a análise nem a renderização, e nada do que ele desenha é candidato a LCP; uma notificação aparece depois do seu conteúdo principal e é pequena. Na prática, um widget instalado corretamente não tem efeito mensurável no LCP. Se você colocar a tag no <head> sem async defer, isso deixa de ser verdade, então não faça isso.

Cumulative Layout Shift. A notificação, o contador e a barra são position: fixed dentro de uma shadow root. Elementos fixos não ocupam espaço no fluxo do documento, então o surgimento deles não move nada. A contribuição para o CLS é zero por construção. A exceção é uma barra na posição "inline", que você coloca no fluxo de propósito; reserve a altura dela se usar essa opção.

Interaction to Next Paint. O trabalho do widget na thread principal é pequeno: analisar um script de 6 KB, renderizar alguns nós do DOM e um timer. Ele não adiciona listeners de rolagem ou de ponteiro ao seu documento. O INP não é afetado, a menos que a sua página já esteja no limite.

Para que serve o atraso de 3 segundos

O atraso inicial padrão existe para o visitante, não para o desempenho, mas ajuda nos dois. Quando a primeira notificação aparece, a página normalmente já terminou de carregar, as imagens já chegaram e o visitante já se situou. Uma notificação que surge antes de a imagem principal ser desenhada é irritante e, em conexões lentas, compete pela banda. Mantenha o atraso em 3 segundos ou mais; encurtá-lo não traz nenhum ganho.

Decisões do seu lado que importam

Onde a tag fica. No fim do <body> com async defer, ou next/script com strategy="afterInteractive". Não no <head> de forma síncrona.

Tag direta versus Tag Manager. O GTM acrescenta o carregamento do contêiner e a avaliação de acionadores antes mesmo de o script do widget ser requisitado. Numa página lenta, isso empurra a primeira notificação para mais tarde do que você pretende. Veja instalando pelo Google Tag Manager, e quando não fazer isso.

Avatares com imagem. Se você envia avatar_url nos registros, cada notificação pode buscar uma imagem. Mantenha-as pequenas ou use um estilo de avatar sem imagem; registros de webhook do Stripe e do Shopify nem trazem fotos.

Número de widgets. Um widget por página cobre as notificações e o contador ao vivo. Uma barra é um segundo carregador. Não instale o mesmo token duas vezes; o carregador é idempotente, mas tags duplicadas ainda custam uma requisição.

GIFs de contagem regressiva para e-mail. São outro produto: um GIF animado gerado no servidor para e-mails, com até 3 minutos de duração e menos de 100 KB. Eles não afetam em nada o desempenho do seu site, mas lembre-se de que os clientes de e-mail os carregam na abertura.

Medindo você mesmo

Rode o Lighthouse ou o WebPageTest numa página duas vezes, com e sem a tag, e compare. Espere uma diferença dentro do ruído normal entre execuções. Se vir uma piora real, procure uma tag colocada de forma síncrona, uma tag duplicada ou uma CSP que esteja causando novas tentativas. O painel não informa números de desempenho; aqui, as suas próprias ferramentas são a fonte da verdade, e o widget foi feito para sumir delas.

Por que o tamanho importa mais do que parece

Várias ferramentas de prova social, em outubro de 2026 e segundo as próprias páginas, juntam motores de teste A/B, editores visuais, camadas de analytics e vários tipos de notificação num único script do lado do cliente. Cada recurso é um motivo para o pacote crescer. O widget do Provedly faz uma coisa na página: busca a configuração, mostra registros reais com seus rótulos e conta presença com honestidade. Todo o resto, incluindo a página de verificação e a associação de atribuição dos pedidos assistidos por prova social, acontece no servidor. Manter o cliente pequeno é uma decisão de produto tanto quanto de engenharia.

Perguntas frequentes

O sinal de atividade a cada 30 segundos gasta bateria ou dados do celular?

Um sinal de atividade é uma requisição minúscula a cada 30 segundos enquanto a aba está aberta. É muito menos do que qualquer script de analytics ou widget de chat faz, e ele para quando a aba é fechada.

Posso adiar o widget até o visitante rolar a página?

O atraso inicial já resolve o caso comum. Se você precisa de carregamento acionado pela rolagem, injete a tag a partir do seu próprio handler de rolagem usando o mesmo src e data-token; o carregador funciona do mesmo jeito.

O app embed do Shopify pesa mais do que a tag de script?

Não. O app embed carrega o mesmo renderizador com o mesmo isolamento, e tem a vantagem de os pedidos chegarem verificados sem nenhum código extra no cliente.

Instale, rode o seu teste de velocidade e fique com o resultado que der: comece grátis.