Lazy-loading y aceleración UX

1) Objetivos y principios

• Reducir TTI/LCP a través de una ruta crítica.
• Estabilizar el diseño (CLS bajo) con tamaños predecibles.
• Guardar la batería y el tráfico en el móvil.
• Elevar conversión: el usuario ve la acción antes.

Principios: prioridad → progreso → previsibilidad. Primero el contenido crítico, luego el llenado progresivo y la postcarga de mejoras.

2) Trayectoria crítica de renderizado

HTML crítico: emite "above-the-fold' marcando inmediatamente.
CSS crítico: en línea ≤ 10-15 KB; el resto es 'media =' print '+ swap/dosificación.
JS como bloqueador: 'defer '/' async', partición en chancas, carga la lógica a lo largo de las rutas.
Fuentes: 'font-display: swap' optional ', pre-inicio WOFF2, sistema fallback' y.

3) Priorización de recursos de red

Preconnect a CDN/Fuentes/Imágenes (TCP + TLS por adelantado).
DNS-prefetch para terceros dominios.
Preload de imágenes/fuentes/scripts críticos.
Priority Hints ('importance =' high 'low' ',' fetchpriority = 'high' para imagen hero).
HTTP/3/QUIC: menos latencia; CDN-edge está más cerca del usuario.
Políticas de caché: 'immutable' para assets versionados; ETag/Last-Modified correctos.

4) Renderizado progresivo y estados de arranque

Skeletons/Shimmers en lugar de spinners: progreso visual sin «saltos».
Placeholders de tamaño fijo (tarjetas, miniaturas) - CLS cero.
Streaming/Chunked HTML: regala rápidamente el marco, luego complementa el contenido.
IU optimística (precaución): acción instantánea seguida de validación.

5) Lazy-loading contenido mediático

Imágenes: 'loading =' lazy '', 'decoding =' async', formatos AVIF/WebP (follback JPEG/PNG).
Responsive: 'srcset '/' sizes' bajo diferentes DPR/anchos; no envíe 3 × donde haya suficiente 1 ×.
Altura predecible: 'width/height' o CSS 'aspect-ratio'.
Vídeo: 'preload =' metadata '', postcarga de carteles, autocaravana fuera del viewport.
Iconos: sprite/inline SVG; evitar solicitudes HTTP adicionales.

6) Componentes y rutas flojos

Code-splitting: importación dinámica a través de rutas/widgets.
Componentes-islas/hidratación parcial: revitalice sólo las zonas interactivas.
SSR/SSG + ISR: renderizar HTML en el servidor, refrescar de forma incremental.
Suspense/Defer (en el marco utilizado): descomposición de datos e UI.

7) Enormes listas y tablas

Virtualización (windowing): render sólo área visible + búfer.
Dosificación de anclaje: mantener la posición al cargar los paquetes.
Actualizaciones de Batch: Minimice los sobreescrituras con el skroll.
height Fixed-row o 'contain-intrinsic-size' para tamaños predecibles.

8) Aceleradores CSS y navegador

'content-visibility: auto': el navegador omite lo invisible (cálculos mínimos).
'contain '/' will-change': restringir el área de influencia de estilos/disposición.
Animaciones: sólo transformación/opacity; evitar los efectos layout/paint-heavy.
Shadow y blur son económicos, especialmente en las listas.

9) Gestión de eventos y carga JS

Oyentes pasivos de scroll/tacha ('{passive: true}').
Debounce/throttle en resize/scroll/manejadores.
Inicialización diferida de widgets fuera del visor (IntersectionObserver).
Transfiera computación pesada a Web Workers.

10) Contexto móvil

Red: 3G lento/RTT alto - carga más agresiva perezosa.
Batería y calor: limitar la frecuencia de los temporizadores, reducir el FPS de las animaciones de fondo.
Compresión: Brotli para texto, correcto 'Accept-Encoding'.
Prefetch por Wi-Fi sólo para transiciones probables (historial de clics).

