Reduza JavaScript e Otimize Seu Site: O Guia Prático com Baseline

A performance do site é um pilar para o sucesso online de qualquer empresa. Um site rápido não só melhora a experiência do usuário, mas também impulsiona seu posicionamento nos motores de busca. Muitos gestores de marketing e donos de empresa se perguntam como reduzir o peso de seus sites, e a resposta muitas vezes passa pela otimização do JavaScript. A boa notícia é que a plataforma web evoluiu, e o que antes exigia bibliotecas complexas, hoje pode ser feito nativamente pelos navegadores. Este post vai direto ao ponto: como auditar suas dependências e eliminar JavaScript desnecessário, usando o conceito de Baseline para tomar decisões informadas.

A constante evolução dos navegadores significa que a distância entre o que exigia uma biblioteca e o que o próprio navegador já faz está cada vez menor. Muitos sites ainda carregam de 60KB a 90KB (minificados e compactados) de JavaScript em dependências que hoje são funcionalidades nativas. Funções como formatação de datas e números, requisições HTTP, modais, tooltips, clonagem profunda e agrupamento de arrays, que antes eram lacunas reais, agora estão integradas. O problema não é preguiça, mas a falta de uma auditoria regular das dependências com base no Baseline, ou a simples desinformação sobre a rapidez com que os navegadores implementam novas funcionalidades. Você verifica a segurança com o npm audit, mas raramente se pergunta: essa biblioteca ainda é necessária?

Antes de começar a remover código, é fundamental entender o que significa "Baseline". Este é um projeto do WebDX Community Group que indica, de forma clara, o quão seguro é usar uma funcionalidade web em todos os principais navegadores (Chrome, Edge, Firefox e Safari). Uma funcionalidade pode estar em três estados:

A diferença de 30 meses entre "Recém-Disponível" e "Amplamente Disponível" é crucial para esta auditoria. Uma funcionalidade Amplamente Disponível geralmente permite a remoção imediata de uma biblioteca. Já uma funcionalidade Recém-Disponível exige que você verifique primeiro seu público ou adicione uma verificação de funcionalidade. Você pode consultar qualquer funcionalidade em webstatus.dev, no MDN (que exibe um selo Baseline) ou programaticamente com o pacote npm web-features.

É tentador começar a remover bibliotecas ao ler que "o navegador já faz isso". No entanto, uma troca que parece simples no papel pode quebrar funcionalidades para parte dos seus usuários ou eliminar um recurso que você usava sem perceber. Por isso, antes de remover qualquer biblioteca, faça três perguntas essenciais:

Mantenha essas perguntas em mente. Cada grupo de dependências que analisaremos a seguir é, na verdade, a aplicação dessas perguntas a diferentes partes do seu código.

Este é o grupo onde você provavelmente encontrará a maior quantidade de KBs em funcionalidades que já são Amplamente Disponíveis. O navegador oferece uma família inteira de ferramentas de formatação sob o namespace Intl, tornando muitas bibliotecas pequenas e populares desnecessárias.

Os suspeitos comuns e suas substituições:

Tempo Relativo

O timeago.js transforma um timestamp em algo como "3 horas atrás". Intl.RelativeTimeFormat faz o mesmo e é Baseline Amplamente Disponível.

const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
rtf.format(-1, "day"); // "yesterday"
rtf.format(3, "hour"); // "in 3 hours"
rtf.format(-2, "week"); // "2 weeks ago"

A opção numeric: "auto" é um detalhe interessante: ela oferece "yesterday" em vez de "1 day ago" quando a língua tem uma palavra para isso. Você passa um número e uma unidade, e recebe uma string localizada. O Intl.RelativeTimeFormat espera que você determine a unidade, o que pode ser feito com algumas linhas de aritmética. Uma vez feito, a biblioteca se torna dispensável. Para otimizar a experiência do usuário do seu site, considerar essa otimização é essencial, como discutido em Protótipos realistas: Como evitar dados falsos e otimizar a experiência do usuário do seu site.

