Cómo Usar Lazy-Load En Imágenes En Drupal
Mejora el rendimiento de tu web cargando solo unas pocas imágenes a la vez
Cuando se trata de posicionar un sitio web, mejorar la velocidad de la web es cada vez más importante. Pero para ciertas webs puede que no sea tan fácil, podría deberse a que necesita mostrar anuncios, muchos scripts (por ejemplo, para el tracking) u otros factores.
Una cosa que hago en la mayoría de las webs que me piden que mejore es implementar lazy-loading en las imágenes. Ésto significa que, en lugar de cargar todas las imágenes en la página, solo cargará las que se vuelven visibles a medida que se hace scroll. Al hacer esto, es probable que veas un gran aumento en la puntuación del informe Lighthouse.
Usando template_preprocess_image (reemplazando mytheme con el nombre de su tema) es cómo puedes implementar esto fácilmente en tu web:
/**
* Implementa template_preprocess_image.
*
* @param array $variables
*/
function mytheme_preprocess_image(&$variables) {
// Añadir lazy loading en todas las imágenes.
$variables['attributes']['loading'] = 'lazy';
// Añadir width y height.
$variables['attributes']['width'] = $variables['width'];
$variables['attributes']['height'] = $variables['height'];
}Es importante mencionar que para que esto funcione, deberás agregar atributos de ancho y alto a las imágenes. Drupal no los agrega por defecto.
Esto ahora está implementado en D9 de forma predeterminada (https://www.drupal.org/node/3173719), por lo que no lo necesitarás en webs nuevas, pero si, como yo, aún debes mantener sitios antiguos en Drupal 7 y 8 así es como puedes hacer que todas las imágenes se carguen de forma diferida.
La mayoría de los navegadores modernos lo aceptan como puedes ver aquí: https://caniuse.com/loading-lazy-attr
👉 Encuentra más sobre mí aquí: https://sergioguardiola.net 🔥