11) Disponibilidad y SEO

Esqueleto ≠ contenido: no interfiere con los lectores de pantalla; orden lógico de enfoque.
HTML servidor de texto clave: no esconda todo detrás de JS.
Los textos alt y los títulos permanecen disponibles hasta la dosificación.
El contenido lazy no debe bloquear rutas del teclado.

12) Métricas y valores de destino

LCP (hero-imagen/título): ≤ 2,5 s (móvil).
INP (respuesta de entrada): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms; TTI: ≤ 3 con.
Bytes over the wire (first view): presupuesto estricto (por ejemplo, ≤ 200-300 KB de creta. recursos).
Scroll-jank: <1% de fotogramas> 16,7 ms.

• 'lazy _ enqueued '/' lazy _ loaded' (id, vista, tamaño, latency),
• 'component _ hydrated' (tiempo, peso JS),
• `virtualized_window_resize`,
• `lcp_candidate_shown`, `skeleton_time_visible`,
• errores ('img _ error', 'decode _ timeout').

13) Patrones para zonas típicas

Inicio/catálogo: tarjetas SSR + skeleton, imágenes lazy, filtros progresivos.
Tarjeta del producto/juego: héroe-imagen preload + alta prioridad; galería - lazy; Comentarios - por clic.
Artículos largos/wiki: TAC, progreso de lectura, lazy para bloques de medios/código, tabla de contenido diferido.
Cintas en vivo: virtualización de cadenas, "pausa auto-skroll', límite de búfer.

14) Antipattern

Spinner en toda la pantalla> 1-2 s sin progreso.
Lazy sin localizadores → salto de diseño (CLS ↑).
Descarga «todo JS a la vez» en aras de escenarios raros.
Insertar fuentes/imágenes pesadas en la parte crítica.
Las dimensiones impredecibles de las tarjetas → contenido «errante».
Carga perezosa de crítica (logo, texto hero): rompe el LCP.
No hay retorno de posición después de «atrás».

15) Lista de verificación de implementación (paso a paso)

Sprint 1 - Diagnóstico: medir LCP/INP/CLS/TTFB; haga un mapa de los recursos y de la ruta crítica.
Sprint 2 - Crítica/prioridad: CSS/HTML crítico, 'preconnect '/' preload', reducir las chancas JS.
Sprint 3 - Media: AVIF/WebP, 'srcset/sizes', dimensiones fijas, lazy para no hero.
Sprint 4 - Listas: virtualización, carga de anclaje, skeletons/shimmer.
Sprint 5 - Arquitectura: Hidrogenación parcial/islas, SSR/SSG/ISR, streaming.
Sprint 6 - Ajuste sutil: 'content-visibility', priority hints, debounce, Web Workers.
Sprint 7 - A/B y telemetría: comparar opciones de esqueletos, niveles de lazy, presupuestos.
Sprint 8 - Higiene de lanzamientos: versiones de assets, cash basting, rollback strategies.

16) Glosario (breve)

Lazy-loading es una descarga diferida de contenido invisible.
LCP/INP/CLS/TTFB/TTI/TBT son las principales métricas de velocidad UX.
Code-splitting/Hidratación/Islas - Técnicas de trituración y revitalización de IU.
Virtualización: renderizado de la ventana de lista visible.
Priority Hints/Preconnect/Preload: indica al navegador qué enviar antes.
Content-visibility: permite omitir cálculos para contenido invisible.

17) Resultado

Lazy-loading no es «poner 'loading =' lazy '' y listo». Se trata de un sistema: vía crítica, formatos de medios correctos, interactividad insular, virtualización y telemetría. Haga que lo importante sea instantáneo, lo secundario sea imperceptible y barato, y que el diseño sea predecible. Entonces el producto se sentirá rápido en cualquier dispositivo y en cualquier red.