Números, Moedas e Listas

Intl.NumberFormat cobre a maioria das funcionalidades de bibliotecas de formatação de números: separadores de milhares, moeda, porcentagens e notação compacta.

new Intl.NumberFormat("en-US").format(1234567.89); // "1,234,567.89"
new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(1234.5);
// "$1,234.50"
new Intl.NumberFormat("en", { notation: "compact" }).format(1200000); // "1.2M"

E Intl.ListFormat, também Amplamente Disponível, resolve o problema de "juntar um array em uma frase", incluindo a vírgula de Oxford, algo que muitas vezes exige funções auxiliares complexas:

const lf = new Intl.ListFormat("en", { style: "long", type: "conjunction" });
lf.format(["Alice", "Bob", "Carol"]); // "Alice, Bob, and Carol"

A Ressalva: Duração

humanize-duration transforma um número de milissegundos em "1 hora, 30 minutos". O equivalente na plataforma é Intl.DurationFormat:

const df = new Intl.DurationFormat("en", { style: "long" });
df.format({ hours: 1, minutes: 30 }); // "1 hour, 30 minutes"

É importante notar que Intl.DurationFormat é Baseline Recém-Disponível no momento, não Amplamente Disponível. Ele foi implementado em todos os principais navegadores em março de 2025 e deve se tornar Amplamente Disponível em 2027. Portanto, este caso falha na pergunta 1 para aplicativos de público amplo, a menos que você verifique seu tráfego primeiro ou adicione um fallback. Para uma ferramenta interna em navegadores modernos, está bom hoje. Para um site público com dispositivos antigos, espere mais um ano ou use uma verificação de funcionalidade.

O Cálculo para Este Grupo

Se seu aplicativo usa o conjunto completo (humanize-duration, timeago.js, pluralize, numeral), isso representa aproximadamente 14 KB gzipped de dependências, a maioria delas substituível agora com APIs Amplamente Disponíveis. O grupo de internacionalização é geralmente a vitória mais fácil em toda a auditoria, impactando diretamente a performance do site e, consequentemente, o SEO. Para mais sobre como otimizar seu site para SEO, confira Auditoria de SEO 2026: Checklist Completo para Otimizar o Posicionamento do Seu Site Empresarial.

Este grupo é mais complexo e exige uma análise mais cuidadosa. As bibliotecas HTTP que as pessoas usam são axios (17 KB gz) e superagent (19 KB gz). Para a maioria das requisições, fetch mais AbortController cobrem o que você precisa, e ambos são Amplamente Disponíveis.

Um GET básico se parece com isto:

// axios
const { data } = await axios.get("/api/users");

// fetch
const res = await fetch("/api/users");
const data = await res.json();

A linha extra (res.json()) é o fetch sendo explícito onde o axios era implícito. Esse é o padrão em todo este grupo: fetch faz menos por padrão, e você decide se quer as coisas que ele omite.

Timeouts

O axios tem uma opção de timeout. O fetch tem AbortSignal.timeout():

const res = await fetch("/api/users", {
  signal: AbortSignal.timeout(5000), // aborta após 5 segundos
});

Onde fetch Não Substitui axios

É aqui que a pergunta 3 faz a maior parte do trabalho, então vamos ser específicos sobre as lacunas:

Nenhuma dessas funcionalidades é difícil de reconstruir, e a maioria dos aplicativos usa apenas uma ou duas delas. Mas este é exatamente o tipo de grupo onde você não deve fazer uma substituição cega. Analise como você realmente usa seu cliente HTTP primeiro. Se for para GETs e POSTs simples, substituir axios por um wrapper fino do fetch economiza cerca de 17 KB gzipped. A otimização do JavaScript é crucial para a performance, especialmente para o Bloquear o Main Thread: Quando a Regra de Ouro do JavaScript Pode Ser Quebrada para Performance do Site.

