La regla de los 3 segundos del rendimiento web
Tienes tres segundos.
Después de eso, tus usuarios se van.
Las investigaciones de Google muestran que el 53% de los usuarios móviles abandonan un sitio si tarda más de 3 segundos en cargar.
Los sitios lentos te cuestan dinero. Mejorar los tiempos de carga en móviles en 0.1 segundos aumenta las conversiones minoristas en un 8.4%.
El rendimiento no es solo una métrica técnica. Es una métrica de negocio.
Para ganar, debes entender las Core Web Vitals:
• LCP (Largest Contentful Paint): Qué tan rápido ven los usuarios el contenido principal. El objetivo es menos de 2.5s. • INP (Interaction to Next Paint): Qué tan rápido reacciona la página a los clics. El objetivo es menos de 200ms. • CLS (Cumulative Layout Shift): Qué tan estable es la página. El objetivo es menos de 0.1.
Deja de adivinar y empieza a optimizar. Así es como puedes vencer al reloj:
Optimización de JavaScript • Envía menos código. Usa importaciones dinámicas para cargar código solo cuando sea necesario. • Usa tree-shaking. Cambia de CommonJS a módulos ES para eliminar el peso muerto. • Mueve el trabajo pesado a Web Workers. Mantén el hilo principal libre para la entrada del usuario. • Usa defer o async. Deja de permitir que los scripts bloqueen el análisis (parsing) de tu HTML.
CSS y Renderizado • Inline el CSS crítico. Carga primero solo lo que es visible en la parte superior (above the fold). • Evita el layout thrashing. Agrupa tus lecturas y escrituras para evitar recalculaciones constantes. • Anima con transform y opacity. Estos usan la GPU y evitan cambios de diseño (layout shifts). • Usa content-visibility: auto. Omite el renderizado del contenido que está fuera de la pantalla.
Estrategia de Imágenes • Usa formatos modernos. WebP y AVIF son mucho más pequeños que JPEG. • Establece los atributos width y height. Esto evita los cambios de diseño (CLS). • Aplica lazy-loading a las imágenes que están debajo del primer scroll. No apliques lazy-loading a tu imagen hero de LCP. • Usa srcset. Sirve imágenes más pequeñas a los usuarios móviles.
Red y Caché • Usa un CDN. Acerca tu contenido a tus usuarios para reducir la latencia. • Habilita la compresión. Usa Brotli o Zstandard para reducir el tamaño de los archivos. • Cachea agresivamente. Usa encabezados de caché inmutables para activos con hash. • Mantén funcionando el bfcache. Evita usar el evento unload para asegurar una navegación instantánea hacia atrás y hacia adelante.
El objetivo es simple: evitar el trabajo.
El código más rápido es el que tus usuarios nunca descargan. La solicitud más rápida es la que el navegador nunca tiene que realizar.
Fuente: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1