Diferir imágenes de fondo

Diferir imágenes de fondo.

Las imágenes de fondo rara vez son algo bueno para los Core Web Vitals. Las imágenes de fondo no son responsivas, no pueden acceder al atributo nativo loading y no podemos controlar de forma nativa la prioridad de las imágenes de fondo.

Las imágenes de fondo a menudo causan problemas con los Core Web Vitals. Diferir las imágenes de fondo no importantes mejorará en muchos casos tus Core Web Vitals.

Con demasiada frecuencia veo este antipatrón que incluye imágenes de fondo en sitios web. Especialmente en sitios WordPress que usan constructores de páginas como elementor.

1. Todas las imágenes, incluida la imagen LCP (la imagen hero) se cargan de forma diferida
2. Algunos elementos de imagen que no son realmente importantes (como un espaciador, un fondo de cuadro de búsqueda, etc.) están vinculados como imágenes de fondo en una hoja de estilos

En este breve artículo te mostraré cómo cargar de forma diferida estas imágenes de fondo para priorizar otras imágenes más importantes en la página.

¡Una advertencia!

Permíteme comenzar con una advertencia. Cuando el elemento LCP se retrasa por las imágenes de fondo, se han cometido errores y preferiblemente deberías corregirlos de la manera correcta (precargar la imagen LCP, no cargar de forma diferida la imagen LCP, evitar las imágenes de fondo por completo). Desafortunadamente, a veces hay demasiado código heredado y no tienes otra alternativa a corto plazo que parchear el sitio lo mejor que puedas. ¡Es entonces cuando puedes aplicar una solución como la que te presento aquí hoy!

Método 1: Diferir todo 

El método de diferir todo es una forma bastante bruta de hacer las cosas. Pero es fácil de implementar y funcionará bien para mejorar los Core Web Vitals.  Con este método todas las imágenes de fondo se difieren hasta que se dispare el evento DOMContentLoaded. Esto le dará al navegador un poco de tiempo extra para programar primero los recursos más importantes.

Estos son los pasos involucrados: primero vamos a anular la propiedad de estilo background-image para todos los elementos que tienen una imagen de fondo. Una vez que se haya cargado el contenido del DOM, vamos a eliminar esta anulación. Para ese momento, las imágenes que no son de fondo ya estarán en cola para descarga. Este sería un buen momento para poner en cola las imágenes de fondo menos importantes para su descarga.

El código

Primero crea un estilo y colócalo en el HEAD de la página. Es importante que este estilo tenga un id porque vamos a usar este id para eliminar esta etiqueta de estilo más tarde. Por supuesto, en lugar del comodín (*) también podrías agregar solo los nombres de clase CSS que realmente tienen una imagen de fondo.

<style id="no-bg-img">
    *{background-image:none!important}
</style>

A continuación, cuando se haya cargado el contenido del DOM, la imagen LCP probablemente ya estará en cola para descarga. En este punto es seguro poner en cola las imágenes de fondo. 

<script>
    window.addEventListener('DOMContentLoaded',function(){
        document.getElementById('no-bg-img').remove();
    })
</script>

Si el LCP no se activa para una descarga temprana, probablemente se deba a JavaScript. En ese caso, podrías intentar cambiar el 'DOMContentLoaded' por el evento 'load'.

Método 2: Carga diferida de imágenes de fondo

El método de carga diferida de imágenes de fondo es ligeramente más delicado, avanzado y requiere un toque más personal. 

Funciona de la siguiente manera: primero vamos a identificar manualmente todos los elementos con una imagen de fondo. Necesitamos agregar un nombre de clase a esos elementos (.lazybg). Luego observaremos estos elementos con el intersection observer y una vez que estén cerca del viewport visible, vamos a cargar de forma diferida la imagen de fondo.

El código

Primero crea un estilo y colócalo en el HEAD de la página. Este estilo es similar al estilo anterior, pero en lugar de eliminar la propiedad background-image para todos los elementos de la página, solo la vamos a eliminar para elementos con un nombre de clase específico.

<style>
    .lazybg {background-image: none !important}
</style>

A continuación, cuando se haya cargado el contenido del DOM, comenzaremos a observar los elementos que tienen una imagen de fondo. Cuando ese elemento entre en el viewport, eliminaremos la clase .lazybg para activar la descarga del fondo. 

<script>
window.addEventListener('DOMContentLoaded', (event) => {

  // todos los elementos con imágenes de fondo que deben cargarse de forma diferida 
  const lazyImages = document.querySelectorAll('.lazybg');
 
  // opciones para el observador
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

  // el observador
  const imageObserver = new IntersectionObserver((entries, imageObserver) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
             showImageBackground(entry.target);
             imageObserver.unobserve(entry.target);
         }
     });
  }, backgroundOptions);

    
  // observar cada imagen
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // mostrar imagen de fondo
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

La ventaja de este método es que las imágenes de fondo que no están en el viewport visible no se ponen en cola para descarga. Esto libera recursos para el navegador durante la etapa de carga.

Conclusión

Ambos métodos son efectivos para diferir la imagen de fondo en favor de imágenes más importantes como la imagen Largest Contentful Paint. El primer método es muy fácil de implementar y obtiene resultados rápidos. El segundo método agrega un comportamiento real de carga diferida a las imágenes de fondo y proporcionará una mayor mejora en la velocidad de la página. 

Ten cuidado al aplicar cualquiera de estos métodos. Si necesitas diferir imágenes de fondo, tu página es lo que me gusta llamar "lenta por diseño". Los métodos preferidos para solucionar esto serían reescribir tus páginas y evitar el uso de imágenes de fondo.