Performance eCommerce con Astro: INP y LCP en verde

El eCommerce exige velocidad: el LCP suele ser la imagen del producto y el INP se dispara con filtros y carritos. Astro te da base MPA rápida; el resto es priorización.

LCP: gana en la primera impresión

• Preload de imagen hero/producto principal.
• Imágenes responsivas (WebP/AVIF) y placeholders blur.
• Elimina CSS bloqueante; CSS crítico inline.
• CDN con Accept negotiation para formatos modernos.

INP: fluidez en interacción

• Divide tareas >50ms (defer trabajo no crítico).
• Evita renders masivos al filtrar; usa paginación/infinite scroll con umbrales.
• Mueve cálculos pesados (precio/envío) a Web Workers.
• Event listeners mínimos y diferidos.

Hidratación a demanda

• client:visible para componentes bajo el fold (reviews, mapas, recomendaciones).
• client:media para features solo móvil.
• Evita client:load salvo crítico.

Catálogo y PLP

• Server-side sorting para listas grandes.
• Cache por segmento (categoría, filtros comunes).
• Marcado de tamaño fijo para cards → menor CLS.

Medición y límites operativos

• Objetivos: LCP <2.5s, INP <200ms, CLS <0.1 en 75º percentil.
• Revisa RUM y laboratorio (Lighthouse + WebPageTest).
• Alertas cuando INP >250ms en filtros críticos.

Internos recomendados

• Fundamentos y checklist: Core Web Vitals 2025.
• Técnica de islas: Astro + React: hidratación a demanda.

Lecturas relacionadas

• Animaciones Nativas y Fluidas con Astro View Transitions
• SEO técnico en Astro
• Stack Tecnológico Ideal para Pymes