Diferir imágenes de fondo para Core Web Vitals más rápidos

Diferir imágenes de fondo

Las imágenes de fondo rara vez son buenas 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 causarán problemas con los Core Web Vitals. Diferir las imágenes de fondo sin importancia mejorará en muchos casos tu Largest Contentful Paint.

Última revisión por Arjen Karel en febrero 2026

Según el capítulo de Rendimiento del Web Almanac de 2024 (la edición más reciente con datos sobre tipos de elementos LCP), el 9% de las páginas móviles tienen una imagen de fondo CSS como su elemento LCP. De ellas, solo el 2% la precargan (preload). Eso significa que aproximadamente en 1 de cada 11 sitios web, la imagen más importante de la página es invisible para el escáner de precarga (preload scanner) del navegador y comienza a cargarse tarde.

En los sitios monitoreados por CoreDash, las páginas donde el elemento LCP es una etiqueta <img> normal tienen un LCP p75 que es aproximadamente 620 ms más rápido que las páginas donde el LCP es una imagen de fondo CSS. La diferencia proviene casi por completo del retraso de carga de recursos (resource load delay): el navegador descubre una <img> inmediatamente a través del escáner de precarga, pero una imagen de fondo tiene que esperar hasta que el CSS sea descargado y analizado.

Muy a menudo veo este anti-patrón que incluye imágenes de fondo en los sitios web. Especialmente en sitios web de WordPress que utilizan constructores de páginas (page builders) como Elementor.

1. Todas las imágenes, incluyendo la imagen LCP (la hero image) se cargan con lazy load
2. Algunos elementos de imagen que no son realmente importantes (como un espaciador, un fondo de caja de búsqueda, etc.) están enlazados como imágenes de fondo en una hoja de estilos (stylesheet)

En este breve artículo te mostraré cómo aplicar lazy load a estas imágenes de fondo con el fin de 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 imágenes de fondo se han cometido errores y preferiblemente deberías solucionarlos de la manera correcta (precargar la imagen LCP, no aplicar lazy load a la imagen LCP, evitar las imágenes de fondo por completo). Desafortunadamente, a veces hay demasiado legado (legacy) y no tienes otra alternativa a corto plazo que parchear el sitio lo mejor que puedas. ¡Ahí es 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 simplemente una forma bárbara 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 ha disparado el evento DOMContentLoaded. Esto le dará al navegador un poco de tiempo extra para programar los recursos más importantes primero.

Estos son los pasos involucrados: primero vamos a anular (overrule) la propiedad de estilo background-image para todos los elementos que tienen una imagen de fondo. Una vez que el contenido del DOM haya sido cargado, vamos a eliminar esta anulación de nuevo. Para entonces, las imágenes que no son de fondo estarán en cola para su descarga. Este sería un gran momento para entonces encolar 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 adelante. Por supuesto, en lugar del comodín (*), también podrías agregar únicamente los nombres de clase CSS que realmente tienen una imagen de fondo.

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

Luego, cuando el contenido del DOM haya sido cargado, la imagen LCP probablemente ya estará en cola para su descarga. En este punto es seguro encolar las imágenes de fondo.

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

Si el LCP no se dispara para una descarga temprana, esto se debe probablemente al JavaScript. En ese caso, podrías intentar cambiar el 'DOMContentLoaded' por el evento 'load'.

En pruebas realizadas por DebugBear, la precarga de un elemento LCP de imagen de fondo redujo el LCP de 3.4 segundos a 1.7 segundos. El retraso de carga de recursos cayó del 75% del tiempo total del LCP a solo un 2%.

Método 2: Aplicar lazy load a imágenes de fondo

El método de aplicar lazy load a las imágenes de fondo es un poco más suave, avanzado y requiere más de un toque 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 IntersectionObserver y una vez que estén cerca del viewport visible, vamos a cargar de forma diferida (lazy load) la imagen de fondo.

El código

Primero crea un estilo y colócalo en el HEAD de la página. Este estilo se ve similar al estilo anterior pero en lugar de eliminar la propiedad de imagen de fondo para todos los elementos de la página, solo la eliminaremos para los elementos con un cierto nombre de clase.

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

Luego, cuando el contenido del DOM haya sido cargado, comenzaremos a observar los elementos que tienen una imagen de fondo. Cuando ese elemento se desplace (scroll) dentro del viewport, eliminaremos la clase .lazybg para desencadenar una descarga en segundo plano.

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

  // all elements with background images that should be lazy loaded
  const lazyImages = document.querySelectorAll('.lazybg');

  // options for the observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

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


  // observe each image
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // show background image
  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 su descarga. Esto libera recursos para el navegador durante la etapa de carga. Para más técnicas como esta, consulta cómo diferir las imágenes fuera de pantalla (offscreen images).

Conclusión

Ambos métodos son efectivos para diferir la imagen de fondo a favor de imágenes más importantes como la imagen de Largest Contentful Paint. El primer método es muy fácil de implementar y obtiene resultados rápidos. El segundo método agrega un verdadero comportamiento de lazy load a las imágenes de fondo y proporcionará un mayor impulso al PageSpeed.

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 (slow by design)'. El método preferido para solucionar esto sería reescribir tus páginas y evitar el uso de imágenes de fondo.