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

No cenário digital atual, a performance do site é um fator crítico para o sucesso de qualquer empresa. Um site rápido melhora a experiência do usuário, impacta diretamente o SEO e, consequentemente, as suas conversões. Uma das formas mais eficazes de otimizar essa performance é reduzindo a quantidade de JavaScript que o seu site carrega. A boa notícia é que a plataforma web está evoluindo rapidamente, e muitas funcionalidades que antes exigiam bibliotecas externas agora são nativas dos navegadores. É aqui que entra o Baseline, uma iniciativa crucial para quem cuida de um site empresarial.

Muitas vezes, instalamos uma dependência JavaScript e não a revisitamos. Ela cumpre sua função, os testes passam, e seguimos em frente. No entanto, a plataforma web não para, e uma quantidade surpreendente de bibliotecas que estão no seu package.json hoje já está embutida no navegador. Em um aplicativo JavaScript de médio porte, é comum encontrar entre 60KB e 90KB (minificado e compactado) de dependências que a plataforma já consegue lidar por conta própria. Funções como formatação de datas e números, requisições HTTP, modais, tooltips, clonagem profunda e agrupamento de arrays eram lacunas reais há alguns anos, mas muitas delas não são mais.

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

Essa diferença de 30 meses entre “Recém-Disponível” e “Amplamente Disponível” é muito importante. Uma funcionalidade Amplamente Disponível geralmente permite que você remova uma biblioteca hoje. Já uma funcionalidade Recém-Disponível exige que você verifique primeiro sua audiência ou esteja confortável com uma pequena verificação de funcionalidade. Entender esses estados é o primeiro passo para uma auditoria eficaz do seu site, como explicamos em nosso post sobre princípios de design para otimização de sites.

Você pode verificar qualquer funcionalidade em webstatus.dev, no MDN (cada página de referência exibe um selo Baseline no topo) ou programaticamente com o pacote npm web-features.

É tentador ler “o navegador faz isso agora” e começar a arrancar bibliotecas. Mas não faça isso de forma cega. Uma troca que parece gratuita no papel pode silenciosamente quebrar coisas para uma parte dos seus usuários ou custar uma funcionalidade que você usava sem perceber. Antes de remover qualquer biblioteca, faça três perguntas essenciais:

Mantenha essas perguntas em mente. Cada “cluster” de dependências que veremos a seguir é, na verdade, a aplicação dessas perguntas a uma área diferente do seu site. Para mais dicas de otimização, confira nosso artigo sobre IA e experiência no desenvolvimento web.

Este é o cluster onde você geralmente encontrará a maior quantidade de KBs sobre funcionalidades que já são Amplamente Disponíveis. O navegador oferece uma série de ferramentas de formatação sob o namespace Intl, tornando muitas bibliotecas pequenas e populares desnecessárias. Os “suspeitos” mais comuns e suas substituições são:

Vamos analisar alguns deles. O timeago.js transforma um timestamp em “3 horas atrás”. O Intl.RelativeTimeFormat faz o mesmo e é Baseline Amplamente Disponível. Com a opção numeric: "auto", ele oferece “ontem” em vez de “1 dia atrás” quando a língua tem uma palavra para isso. Você passa um número e uma unidade, e obtém uma string localizada.

O Intl.NumberFormat cobre a maioria das funcionalidades de formatação de números: separadores de milhares, moeda, porcentagens e notação compacta. Já o 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.

A única ressalva aqui é o Intl.DurationFormat, que no momento da escrita é Baseline Recém-Disponível. Ele se tornou disponível em todos os principais motores em março de 2025 e deve se tornar Amplamente Disponível em 2027. Para aplicativos de grande audiência, ele falha na primeira pergunta, a menos que você verifique seu tráfego ou adicione um fallback. Para uma ferramenta interna em navegadores modernos, está tudo bem hoje. Para um site público com dispositivos antigos, espere mais um ano ou proteja-o com uma verificação de funcionalidade.

Se seu aplicativo usa o conjunto completo dessas bibliotecas (humanize-duration, timeago.js, pluralize, numeral), isso representa aproximadamente 14 KB compactados de dependências, a maioria delas substituível agora mesmo por APIs Amplamente Disponíveis. O cluster de internacionalização geralmente é o ganho mais fácil em toda a auditoria, otimizando seu site para um público global.

