Optimiza la experiencia de usuario y el rendimiento Web Performance Optimization (WPO) ajustando el rootMargin dinámico.
El umbral de intersección vertical recomendado para evitar que el usuario vea la imagen cargándose a mitad de scroll es:
Tiempo estimado de descarga de la imagen: 0.35s.
Implementación recomendada en tu IntersectionObserver:
Cuando implementamos la carga diferida (lazy loading) en nuestro sitio web, solemos cometer el error de dejar los valores por defecto del navegador o usar un umbral fijo muy pequeño (como 100px o 200px). En redes móviles lentas o cuando un usuario realiza un scroll rápido, esto provoca el molesto efecto de "parpadeo" o cajas vacías que tardan segundos en mostrar la imagen.
Nosotros, desde el equipo editorial de Utilidades.io, hemos desarrollado esta herramienta para ayudarte a encontrar el equilibrio perfecto. Con ella, puedes calcular el margen de intersección (rootMargin) ideal basándote en dos factores críticos del rendimiento:
Al aplicar un rootMargin adaptado u optimizado, mejoras notablemente métricas clave de Google Core Web Vitals, como el Largest Contentful Paint (LCP) y la estabilidad visual general de la página.
El umbral de lazy loading es la distancia en píxeles antes de que un elemento (como una imagen) entre en la pantalla en la que el navegador empieza a cargarlo. Se define con la propiedad rootMargin.
Si el umbral es muy pequeño en redes lentas, el usuario verá espacios en blanco mientras hace scroll. Si es muy grande en redes rápidas, se descargarán recursos innecesarios, afectando el rendimiento de la web (WPO).
Puedes aplicarlo al configurar el IntersectionObserver en JavaScript, pasando el valor obtenido (por ejemplo, '400px 0px') en las opciones como rootMargin: '400px 0px 400px 0px'.