Rubi Store
El reto principal
Una landing de este tipo se juega todo en los primeros dos segundos: si la primera imagen tarda, el visitante ya se fue. El reto no era técnico en el sentido tradicional, era de presupuesto — cuánto JavaScript y cuántos kilobytes de imagen puede permitirse una página cuyo único trabajo es convencer.
Las fotos de galería son el peso muerto de cualquier sitio de este tipo. Pasarlas a WebP, servirlas con srcset por tamaño y marcar todas menos la primera con loading="lazy" recortó la carga inicial a una fracción. La imagen de portada es la excepción: esa va con fetchpriority="high" porque es la que mide el LCP.
Qué aprendí
Astro sin islas es solo HTML y CSS, y para una landing eso casi siempre es lo correcto. Añadir un framework aquí habría costado rendimiento sin comprar nada.
- La imagen de portada nunca va con
lazy: es justo la que el navegador debe pedir primero - SCSS con parciales por sección mantiene el CSS legible sin build tooling extra
- Una demo comercial es un argumento de venta: tiene que verse rápida, no solo ser rápida
- Astro
- SCSS
- HTML