Este grupo oferece algumas das substituições mais satisfatórias, porque as funcionalidades da plataforma não apenas se igualam às bibliotecas, mas muitas vezes são mais acessíveis do que o que as equipes implementam manualmente. As bibliotecas aqui incluem modais (como a11y-dialog, 1.8 KB gz), bibliotecas de tooltip e popover (tippy.js, 14 KB gz, que inclui Popper para posicionamento), focus-trap (6.6 KB gz) e body-scroll-lock (1.3 KB gz). Elas são substituídas por três funcionalidades da plataforma: o elemento <dialog>, a API Popover e o posicionamento de âncora CSS.

O Elemento <dialog>

Uma grande quantidade de código relacionado a modais existe para resolver problemas de acessibilidade: prender o foco dentro do modal, fechar com Escape, restaurar o foco para o elemento anterior quando o diálogo é fechado e renderizar acima de tudo. O elemento <dialog>, Amplamente Disponível, faz tudo isso por você.

<dialog id="confirm">
  <form method="dialog">
    <p>Delete this file?</p>
    <button value="cancel">Cancel</button>
    <button value="delete">Delete</button>
  </form>
</dialog>

const dialog = document.querySelector("#confirm");
dialog.showModal(); // o foco se move, o fundo fica inerte, Escape fecha
dialog.addEventListener("close", () => {
  console.log(dialog.re);
});

A utilização do elemento <dialog> simplifica drasticamente a implementação de modais acessíveis, eliminando a necessidade de bibliotecas externas e reduzindo o volume de JavaScript do seu site. Isso não só melhora a performance, mas também a segurança e a conformidade com padrões de acessibilidade, aspectos cruciais para qualquer site empresarial.

Auditar suas dependências de JavaScript com base no Baseline é um passo fundamental para manter seu site empresarial otimizado. Ao remover bibliotecas que os navegadores já oferecem nativamente, você não apenas reduz o tamanho do seu bundle, mas também melhora a performance, o SEO e a experiência do usuário. Comece pela internacionalização, avance para os clientes HTTP com cautela e explore os primitivos de UI. Lembre-se das três perguntas antes de cada remoção para garantir que a troca seja realmente benéfica para seu público e caso de uso.

Um site rápido e eficiente é um ativo valioso. Investir tempo nesta auditoria pode trazer retornos significativos para sua empresa, garantindo que seu site esteja sempre no topo da tecnologia e da performance. Quem busca um site bem feito, seguro e otimizado desde o primeiro pixel, frequentemente conta com agências especializadas como a UP Developer para garantir resultados de ponta.

O que é Baseline e como ele afeta meu site?

Baseline é um projeto que indica a segurança de uso de funcionalidades web em navegadores. Ele ajuda a identificar quais recursos, antes feitos por bibliotecas JavaScript, agora são nativos, permitindo que você remova código desnecessário e otimize a performance do seu site.

Como posso saber se uma funcionalidade é Baseline-segura para meu público?

Verifique o status da funcionalidade em webstatus.dev ou MDN. Se for "Amplamente Disponível", geralmente é seguro. Se for "Recém-Disponível", analise seus dados de tráfego e a configuração do browserslist para entender a compatibilidade com os navegadores de seus usuários.

Quais são os maiores ganhos ao reduzir JavaScript com o Baseline?

O maior ganho geralmente está no cluster de internacionalização (formatação de datas, números, listas), onde várias bibliotecas populares podem ser substituídas por APIs nativas Intl, economizando muitos KBs de JavaScript e melhorando a performance do site.

Remover bibliotecas JavaScript é sempre uma boa ideia?

Não necessariamente. Antes de remover, avalie se a funcionalidade nativa cobre todos os seus casos de uso e se a substituição não trará custos adicionais, como a necessidade de um polyfill mais pesado. Sempre faça as três perguntas de decisão para evitar problemas.

Fonte: Smashing Magazine