Reestruturei meu blog com Astro 5 e levei a pontuação do Lighthouse de 68 a 100

Na semana passada, descartei a estrutura inteira do meu blog em Next.js, que eu usava havia dois anos, e migrei para o Astro 5. O motivo foi uma pontuação de apenas 68 no Lighthouse: o blog demorava tanto para carregar que um amigo comentou que “ficava rodando por uma eternidade”. Depois da migração, o build caiu de 2 minutos para 18 segundos, e a pontuação de desempenho subiu de 68 para 98.

Neste artigo, vou falar de três coisas: por que o Astro é tão rápido, como usá-lo para criar um blog e como configurar o SEO. Se você também sofre com o desempenho do seu blog, o conteúdo a seguir deve ajudar.

Por que vale a pena prestar atenção no Astro

Sendo sincero, no começo eu não me interessava muito pelo Astro. Já existem frameworks demais: Next.js, Nuxt e Gatsby são tantas opções que fica difícil escolher. Eu pensava: preciso mesmo aprender mais uma tecnologia? O investimento de tempo vale a pena?

Até que encontrei alguns dados.

A pesquisa State of JavaScript 2024 mostrou o Astro em primeiro lugar em interesse, retenção e satisfação. Em adoção, ficou em segundo, atrás apenas do Next.js. O GitHub Octoverse 2025 foi ainda mais impressionante: apontou o Astro como a terceira linguagem de crescimento mais rápido.

Outro dado interessante: 60% dos sites Astro passam na avaliação de Core Web Vitals, enquanto WordPress e Gatsby ficam em apenas 38%. É uma diferença considerável.

Também vale olhar quem usa Astro: a documentação do GitHub, a documentação para desenvolvedores do Firebase e a Smashing Magazine, que migrou do WordPress. Em 2025, Google, Reuters e Typst também começaram a adotá-lo.

Foi aí que parei para pensar de verdade: o que é o meu blog? Um conjunto de artigos em Markdown, com realce de código e, de vez em quando, um componente de comentários. Eu precisava mesmo de toda a complexidade full stack do Next.js? Provavelmente não.

Minha conclusão é esta: se você trabalha principalmente com blogs, sites de documentação ou landing pages, o Astro é hoje uma das melhores escolhas. Mas, para e-commerce ou SaaS com muita interação, o Next.js continua sendo mais adequado.

Não é uma questão de qual é melhor; são cenários diferentes.

Arquitetura de ilhas: o segredo da velocidade do Astro

Você já abriu uma página em que o conteúdo apareceu, mas os botões ainda não respondiam?

Normalmente, a culpada é a hidratação do JavaScript. Frameworks tradicionais enviam todo o JavaScript da página ao navegador de uma vez e depois o “ativam” aos poucos. Quanto mais complexa a página, maior a espera.

O Astro segue uma abordagem totalmente diferente, chamada arquitetura de ilhas, ou Islands Architecture.

Vultr - Servidor cloud NVMe de alto desempenho, 32 locais globais, deploy Docker com um clique

Ver preços →Anúncio

Como entender isso? Imagine a página como um oceano de HTML estático. Somente os componentes que realmente precisam de interação — como contadores, formulários e comentários — “emergem” como ilhas independentes. Cada ilha gerencia seu próprio JavaScript sem interferir nas outras.

No código, fica assim:

---

// Este componente só carrega JS quando entra na área visível

---

<Counter client:visible />
// Este componente permanece sempre como HTML estático e não carrega JS
<Header />

Viu o client:visible? Essa diretiva diz ao Astro para ativar o componente somente quando o usuário o enxergar. Há também client:load, que ativa no carregamento da página, e client:idle, que ativa quando o navegador está ocioso.

E o resultado prático? No meu blog, o First Contentful Paint (FCP) caiu de 2,1 para 0,8 segundo, e o Time to Interactive (TTI), de 4,5 para 1,2 segundo. E o bundle? Os 280 KB de JavaScript viraram apenas 45 KB.

É justo fazer uma ressalva: se a sua página é composta inteiramente por componentes interativos, o Astro talvez não seja a melhor opção. A vantagem dele aparece quando a maior parte do conteúdo é estática. Para blogs e documentação, porém, a diferença é enorme.

Server Islands: a novidade do Astro 5

O Astro 5 também trouxe um recurso interessante chamado Server Islands.

Antes havia um dilema: se quase toda a página era estática, mas uma pequena área precisava de conteúdo dinâmico, como o avatar do usuário ou a quantidade de itens no carrinho, o que fazer? Era preciso renderizar a página inteira dinamicamente ou abrir mão da personalização.

A ideia das Server Islands é: primeiro entregar ao usuário uma estrutura estática de HTML e depois deixar o servidor injetar separadamente as partes dinâmicas.

