Com a tecnologia a evoluir ao ritmo a que evolui, o site de uma empresa é bem mais do que uma montra digital: é uma ferramenta crítica, que tem de ser otimizada para desempenho, escalabilidade e facilidade de manutenção. Na Lynxmind reconstruímos recentemente o nosso site, abandonando uma stack desatualizada e fluxos de trabalho ineficientes em favor de uma solução moderna e rápida, assente em Astro. A transformação incluiu ainda a migração para o GitHub e a adoção de GitHub Actions para CI/CD, o que melhorou substancialmente a nossa agilidade.
Porquê reconstruir?
Antes de avançar, avaliámos as limitações da solução anterior. Vários fatores tornaram claro que era preciso mudar.
Os problemas da stack anterior
- Difícil de alterar e estender: o código antigo, feito em Bootstrap e jQuery, era rígido e pesado de manter, ao ponto de qualquer alteração menor se tornar um incómodo.
- Tecnologia desatualizada: cumpriram o seu papel na altura, mas já não estavam alinhadas com as boas práticas atuais de desempenho, acessibilidade e escalabilidade.
- Publicação lenta e confusa: cada atualização exigia intervenção manual desnecessária, aumentando o risco de erro e de indisponibilidade.
- Fraco desempenho: a ausência de minificação, imagens não otimizadas e JavaScript em excesso tornavam o site visivelmente lento.
- Código pouco colaborativo: sem um sistema de controlo de versões como o Git, colaborar e acompanhar alterações era difícil e propenso a erros.
Os objetivos de negócio
- Melhorar a experiência dos clientes: tempos de carregamento mais rápidos e navegação mais fluida eram a prioridade.
- Facilidade de mudança: a nova arquitetura tinha de permitir alterações e melhorias rápidas, sem complexidade.
- Colaboração: ao modernizar o fluxo de trabalho e adotar o Git, quisemos permitir uma colaboração fluida entre a equipa e as partes interessadas.
Porquê Astro?
Depois de avaliar várias opções, o Astro destacou-se como a melhor escolha.
Geração estática, para velocidade e SEO
O Astro é um dos geradores de sites estáticos mais rápidos e tem uma abordagem agnóstica quanto à framework, funcionando bem com React, Vue, Svelte e outras bibliotecas de interface. O suporte nativo a MDX revelou-se particularmente útil para estruturar os conteúdos do blog. Em condições reais, o Astro apresenta métricas de Web Vitals excecionais face a outras frameworks populares, como se vê no gráfico:
Ver o conjunto de dados completo
Hidratação parcial, para a interatividade certa
Uma das características que mais distingue o Astro é a hidratação parcial: os componentes interativos só carregam quando são necessários. Isto mantém a quantidade de JavaScript no mínimo, sem perder flexibilidade.
Pouco JavaScript, mais desempenho
Por omissão, o Astro envia apenas o HTML e o CSS necessários, o que reduz muito os tempos de carregamento face às frameworks tradicionais renderizadas no cliente.
A migração do código para controlo de versões
A passagem para o GitHub foi um passo decisivo na modernização do nosso processo.
A experiência inicial com o Azure DevOps e a razão da mudança
O Azure DevOps tem funcionalidades poderosas, mas achámo-lo menos intuitivo para as nossas necessidades. A integração estreita com CI/CD, a facilidade de colaboração e os ambientes de pré-visualização à abertura de cada pull request tornaram o GitHub a melhor opção.
As vantagens do GitHub
- Colaboração mais fácil: o ecossistema do GitHub (pull requests, revisões de código, discussões) torna o trabalho em equipa mais fluido.
- Segurança sólida: funcionalidades como análise de código e Dependabot ajudam a detetar vulnerabilidades cedo.
- Integrações ricas: compatibilidade natural com GitHub Actions, gestão de issues e ferramentas de gestão de projeto.
O CI/CD com GitHub Actions
Automatizar as publicações
As GitHub Actions revelaram-se uma alternativa mais simples e flexível ao Azure DevOps para CI/CD. Tirámos partido da integração nativa com o Azure Static Web Apps, o que permitiu publicações fluidas com configuração mínima.
Abandonar Kubernetes e Docker por um CI/CD mais simples
Começámos por explorar Kubernetes e Docker, mas geri-los tornou-se um peso desnecessário para um site estático. Optámos por GitHub Actions com publicação direta no Azure Static Web Apps, o que deu tempos de publicação mais curtos e menos complexidade.
O que o CI/CD trouxe
- Ciclos de desenvolvimento mais rápidos: acabaram as publicações manuais.
- Entregas fiáveis: cada alteração é testada em ambiente de pré-visualização antes de ser integrada.
- Poupança de tempo: a equipa concentra-se em construir funcionalidades em vez de tratar de publicações.
Como se vê no gráfico seguinte, a melhoria é significativa. Eliminámos por completo o trabalho manual, o que reduz o risco global, e cortámos o tempo de publicação em 70%. Ao longo do tempo, a poupança é considerável.
Os ganhos de desempenho
As Web Vitals são um conjunto de métricas da Google que ajudam a determinar se um site é rápido, responsivo e visualmente estável.
As nossas não eram boas, por isso os resultados foram imediatos: houve um salto significativo nas pontuações do Lighthouse, sobretudo em métricas como o First Contentful Paint (FCP) e o Largest Contentful Paint (LCP).
🔍 Antes e depois: pontuações Lighthouse do site
Entrega otimizada de recursos
O Astro traz otimizações de recursos que também pesaram na melhoria do desempenho.
- Carregamento diferido de imagens, para reduzir o tempo de carregamento inicial.
- JavaScript mínimo, para manter a interatividade sem inchar a página.
- Suporte nativo a formatos de imagem eficientes, como o WebP.
Melhorias de SEO e acessibilidade
As vantagens da renderização estática para os motores de busca:
- Com a geração estática do Astro, todas as páginas são pré-renderizadas no momento da compilação, o que melhora a indexação e o rastreio.
HTML semântico e boas práticas de acessibilidade:
- Uso correto de cabeçalhos, atributos alt e funções ARIA, para uma experiência mais amigável.
O que aprendemos
Principais conclusões da migração para Astro e GitHub:
- A transição de Bootstrap e jQuery para Astro com TypeScript, React e Tailwind correu sem sobressaltos.
- A reconstrução assentou em manter o design original e reescrever o código de raiz.
- O ecossistema do GitHub melhorou a eficiência e facilitou as contribuições.
Dificuldades e soluções:
- A migração consumiu cerca de 80 horas de desenvolvimento, mas os ganhos de SEO, as melhorias de UX e a agilidade futura justificaram largamente o investimento.
- Normalizar os componentes de interface melhorou a consistência da marca e tornou as alterações futuras mais fáceis de manter.
Porque é que a escolha da stack importa
Escolher bem a stack desde cedo evita dívida técnica, reescritas dispendiosas e fluxos de trabalho ineficientes mais à frente. Ao optar por Astro, GitHub e GitHub Actions, garantimos uma base preparada para o futuro.
As vantagens de longo prazo de investir em tecnologia web moderna:
- Melhor desempenho → mais envolvimento dos utilizadores
- Manutenção mais fácil → ciclos de iteração mais rápidos
- Fluxo de trabalho otimizado → menores custos de desenvolvimento
Os próximos passos
-
Estamos a ponderar acrescentar um CMS para os artigos do blog e para uma futura secção de notícias, tornando a gestão de conteúdos ainda mais simples.
-
A nossa experiência em desenvolvimento frontend, DevOps e otimização de desempenho permite-nos ajudar os clientes a fazer escolhas tecnológicas informadas, que maximizem o seu impacto digital.
Conclusão
Reconstruir o site da Lynxmind com Astro, GitHub e GitHub Actions foi mais do que uma atualização técnica: foi um passo estratégico para melhor desempenho, processos mais simples e um desenvolvimento mais escalável. As melhorias em velocidade, SEO e facilidade de manutenção já mostraram resultados mensuráveis, provando que a escolha da stack conta.
📩 Se procura melhorar o desempenho e a agilidade do seu site, a Lynxmind está pronta a ajudar. Vamos construir algo bom em conjunto.
