Cómo optimicé mi portfolio con Astro
Hace unas semanas decidí migrar mi portfolio de React a Astro. La decisión no fue fácil, pero los resultados han superado mis expectativas. Te cuento mi experiencia y las optimizaciones que implementé.
¿Por qué migrar a Astro?
Mi portfolio original estaba construido con React y, aunque funcionaba bien, tenía algunos problemas:
- Bundle size: Demasiado JavaScript para una página estática
- SEO: Problemas con el renderizado del lado del servidor
- Mantenimiento: Cada cambio requería rebuild completo
- Performance: Lazy loading manual y optimizaciones complejas
La migración paso a paso
1. Configuración inicial
npm create astro@latest porfolio.dev
cd porfolio.dev
npm install
2. Migración de componentes
Los componentes de React se convirtieron fácilmente a .astro:
---
// Antes: React component
const ProjectCard = ({ project }) => {
return <div>{project.title}</div>
}
// Ahora: Astro component
const { project } = Astro.props
---
<div>{project.title}</div>
3. Optimización de imágenes
Implementé un sistema de lazy loading inteligente:
<img
loading={index < 2 ? "eager" : "lazy"}
src={image}
alt="Imagen del proyecto"
/>
Resultados obtenidos
Performance
- Lighthouse Score: 95 → 99
- First Contentful Paint: 2.1s → 0.7s
- Bundle size: 45% reducción
Mantenibilidad
- Build time: 3x más rápido
- Hot reload: Instantáneo
- Deployment: Automático con Netlify
Lecciones aprendidas
- Astro es perfecto para portfolios: Estático por defecto, interactivo cuando lo necesitas
- Los componentes .astro son más simples: Menos boilerplate, más legible
- El ecosistema es maduro: Tailwind, TypeScript, todo funciona perfectamente
Próximos pasos
Ahora que tengo la base sólida, planeo:
- Implementar un blog técnico (¡como este!)
- Añadir más proyectos
- Optimizar aún más el SEO
Conclusión
La migración a Astro fue una de las mejores decisiones que tomé para mi portfolio. No solo mejoró el rendimiento, sino que también hizo el desarrollo más agradable.
¿Has migrado algún proyecto a Astro? ¿Qué experiencia tienes? Me encantaría leer tus comentarios.
¿Te gustó este post? Sígueme en GitHub o vista mi portfolio para más contenido técnico.
