{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Optimización de rendimiento en Astro

Aplica mejoras concretas en imágenes, carga de scripts y estructura para elevar Core Web Vitals.

Astro ya parte con ventaja en rendimiento, pero eso no significa que puedas olvidar buenas prácticas.

Optimizar imágenes, scripts y bloques críticos sigue siendo clave para sostener métricas en producción.

Esta lección se centra en acciones de alto impacto y bajo coste para mejorar experiencia real.

También verás cómo priorizar qué optimizar primero para no perder tiempo en microdetalles.

  • Empieza por lo que más impacta a usuario final.
  • Imágenes de hero y above-the-fold.
  • JavaScript no crítico en diferido.
  • Carga de fuentes controlada.
  • Minimizar dependencia de librerías pesadas.

Prioridades de optimización

Empieza por lo que más impacta a usuario final.

  • Imágenes de hero y above-the-fold.
  • JavaScript no crítico en diferido.
  • Carga de fuentes controlada.
  • Minimizar dependencia de librerías pesadas.

Checklist mínimo antes de deploy

Un ritual corto que evita regresiones.

  • Lighthouse sin alertas críticas.
  • Imágenes optimizadas y dimensionadas.
  • Sin scripts bloqueantes innecesarios.
  • Revisión móvil en red limitada.
Astro
14

Optimización de rendimiento en Astro

Aplica mejoras concretas en imágenes, carga de scripts y estructura para elevar Core Web Vitals.

¿Cuánto sabes de Astro?

Código del tema: npm run build && npm run preview

📘 Teoría

Prioridades de optimización

Empieza por lo que más impacta a usuario final.

  • Imágenes de hero y above-the-fold.
  • JavaScript no crítico en diferido.
  • Carga de fuentes controlada.
  • Minimizar dependencia de librerías pesadas.

Checklist mínimo antes de deploy

Un ritual corto que evita regresiones.

  • Lighthouse sin alertas críticas.
  • Imágenes optimizadas y dimensionadas.
  • Sin scripts bloqueantes innecesarios.
  • Revisión móvil en red limitada.

🧪 Aprende probando

Ejemplo Imagen con atributos estables Evita CLS definiendo dimensiones explícitas.
⌄

🏁 Retos

Reto Reto: reducir layout shift Añade width y height a la imagen.
⌄

🧰 Recursos

Enlaces útiles

Core Web Vitals
Test

Comprueba tus conocimientos con un test sobre Astro.

Test de Astro
Recursos del curso 15
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards
‹
Lección 13
API Routes en Astro para backend ligero
Lección 15
Deploy a producción con Astro
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .