La arquitectura de islas con Astro y Vue no es una optimización de último momento — es la decisión arquitectónica que permite 100/100 en Lighthouse con fotografÃas de alta resolución, tres idiomas y animaciones fluidas. El caso real de leonleroy.com.
La arquitectura de islas con Astro y Vue es la solución de estado del arte para sitios web que necesitan 100/100 en Lighthouse sin sacrificar interactividad ni calidad visual. No es una optimización de último momento — es una decisión arquitectónica que se toma antes de escribir la primera línea de componente. Este post explica por qué llegamos aquí y cómo funciona en la práctica.
La espiral de complejidad: cómo llegamos a empacar 400KB de JS para mostrar texto estático
Cada generación de frameworks web resolvió un problema real del momento en que apareció:
- jQuery (2006) — abstrajo las inconsistencias entre navegadores. Legítimo.
- Angular (2010) — trajo estructura a aplicaciones de escala enterprise. Legítimo.
- React / Vue (2013–2014) — componentes reutilizables, estado reactivo, UI declarativa. Legítimo.
El problema no fue ninguno de estos frameworks. El problema fue que los empezamos a usar para todo — incluyendo sitios que, en un 80%, son texto e imágenes estáticas que no necesitan estado reactivo ni hidratación del cliente.
El resultado fue predecible: sitios con bundles de 400KB+ de JavaScript para mostrar un portfolio. El navegador descarga el JS, lo parsea, lo compila, lo ejecuta, y solo entonces renderiza el contenido. El usuario ve una pantalla en blanco mientras todo eso ocurre.
Lo que Core Web Vitals empezó a medir — y Google a rankear
En 2021, Google incorporó Core Web Vitals como señal de ranking. Las métricas que más impactan el score de Lighthouse son:
- LCP (Largest Contentful Paint) — tiempo hasta que el elemento más grande visible carga. Peso: 25% del score.
- TBT (Total Blocking Time) — tiempo total que el main thread estuvo bloqueado por JS, impidiendo responder a interacciones. Peso: 30% del score.
- CLS (Cumulative Layout Shift) — estabilidad visual durante la carga. Peso: 15%.
Un SPA construido con React o Vue sin Server-Side Rendering destruye TBT desde el inicio — todo el bundle JS bloquea el main thread en el first load. Y aunque puedas añadir SSR, sigues pagando el costo de hidratación del cliente para componentes que nunca van a necesitar estado reactivo.
La arquitectura de islas: Zero JS por defecto
La arquitectura de islas invierte el paradigma. En lugar de cargar un framework completo y decidir qué partes son estáticas, partes del mismo son dinámicas. Empiezas con HTML estático puro y agregas interactividad solo donde es necesaria — como islas en un mar de HTML.
Astro implementa esto de forma nativa. Por defecto, genera HTML estático en build time. No envía JavaScript al cliente a menos que explícitamente lo pidas con una directiva de hidratación:
client:load— hidrata inmediatamente al cargarclient:idle— hidrata cuando el main thread está libre (sin bloquear LCP)client:visible— hidrata cuando el componente entra en viewport
El resultado: el HTML llega al navegador ya renderizado. Sin hydration cost. Sin tiempo de espera. TBT en 0ms.
Vue como isla — el caso real de leonleroy.com
En leonleroy.com — portfolio de arquitectura con 13 fotografías de alta resolución por proyecto, tres idiomas (ES/EN/FR) y animaciones fluidas — necesitaba cero compromiso entre rendimiento visual y experiencia de usuario.
La estructura final:
- Astro (SSG) como motor. Todo el contenido estático — texto, navegación, páginas de proyectos, sección de about — generado en build time. Cero JS enviado al cliente para estas partes.
- Vue Hero Slider como isla con
client:idle. El carrusel de imágenes de alta resolución se hidrata solo cuando la red está libre — después de que el contenido crítico ya está visible. - Vue Mason Grid con
client:visible. La galería masonry se hidrata únicamente cuando el usuario hace scroll hasta ella. Si nunca llega, nunca se descarga el JS.
El resultado en Lighthouse mobile: 100/100 en Performance. LCP < 1s. TBT 0ms. CLS 0.
Sharp: el pipeline de imágenes que hace posible fotografía de alta resolución sin comprometer LCP
El LCP en un portfolio de arquitectura es casi siempre una fotografía — el elemento visual más grande de la página. Una RAW de 24MP sin procesar destruye cualquier score de Lighthouse por más que el framework sea perfecto.
Sharp en el pipeline de build de Astro procesa cada imagen automáticamente durante la compilación:
- Convierte RAW / JPEG a WebP y AVIF
- Genera múltiples tamaños para
srcsetsegún los breakpoints del diseño - Optimiza compresión por dimensión — no aplica la misma calidad a un thumbnail que al hero
El resultado: la fotografía del LCP que originalmente pesaba 3.8MB llega al navegador en menos de 80KB sin pérdida visual perceptible. El navegador descarga el tamaño exacto que necesita, ya en el formato más eficiente que soporta.
El criterio de decisión: cuándo usar este stack y cuándo no
Astro + Vue Islands es la solución correcta cuando:
- El sitio es mayoritariamente contenido estático (portfolio, corporate site, landing pages, blogs)
- La interactividad existe pero es puntual — sliders, modales, formularios, filtros
- El rendimiento afecta directamente el negocio — conversión, SEO, percepción de calidad
No es la solución correcta cuando:
- La aplicación requiere estado global compartido y actualización en tiempo real a lo largo de toda la UI (dashboards complejos, apps colaborativas en tiempo real)
- La mayoría de las rutas son autenticadas y el SEO no importa
Para esos casos, Next.js con App Router o Nuxt siguen siendo las opciones más maduras. La arquitectura correcta no es universal — es la que resuelve el problema específico del producto.
La conclusión que importa para el negocio
Un score de 100/100 en Lighthouse no es un logro técnico para mostrar en una demo. Es una señal medible de que el sitio está construido con criterio arquitectónico que tiene consecuencias directas:
- Ranking orgánico — Core Web Vitals son señal de ranking. Un sitio con TBT alto pierde posiciones frente a uno que no lo tiene.
- Conversión — cada 100ms de carga adicional tiene impacto medible en bounce rate. En B2B, donde el prospecto decide en segundos si vale la pena explorar, eso se traduce en leads perdidos.
- Percepción de calidad — un sitio que carga instantáneamente comunica capacidad técnica antes de que el usuario lea una sola línea de copy.
La performance no es una feature opcional. Es infraestructura.
Conversación