Performance Percibida

Cuando la carga tarda más de 1 segundo, un skeleton screen mantiene la percepción de progreso mejor que un spinner. El skeleton reserva el espacio de la UI real, eliminando el salto de layout cuando el contenido llega.

Los skeletons tienen sentido en tarjetas, listas y feeds. En botones, inputs, labels o modales resultan distrayentes y confusos. Usar spinner puntual o simplemente deshabilitar el elemento mientras carga.

En acciones que raramente fallan (dar like, marcar como leido, reordenar), aplicar el cambio visualmente antes de que el servidor responda. Si falla, revertir con una notificación discreta. Elimina la latencia percibida en el flujo principal del usuario.

El Cumulative Layout Shift (CLS) penaliza la experiencia y el SEO. Siempre definir width y height en el HTML de la imagen, y reforzar con aspect-ratio en CSS para que el browser reserve el espacio antes de la descarga. Sin estas propiedades el contenido debajo de la imagen salta hacia abajo cuando el recurso termina de cargar, generando un CLS alto que degrada tanto la percepción del usuario como el ranking en Core Web Vitals.

El Largest Contentful Paint (LCP) debe estar bajo 2.5s. Cargar con fetchpriority="high" la imagen hero. Diferir con loading="lazy" todo lo que queda fuera del viewport inicial. Aplicar font-display: swap para evitar FOIT. Sin prioridad explicita, el browser descarga recursos en orden arbitrario: hero, sidebar ads, chat widget y analytics compiten por ancho de banda, retrasando el contenido que el usuario realmente ve. Con prioridad explicita, el hero llega primero y todo lo secundario se carga después o bajo demanda.

El usuario tarda entre 200 y 300ms entre el hover y el click. Usar ese tiempo para precargar la siguiente página o recurso con <link rel="prefetch"> inyectado en el mouseenter. Cuando el click ocurre, los recursos ya están en cache y la página se muestra sin delay visible. El impacto es especialmente notorio en rutas de producto, checkout y navegación principal.

Interaction to Next Paint (INP) mide el tiempo entre la interacción del usuario y el proximo frame pintado. Objetivo: <200ms (bueno), 200-500ms (mejora necesaria), >500ms (mala experiencia). Causas típicas: handlers sincronicos pesados, DOM updates excesivos, JavaScript bloqueante en el main thread. Diferir trabajo pesado con scheduler.yield(), requestIdleCallback o setTimeout(0) para que el browser pinte el feedback visual antes de ejecutar la lógica costosa.

El atributo loading="lazy" es nativo en todos los browsers modernos. Aplicarlo a cualquier imagen que no sea visible en el viewport inicial. No necesita JavaScript ni librerias. Combinado con fetchpriority="high" en el hero, reduce el peso inicial de la página significativamente. Sin lazy loading, el browser descarga todas las imagenes al inicio aunque el usuario solo vea las primeras 2-3. Con lazy loading nativo, las imagenes below-the-fold se solicitan al acercarse al viewport, reduciendo el peso inicial hasta un 80% en páginas con galerias o listados.