Por qué elegí Astro y GSAP para mi portfolio
Cómo lograr el máximo rendimiento móvil con animaciones fluidas y cinemáticas sin aumentar los tiempos de carga.
El diseño web moderno plantea a menudo una elección difícil: priorizar el rendimiento puro o ofrecer una experiencia visual animada e inmersiva. Muchos portfolios sufren una sobrecarga de efectos que ralentizan la navegación, especialmente en móvil. Un sitio que tarda más de tres segundos en mostrarse es un sitio que sus visitantes abandonarán.
Para mi portfolio, mi objetivo era claro. Quería combinar puntuaciones de rendimiento óptimas con animaciones cuidadas. Para lograrlo, combiné dos herramientas: Astro y GSAP.
Astro: Rendimiento bruto por defecto
La mayoría de los frameworks JavaScript modernos envían una cantidad masiva de código al navegador, incluso para páginas principalmente textuales. Esto penaliza el tiempo de carga inicial.
Astro adopta el enfoque contrario con su arquitectura “Zero-JS por defecto”. Genera archivos HTML estáticos y no envía ningún archivo JavaScript al cliente, salvo que se solicite explícitamente para un componente interactivo.
Esta decisión técnica ofrece varias ventajas concretas:
- Tiempo de respuesta del servidor rápido: Las páginas están precompiladas y listas para servirse al instante.
- Puntuación máxima en herramientas de medición: Las puntuaciones de Lighthouse alcanzan 100/100 sin optimizaciones complejas a posteriori.
- Indexación naturalmente facilitada: Googlebot accede directamente a un contenido textual limpio y estructurado.
GSAP: Fluidez en las interacciones al desplazar
Si Astro se ocupa de la estructura sólida y rápida, GSAP (GreenSock) gestiona la animación de la interfaz. Para evitar ralentizar la carga inicial de la página (el LCP), apliqué reglas estrictas de integración:
- Sin animaciones pesadas por encima del pliegue: La primera sección visible (el Hero) utiliza animaciones CSS nativas muy ligeras. Esto elimina cualquier retraso en el renderizado visual.
- GSAP solo para el desplazamiento (ScrollTrigger): La biblioteca GSAP se carga en local con el atributo
defer. Solo se activa cuando el visitante empieza a desplazarse por la página, liberando así ancho de banda durante la visualización inicial. - Animaciones fluidas: Al manipular directamente el DOM en lugar de pasar por un framework reactivo pesado, las transiciones se mantienen fluidas incluso en dispositivos móviles de gama media.
Una alianza al servicio del resultado
Este dúo demuestra que ya no es necesario elegir entre belleza visual y velocidad de navegación. Al diseñar el sitio con cuidado desde la primera línea de código, se obtiene un escaparate eficiente y atractivo.
Cada decisión técnica en un sitio debe tener un objetivo preciso: mejorar la experiencia del usuario y servir los objetivos del negocio. Es con este mismo rigor con el que diseño los proyectos de mis clientes.