Guia de melhoria de qualidade de sites Astro — Caminho até 99 pontos no PageSpeed Mobile

Introdução

O site oficial da Acecore, renovado em março de 2026, foi publicado com a configuração Astro 6 + UnoCSS + Cloudflare Pages. Porém, logo após a renovação, o site estava apenas no nível de “funcionar”. Havia margem para melhoria em todos os aspectos: desempenho, SEO, acessibilidade e UX.

Este artigo resume a visão geral de como alcançamos 99 pontos no PageSpeed Insights mobile e 100 em todos os itens no desktop após mais de 150 itens de melhoria.

A barreira dos 99 pontos no PageSpeed mobile

Primeiro, o que quero transmitir é que obter alta pontuação no PageSpeed Insights mobile é mais difícil do que se imagina.

Simulação mobile do Lighthouse

O Lighthouse, que roda por trás do PageSpeed Insights, aplica o seguinte throttling nos testes mobile:

Ou seja, uma página que abre em 1 segundo com fibra óptica leva 5-6 segundos na simulação do Lighthouse. Carregar 200 KiB de CSS em slow 4G causa ~1 segundo de bloqueio.

Não-linearidade da pontuação

A pontuação do PageSpeed não é linear:

• 50 → 90: Alcançável com otimizações básicas (compressão de imagens, remoção de scripts desnecessários)
• 90 → 95: Necessária estratégia de entrega de CSS, fontes e imagens
• 95 → 99: Ajuste fino em milissegundos. Decisão entre CSS inline vs. arquivo externo
• 99 → 100: Dependente da velocidade de resposta de CDNs externos e variação de medição do próprio Lighthouse. Extremamente difícil manter de forma estável em sites com AdSense/GA4

Variação da pontuação

Mesmo para o mesmo site, a pontuação pode variar 2-5 pontos entre medições. As causas incluem:

• Velocidade de resposta de CDNs de imagem como wsrv.nl
• Estado do cache do edge server do Cloudflare Pages
• Margem de erro do próprio Lighthouse

Portanto, o objetivo deve ser “obter pontuação alta de forma estável em medições repetidas”, não “atingir 100 uma vez”.

Pontuação final

Apesar das dificuldades acima, conseguimos alcançar de forma estável as seguintes pontuações:

Os 4 pilares da melhoria

As melhorias foram organizadas em 4 grandes categorias. Os detalhes de cada uma estão em artigos individuais.

1. Desempenho

A maior contribuição para alcançar 99 pontos no mobile foi a otimização de desempenho. Eliminamos gargalos um a um: estratégia de entrega CSS (inline vs. arquivo externo), self-hosting de fontes, otimização de imagens responsivas e carregamento lazy de AdSense/GA4.

Os 3 itens de maior impacto foram:

• Externalização do CSS: Mudança de expandir 190 KiB de CSS inline para arquivo externo, reduzindo o tamanho de transferência do HTML em até 91%
• Correção de incompatibilidade no nome da fonte: Descoberta e correção do problema de que o nome registrado por @fontsource-variable/noto-sans-jp era Noto Sans JP Variable, diferente do Noto Sans JP referenciado no CSS
• Imagens responsivas: Configuração de srcset + sizes em todas as imagens para entregar tamanhos adequados para mobile

2. SEO

Para suportar rich results do Google, implementamos 7 tipos de dados estruturados JSON-LD. Incluindo meta tags OGP, canonical, otimização de sitemap e expansão do feed RSS, estabelecemos a base para comunicar com precisão a estrutura do site aos mecanismos de busca.

3. Acessibilidade

100 pontos em Accessibility no PageSpeed foi alcançado passando os testes automáticos do axe DevTools e Lighthouse. Acumulamos correções meticulosas: aria-hidden em ícones decorativos (mais de 30 locais), notificação SR em links externos, correção de contraste (text-slate-400 → text-slate-500), e aplicação global de estilos focus-visible.

4. UX e qualidade de código

Resolvemos o problema de interrupção de scripts causado pela introdução de View Transitions (ClientRouter) em todos os componentes e implementamos busca de texto completo com Pagefind. No aspecto de código, melhoramos a segurança de tipos com TypeScript e centralizamos constantes (URLs sociais, IDs de anúncios e GA4 ID no constante SITE), melhorando significativamente a manutenibilidade.

Stack tecnológica

Conclusão

Para alcançar 99 pontos no PageSpeed Insights mobile, é fundamental seguir o princípio de “não enviar o que não é necessário”. Estratégia de entrega CSS, self-hosting de fontes, otimização de imagens, carregamento lazy de scripts externos — cada medida é simples individualmente, mas combinadas geram grande efeito.

Ao mesmo tempo, avançar as melhorias de SEO, acessibilidade e UX em paralelo permite alcançar alta pontuação em todos os 4 itens. Em vez de perseguir 100 pontos, o objetivo realista é manter 95+ pontos de forma estável.

Para detalhes de cada tópico, acesse os link cards acima. Para o processo de melhoria e reflexo no código, consulte também o artigo sobre fluxo de desenvolvimento com GitHub Copilot.