Caso de estudio real

Este sitio es el experimento

Conservé la identidad visual que me gustaba y reconstruí todo lo que había debajo. Estos datos salen del repositorio; no son métricas de demostración.

2 7versión principal de Astro
97.5%menos peso en el retrato
0islas de UI hidratadas

  1. Actualizar los cimientos

    Astro 2 se había convertido en una limitación. El sitio ahora usa Astro 7, React actual y las nuevas APIs de colecciones de contenido.

    Astro 2.0.8Astro 7.0.8

  2. Hacer que JavaScript se justifique

    El contenido estático se entrega como HTML. Los comportamientos pequeños usan custom elements nativos y no hay islas hidratadas en la ruta crítica.

    Varias librerías de cliente0 islas hidratadas

  3. Mover menos bytes

    El retrato principal se redimensionó y recomprimió sin cambiar la dirección visual del sitio.

    Retrato de 1,29 MBRetrato de 33 KB

  4. Eliminar maquinaria inactiva

    Se eliminaron del proyecto librerías de animación, iconos, lazy loading, Vue y utilidades que habían quedado de experimentos antiguos.

    Dependencias heredadas12 paquetes eliminados

Inspector de arquitectura

Cada superficie tiene un coste distinto

No existe una única estrategia de renderizado que tenga sentido en todas partes. Selecciona una parte real del sitio para ver qué límite elegí y por qué.

Entrega
HTML estático
Coste en el navegador
Sin runtime de framework
Límite
Colección de contenido de Astro

Las páginas de proyectos priorizan el contenido y se renderizan durante el build. El navegador recibe el documento terminado y no necesita hidratar nada.

En el banco de trabajo

Lo próximo que estoy probando

Explorando

Revisión con IA y evidencia visible

Flujos que citan la fuente, muestran incertidumbre y dejan la decisión final en manos del ingeniero.

En práctica

Migrar sin congelar funcionalidades

Mover superficies Vue en cortes verticales mientras los contratos de componentes se mantienen estables para el equipo.

Próximo

Presupuestos de rendimiento en CI

Convertir los límites de bundles e imágenes en controles revisables, en lugar de tareas periódicas de limpieza.