La carga diferida, o lazy loading, es una práctica muy popular de entregar páginas más rápidas a los usuarios, que consiste en que solo se cargarán en el navegador aquellas imágenes que estén a la vista en al pantalla del usuario, cargándose el resto a medida que el usuario sigue navegando por la página.

Aunque WordPress incluye esta funcionalidad, hay plugins, algunos tan populares como WP Rocket, que mejoran sus prestaciones y permiten configurar multitud de aspectos de la carga diferida.

El plugin dispone de una pantalla de ajustes en la que puedes especificar a qué tipo de medio quieres aplicar y a qué no, además de poder definir exclusiones y más mejoras.

Ahora bien, como toda aplicación de software tiene ajustes predefinidos, opciones por defecto, y una de ellas es el umbral, el tamaño al que se aplicará la técnica de lazy load, que es de 300 píxeles.

Esto significa que WP Rocket lanzará el lazy load cada 300 píxeles, da igual cuántas imágenes haya en ese tamaño o de qué tamaño sean. Esto puede funcionar muy bien para algún tipo de diseño pero realmente mal en otros casos.

Imagina, por ejemplo, que en una página tienes un carrusel de imágenes de solo 100 píxeles de ancho, pues con el ajuste por defecto, hasta que el usuario no navegue, no se desplace hasta el umbral de los 300 píxeles, no empezarán a mostrarse esas imágenes.

Esto daría una muy mala impresión de la carga de la página, pues durante un rato, esos píxeles de sobra, se mostraría la zona en blanco, como si tardase en cargar o estuviese rota, y cuando cargasen las imágenes finalmente daría la sensación de que va lenta, que los recursos cargan tarde o lentos.

La manera de solucionarlo podría ser cambiar el umbral de lazy load por defecto de WP Rocket a algo que se adapte mejor al diseño (general) de tu web ¿no crees?

De este modo, en cuando el usuario se desplace 100 píxeles, por ejemplo, ya empezarán a mostrarse las siguientes imágenes, mostrando una experiencia de navegación más dinámica, sin esperas, con sensación de mayor rapidez de carga.

Pues bien, si quieres cambiar el umbral de carga diferida por defecto de WP Rocket, solo tienes que añadir esta función, usando el método que prefieras:

/* Umbral lazy load wp rocket personalizado */º
function rocket_lazyload_custom_threshold( $threshold ) {
return 100;
}
add_filter( 'rocket_lazyload_threshold', 'rocket_lazyload_custom_threshold' );

En esta función hemos cambiado el umbral por defecto de lazy load de WP Rocket, de 300 a 100 píxeles (return 100), aplicando la lógica que te he explicado antes.

Lo ideal es que experimentes con distintos umbrales, hasta dar con el que mejor encaje en el diseño general de tu web, ofreciendo una experiencia más consistente de carga de los medios.