Este cluster é mais complexo e exige atenção. 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. Uma requisição GET básica com fetch exige uma linha extra (res.json()) em comparação com axios, que é mais explícito. Esse é o padrão em todo este cluster: fetch faz menos por você por padrão, e você decide se quer as coisas que ele omite.

O axios tem uma opção de timeout. O fetch tem AbortSignal.timeout(), permitindo abortar uma requisição após um tempo definido. No entanto, é aqui que a pergunta 3 do nosso guia de decisão faz a maior parte do trabalho. As lacunas do fetch em relação ao axios incluem:

Nenhuma dessas funcionalidades é difícil de reconstruir, e a maioria dos aplicativos usa apenas uma ou duas delas. Mas este é exatamente o tipo de cluster 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 de fetch pode economizar cerca de 17 KB compactados, impactando positivamente o tempo de carregamento do seu site.

Este cluster oferece algumas das substituições mais satisfatórias, porque as funcionalidades da plataforma não apenas correspondem à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 tooltips e popovers (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> resolve uma enorme quantidade de problemas de acessibilidade relacionados a modais: aprisionamento de foco dentro do modal, fechamento com a tecla Escape, restauração do foco para o elemento anterior quando o diálogo é fechado e renderização acima de tudo. Sendo Amplamente Disponível, o <dialog> faz tudo isso por você, garantindo que seu site seja mais acessível e leve.

```html <dialog id="confirm"> <form method="dialog"> <p>Excluir este arquivo?</p> <button value="cancel">Cancelar</button> <button value="delete">Excluir</button> </form> </dialog> ```

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

A substituição dessas bibliotecas por funcionalidades nativas não apenas reduz o tamanho do bundle do seu JavaScript, mas também melhora a acessibilidade e a manutenção do seu código. Essa é uma estratégia fundamental para quem busca um crescimento de sites sustentável.

A constante evolução da plataforma web oferece oportunidades valiosas para otimizar seu site, reduzir a dependência de JavaScript e, consequentemente, melhorar a performance, o SEO e a experiência do usuário. A iniciativa Baseline é uma ferramenta poderosa para guiar essa otimização, permitindo que você identifique e substitua bibliotecas por funcionalidades nativas dos navegadores. Não se trata apenas de remover código, mas de tomar decisões informadas que tragam benefícios reais para o seu negócio.

Auditar suas dependências regularmente, aplicando o framework de decisão que apresentamos, é uma prática essencial. Essa abordagem pragmática garante que seu site esteja sempre atualizado, leve e performático, sem comprometer funcionalidades críticas. Ao investir nessa otimização, você não só economiza recursos de desenvolvimento, mas também garante que seu site esteja preparado para o futuro da web, oferecendo uma experiência superior para seus usuários. Para empresas que buscam um desenvolvimento web de alta qualidade, focado em WordPress, SEO e segurança, contar com uma agência especializada como a UP Developer pode fazer toda a diferença.

O que é o Baseline na web?

Baseline é um projeto que categoriza funcionalidades da web como “Disponível Limitado”, “Recém-Disponível” ou “Amplamente Disponível” nos principais navegadores. Ele ajuda desenvolvedores a entenderem a segurança de usar uma funcionalidade nativa sem a necessidade de bibliotecas externas.

Por que devo me preocupar em reduzir o JavaScript do meu site?

Reduzir o JavaScript melhora significativamente a performance do seu site, resultando em carregamentos mais rápidos, melhor pontuação de SEO, menor consumo de dados para o usuário e uma experiência de navegação mais fluida. Isso impacta diretamente a retenção de usuários e as taxas de conversão.

Como sei quais bibliotecas JavaScript posso remover?

Você pode auditar suas dependências verificando se as funcionalidades que elas entregam já são nativas e Baseline Amplamente Disponíveis nos navegadores. Ferramentas como webstatus.dev ou o MDN com selos Baseline podem ajudar nessa identificação, seguindo o guia de decisão de três perguntas apresentado no post.

A remoção de bibliotecas JavaScript pode quebrar meu site?

Sim, se não for feita corretamente. É crucial seguir um processo de auditoria, verificando a compatibilidade com a audiência, o custo real da substituição (incluindo possíveis polyfills) e se a funcionalidade nativa cobre todos os casos de uso da biblioteca original. Testes rigorosos são indispensáveis.

Fonte: SMASHINGMAGAZINE.COM