Site cheio de plugins jQuery: inventário, substitutos nativos e o que cortar primeiro

O site de uma clínica veterinária carrega 14 plugins jQuery na página inicial: carrossel, parallax, contador animado, lightbox, acordeão, rolagem suave, cabeçalho fixo, tooltip, carregamento preguiçoso de imagem, modal, máscara, validação, contagem regressiva e um efeito de digitação no título. No celular, o botão "Agendar consulta" demora a responder ao toque. Cada plugin veio de uma lista de "plugins que todo site deve ter". A resposta curta: faça um inventário, escreva a tarefa da pessoa que cada plugin atende, remova o que não atende tarefa nenhuma e troque pelo recurso nativo o que o navegador já faz. Meça antes e depois.

Uma lista de plugins responde "o que dá para fazer". A arquitetura da página responde "o que a pessoa veio fazer aqui". Na clínica, as tarefas são três: achar o telefone, ver os serviços e agendar.

Por que a lista de plugins pesa mais do que parece

Cada plugin traz o seu JavaScript e, muitas vezes, o seu CSS. O navegador baixa, analisa e executa tudo antes de a página ficar responsiva, e o celular intermediário faz isso bem mais devagar que o notebook do desenvolvedor. Plugins que reagem à rolagem, como parallax e cabeçalho fixo feito em script, rodam código a cada movimento do dedo.

O custo não é só de desempenho. Cada plugin é uma dependência para atualizar, uma chance de conflito com outro (o assunto do guia sobre plugins jQuery brigando no mesmo campo) e um comportamento que precisa funcionar no teclado e no leitor de tela. Efeito que não serve a nenhuma tarefa é custo sem retorno.

Como fazer o inventário

1. Liste todos os scripts e folhas de estilo de terceiros da página, com tamanho.
2. Para cada um, escreva em uma frase a tarefa da pessoa que ele ajuda a cumprir.
3. Marque se existe substituto nativo em HTML ou CSS.
4. Decida: remover, substituir ou manter.
5. Meça a página antes de mexer e depois de cada lote de mudanças.

Para a lista, abra a aba Network do DevTools, marque a opção de desativar cache, filtre por JS e recarregue. Anote nome e tamanho transferido. Depois rode o Lighthouse na mesma aba, em modo móvel, e guarde o relatório como linha de base.

Na clínica, o inventário ficou assim:

plugin              tarefa da pessoa              substituto nativo           decisão
carrossel           ver serviços                  scroll-snap ou lista        substituir
parallax            nenhuma                       -                           remover
contador animado    nenhuma                       número estático             remover
efeito digitação    nenhuma                       título estático             remover
contagem regressiva nenhuma (campanha acabou)     -                           remover
acordeão            ler perguntas frequentes      details/summary             substituir
modal               agendar consulta              dialog                      substituir
rolagem suave       ir para a seção               scroll-behavior             substituir
cabeçalho fixo      achar o telefone              position: sticky            substituir
lazy load           página carregar rápido        loading="lazy"              substituir
lightbox            ver foto maior                link para a imagem          substituir
tooltip             entender ícone                texto visível               substituir
máscara             digitar telefone              input type="tel"            manter (uma)
validação           enviar sem erro               atributos HTML + servidor   substituir

Cinco plugins não tinham tarefa nenhuma. Oito tinham substituto nativo. Sobrou um.

Os substitutos nativos que já funcionam nos navegadores atuais

Acordeão e modal sem biblioteca

O elemento details abre e fecha com clique e teclado, sem JavaScript. O dialog, aberto com showModal(), prende o foco dentro dele e fecha com a tecla Esc. O guia sobre peça de interface que o CSS já faz mostra mais casos.

<details>
  <summary>Vocês atendem animais silvestres?</summary>
  <p>Atendemos aves e pequenos mamíferos com agendamento prévio.</p>
</details>

<button type="button" id="abrir-agenda">Agendar consulta</button>
<dialog id="agenda" aria-labelledby="titulo-agenda">
  <h2 id="titulo-agenda">Agendar consulta</h2>
  <p>Ligue para (11) 4000-0000 ou use o formulário abaixo.</p>
  <form method="dialog"><button>Fechar</button></form>
</dialog>

<script>
  const agenda = document.getElementById('agenda');
  document.getElementById('abrir-agenda').addEventListener('click', () => agenda.showModal());
</script>

O formulário com method="dialog" fecha o diálogo sem enviar nada. Dentro do dialog real da clínica entra o formulário de agendamento, que envia normalmente para o servidor.

Rolagem, cabeçalho, imagens e carrossel em CSS

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.cabecalho { position: sticky; top: 0; z-index: 10; }

.servicos {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.servicos > article {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

A rolagem suave respeita quem pediu menos movimento no sistema. O cabeçalho fixo não roda código na rolagem. O carrossel com scroll-snap funciona com o dedo, com a roda do mouse e com o teclado quando o contêiner recebe foco. Antes de manter qualquer carrossel, pergunte se uma lista simples dos seis serviços não resolve melhor: ninguém precisa arrastar para ver o que cabe numa tela.

Para imagens, <img src="consultorio.jpg" alt="Sala de atendimento" width="800" height="533" loading="lazy"> substitui o plugin. A largura e a altura reservam o espaço e evitam que o conteúdo pule quando a imagem chega. Não use loading="lazy" na imagem principal do topo, que precisa chegar primeiro.

Medir o antes e o depois

Depois de cada lote de mudanças, repita a medição com as mesmas condições. Compare o total de JavaScript transferido e as métricas do Lighthouse. Para referência, o Google considera boa uma página cujo maior elemento visível aparece em até 2,5 segundos (LCP) e que responde à interação em até 200 milissegundos (INP). Os números do laboratório não substituem os de usuários reais, mas mostram a direção.

Quando sobrar pouco código usando o jQuery, procure as chamadas restantes com grep -rnF '$(' js/. Se for uma máscara e um envio de formulário, reescrever em JavaScript puro remove a última dependência grande. O guia sobre site mais rápido: por onde começar ajuda a priorizar o que vem depois.

Erros comuns

• Adotar a lista inteira de um artigo: a página ganha efeitos que nenhuma tarefa pede e fica lenta justamente no celular de quem quer agendar.
• Remover tudo de uma vez sem medir: você não sabe qual mudança ajudou e não percebe se algo deixou de funcionar.
• Trocar um plugin por outro "mais leve" com a mesma função inútil: o peso cai, mas o efeito continua sem tarefa.
• Tooltip como única explicação de ícone: no toque não existe passar o mouse, e a pessoa fica sem a informação.
• Animação sem respeitar prefers-reduced-motion: parallax e rolagem forçada causam desconforto real em algumas pessoas.
• Esquecer a campanha encerrada: contagem regressiva parada em zero continua baixando código toda visita.

Checklist

• Existe um inventário com cada plugin, a tarefa que ele atende e a decisão tomada.
• Nenhum plugin sem tarefa continua carregado.
• Acordeão, modal, rolagem suave, cabeçalho fixo e lazy load usam recursos nativos.
• Animações respeitam prefers-reduced-motion.
• Há uma medição de linha de base e outra depois das mudanças, nas mesmas condições.
• Tudo que sobrou funciona com teclado.
• Você sabe se o jQuery ainda é necessário e por quê.

Escolha o plugin mais pesado da sua página inicial: qual tarefa da pessoa ficaria sem solução se ele sumisse amanhã?