Nas palavras da documentação, “desempenho e personalização deixam de ser incompatíveis”. Fiz um teste e a experiência realmente ficou muito fluida.

Content Layer: uma nova forma de gerenciar conteúdo

Quando o blog ultrapassa 100 artigos, um problema fica cada vez mais evidente: gerenciar o conteúdo vira uma bagunça.

Na abordagem tradicional, os arquivos Markdown ficam acumulados no diretório src/content e são organizados pelo sistema de arquivos. Com poucos artigos funciona bem, mas, conforme o número aumenta, localizar arquivos fica trabalhoso e conectar um CMS também não é simples.

A Content Layer do Astro 5 mudou completamente esse cenário.

O núcleo dela é um mecanismo chamado Loader. Você pode carregar conteúdo de qualquer lugar: Markdown local, Strapi, Contentful, Notion ou até uma API própria. As fontes ficam unificadas e o gerenciamento muito mais organizado.

// astro.config.mjs
import { defineCollection, z } from 'astro:content';
const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    tags: z.array(z.string()),
  }),
});

Essa configuração carrega todos os arquivos Markdown de ./src/content/blog e exige que cada artigo tenha os campos title, pubDate e tags.

Quanto ao desempenho, a equipe oficial afirma que o build de Markdown pode ficar até 5 vezes mais rápido, e o de MDX, 2 vezes, enquanto o uso de memória cai de 25% a 50%. No meu blog, o build passou de 2 minutos para 18 segundos, provavelmente graças a esse recurso.

Hoje uso o glob loader para carregar Markdown local. Depois quero testar uma integração com o Notion para separar escrita e publicação.

View Transitions: transições de página mais fluidas

Esta parte é simples, então vou passar rapidamente por ela.

No Astro 5, o componente ViewTransitions passou a se chamar ClientRouter. A função é a mesma; o novo nome apenas descreve melhor o que ele faz: roteamento no cliente.

---

import { ClientRouter } from 'astro:transitions';

---

<html>
  <head>
    <ClientRouter />
  </head>
  <body>
    <!-- Seu conteúdo -->
  </body>
</html>

Depois de adicionar esse componente, a navegação entre páginas ganha animações de transição em vez de mudanças bruscas. A experiência melhora bastante.

Em 2025, a API nativa View Transitions já era compatível com quase todos os navegadores modernos; o Firefox foi o último. O ClientRouter oferece automaticamente um fallback para navegadores sem suporte.

Railway - Plataforma de deploy moderna, sem ops complexas, no ar em minutos

Começar agora →Anúncio

Se você precisa preservar estado entre páginas, como manter um player de música tocando durante a navegação, o ClientRouter é a escolha certa. Para animações simples, as CSS View Transitions nativas também são suficientes.

Configuração prática de SEO

Esta é a parte principal. Muita gente acha que o bom desempenho do Astro resolve tudo, mas a configuração de SEO também é importante. Os mecanismos de busca não avaliam apenas velocidade; eles também observam se a estrutura da página é clara e se os metadados são precisos.

Na primeira vez que configurei o SEO, caí em várias armadilhas. A seguir, compartilho o jeito correto de fazer.

Configuração do sitemap

Comecemos pelo sitemap, o item mais básico e também um dos mais fáceis de esquecer.

npx astro add sitemap

Depois, adicione o endereço do site ao astro.config.mjs:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
  site: 'https://yourdomain.com', // Não se esqueça desta linha!
  integrations: [sitemap()],
});

Na primeira vez, esqueci de configurar site. O sitemap foi gerado apenas com caminhos relativos, que o Google simplesmente não reconheceu. Levei vários dias para encontrar esse erro.

Gerenciamento de meta tags

Cada artigo deve ter title e description próprios. Eu centralizo esses dados no frontmatter do Markdown:

---

title: "Guia de otimização de desempenho do Astro 5"
description: "Uma análise detalhada da arquitetura de ilhas e da Content Layer do Astro 5..."
publishDate: 2025-11-20
ogImage: "/images/astro-5-cover.png"

---

Depois, o componente de layout lê esses dados:

---

const { title, description, ogImage } = Astro.props.frontmatter;

---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={ogImage} />
  <link rel="canonical" href={Astro.url} />
</head>

A canonical URL é importante para impedir que mecanismos de busca tratem o mesmo conteúdo como páginas duplicadas.

Dados estruturados (JSON-LD)

Muita gente não conhece esse recurso, mas ele ajuda bastante no SEO. Dados estruturados informam aos mecanismos de busca que a página é um artigo, quem é o autor e quando ela foi publicada.

<script type="application/ld+json">
  {JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": title,
    "datePublished": publishDate,
    "author": {
      "@type": "Person",
      "name": "Seu nome"
    }
  })}
</script>

