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:

Item	Configuração
Velocidade de download	~1.6 Mbps (slow 4G)
Velocidade de upload	~0.75 Mbps
Latência	150 ms (RTT)
CPU	4x slowdown

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 serviços de transformação de imagem como o Cloudflare Images
• 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:

Métrica	Mobile	Desktop
Performance	99	100
Accessibility	100	100
Best Practices	100	100
SEO	100	100

---

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

Tecnologia	Uso
Astro 6	Geração estática de site (arquitetura zero JS)
UnoCSS (presetWind3)	CSS utility-first
Cloudflare Pages	Hospedagem, CDN, controle de headers
@fontsource-variable/noto-sans-jp	Self-hosting de fonte japonesa
Cloudflare Images	Transformações de imagem (conversão automática AVIF/WebP)
Pagefind	Busca de texto completo para sites estáticos

---

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.