Você pode usar o Schema.org Validator para verificar se há algum problema nos dados estruturados.

Tendências de SEO em 2025

Vale acrescentar algumas mudanças importantes deste ano:

1. LLMs também rastreiam suas páginas. Tanto mecanismos de busca quanto IA dependem de conteúdo estruturado. Escrever com clareza é mais importante do que acumular palavras-chave.
2. Links internos são importantes. Cada página deve ter pelo menos três; caso contrário, o mecanismo de busca pode considerá-la pouco relevante para indexação.
3. Princípio E-E-A-T. Experiência, especialização, autoridade e confiabilidade não são misticismo; são fatores reais de ranqueamento do Google.

Checklist de SEO

Para encerrar, confira esta lista depois de concluir a configuração:

• sitemap.xml foi gerado e está acessível
• cada página tem title e description exclusivos
• todas as imagens têm atributo alt
• os dados estruturados JSON-LD foram adicionados
• robots.txt está configurado corretamente
• cada página tem pelo menos três links internos

Otimização de imagens: o grande vilão de desempenho que muita gente ignora

Otimizar imagens parece simples, mas há uma armadilha: muita gente acha que basta comprimi-las, quando há bem mais a fazer.

O Astro inclui o módulo astro:assets, cujo componente Image é muito poderoso:

---

import { Image } from 'astro:assets';
import myImage from '../assets/hero.png';

---

<Image
  src={myImage}
  alt="Hero image"
  widths={[400, 800, 1200]}
  format="webp"
/>

Esse código faz várias coisas:

1. Infere automaticamente a largura e a altura da imagem, evitando deslocamento de layout (CLS)
2. Gera vários tamanhos para o navegador carregar apenas o necessário
3. Converte a imagem para WebP, reduzindo o tamanho do arquivo

Aqui está o ponto essencial: coloque as imagens no diretório src, não em public. O Astro otimiza as imagens de src, mas não as de public. Eu já as coloquei no lugar errado e os arquivos ficaram absurdamente grandes.

Alibaba Cloud - Escolha dos desenvolvedores, 15% de desconto exclusivo em Lighthouse

Ganhar 15% off →Anúncio

Outra técnica: para imagens remotas, use inferSize e obtenha as dimensões automaticamente:

<Image
  src="https://example.com/image.jpg"
  alt="Remote image"
  inferSize
/>

Qual é o impacto? Um projeto open source chamado AstroEdge fez um teste em que uma imagem caiu de 4,2 MB para 0,8 MB, uma redução de 82%. A pontuação de desempenho saltou de 79 para 100.

O Astro 5 também adicionou recorte experimental de imagens e suporte a componentes SVG. Consulte a documentação oficial se quiser saber mais.

Cuidados ao migrar de outros frameworks

Se você está vindo do Astro 4 ou de outro framework, vale conferir rapidamente esta seção.

Principais mudanças do Astro 5:

1. ViewTransitions passou a se chamar ClientRouter
2. Astro.glob() foi descontinuado; use import.meta.glob() ou getCollection()
3. O modo de renderização Hybrid foi incorporado à saída static
4. O serviço de imagens trocou Squoosh por Sharp
5. A proteção CSRF vem ativada por padrão

O comando de migração é simples:

npx @astrojs/upgrade

Ele resolve automaticamente a maior parte dos problemas de compatibilidade e avisa quando algum ajuste precisa ser feito manualmente.

Ao migrar do Next.js ou Gatsby, o trabalho será maior. A boa notícia é que o Astro oferece suporte a componentes React: você pode migrar as páginas primeiro e substituir os componentes aos poucos.

Considerações finais

Depois de tudo isso, os pontos principais são:

1. A arquitetura de ilhas deixa as páginas sem JavaScript por padrão e oferece uma vantagem natural de desempenho
2. A Content Layer unifica o gerenciamento de conteúdo e aceita qualquer fonte de dados
3. A configuração de SEO exige poucos passos, mas todos são importantes
4. A otimização de imagens é uma arma poderosa e escondida para melhorar o desempenho; não a ignore
5. View Transitions tornam a navegação muito mais fluida

Se você ainda está escolhendo um framework para o blog, minha sugestão é reservar meia hora para executar o template oficial do Astro e sentir a velocidade do build e a pontuação no Lighthouse.

npm create astro@latest -- --template blog

O template funciona imediatamente; basta ajustar a configuração para publicar.

Alguns recursos úteis:

• Documentação oficial do Astro (em inglês, mas é a mais completa)
• Site do Astro em chinês (tradução para chinês)

No próximo artigo, pretendo mostrar na prática como criar um blog técnico com Astro, Tailwind e MDX. Se tiver interesse, acompanhe as próximas publicações.

Qual framework você usa no seu blog? Já sofreu com problemas de desempenho? Conte nos comentários.