La velocidad de carga de una página no depende solo de la compresión de imágenes y la caché. A veces, todas las etiquetas <img> de un sitio ya se cargan de forma diferida con loading="lazy", pero PageSpeed Insights sigue quejándose de las imágenes de fondo en las secciones de Elementor. Esto ocurre porque background-image en CSS no admite carga diferida de forma nativa; el navegador descarga fielmente cada imagen de fondo al analizar los estilos, incluso si la sección está muy por debajo del pliegue.

Esto perjudica especialmente a las páginas de aterrizaje largas: la primera pantalla podría renderizarse en 1,2 segundos, pero tarda 4 segundos porque el navegador descarga 8 imágenes de fondo del pie de página que el usuario no verá hasta dentro de un minuto. Existe una solución y, en los últimos años, han surgido opciones para cualquier nivel, desde «marcar una casilla» hasta usar JavaScript personalizado.

💡 Resumen rápido:

• Active la carga diferida de fondos integrada en los ajustes de Elementor.
• Configure la API IntersectionObserver para fondos CSS personalizados y versiones antiguas del plugin.
• Aplique jQuery con atributos de datos para sitios donde este framework ya esté en uso.

Carga diferida integrada en Elementor

Desde la versión 3.9, Elementor añadió una función experimental llamada Lazy Load Background Images y, a partir de la versión 3.15+, se estabilizó y se activa por defecto en las nuevas instalaciones. Internamente, utiliza la misma API IntersectionObserver que las soluciones nativas del navegador, pero envuelta en un práctico interruptor.

Cómo activarla: vaya a Elementor → Ajustes → Funciones (o Ajustes → Experimentos en la interfaz en español), busque la fila Lazy Load Background Images y cambie el interruptor a Activo. Guarde los cambios y todas las imágenes de fondo de secciones, contenedores y columnas establecidas a través de la interfaz estándar de Elementor empezarán a cargarse solo cuando el usuario se desplace hasta ellas.

Lo que este método NO cubre: fondos personalizados escritos manualmente en la pestaña CSS de Elementor (selector { background-image: url(...); }), y fondos añadidos mediante plugins de widgets de terceros. Para esos casos, use los métodos siguientes.

Ventajas: cero código, mantenido por el equipo de Elementor, compatible automáticamente con plugins de caché. Inconvenientes: solo para fondos estándar de Elementor, requiere la versión 3.9+.

Aparte, merece la pena mencionar el formato de la imagen de fondo. Google PageSpeed Insights penaliza los fondos en JPEG cuando hay WebP o AVIF disponibles, y esta penalización es independiente del método que haya usado para diferir la carga. Convierta todas las imágenes de fondo a WebP (la pérdida de calidad es invisible al ojo y el tamaño del archivo es un 25-35% menor que JPEG) o AVIF (un 50% menor que JPEG, pero requiere un <picture> de respaldo para Safari anterior a 16.0). Plugins como Converter for Media o Imagify hacen esto automáticamente al subir archivos a la biblioteca de medios, incluidos los fondos subidos a través de la interfaz de Elementor.

IntersectionObserver: JavaScript moderno sin jQuery

Si su versión de Elementor es inferior a 3.9, los fondos se establecen con CSS personalizado o simplemente desea un control total, la API IntersectionObserver resuelve la tarea de forma limpia sin la sobrecarga de los eventos de desplazamiento.

¿Por qué no un manejador de scroll? El evento scroll se dispara decenas de veces por segundo y realiza cálculos de posición de los elementos en el hilo principal en cada instante. Incluso con throttle, esto se nota en dispositivos poco potentes. IntersectionObserver funciona de forma asíncrona en el hilo del compositor del navegador, simplemente informa cuando un elemento ha cruzado el umbral de visibilidad, sin cálculos constantes.

Paso 1. Marcado y CSS. Añada la clase CSS lazy-bg-section a las secciones que necesiten carga diferida:

1
.lazy-bg-section {
2
  background-color: #f0f0f0; /* placeholder until background loads */
3
  background-repeat: no-repeat;
4
  background-position: center;
5
  background-size: cover;
6
}
7
 
8
.lazy-bg-section.loaded {
9
  background-color: transparent;
10
}

El color de fondo #f0f0f0 actúa como un marcador de posición visual, la sección no parece vacía mientras el usuario se desplaza. La clase .loaded se añadirá desde JavaScript cuando la sección entre en la ventana gráfica.

Paso 2. JavaScript, inicialización del Observer. Coloque el código en el archivo de script de su tema o a través de un plugin como Code Snippets:

1
document.addEventListener('DOMContentLoaded', () => {
2
  const sections = document.querySelectorAll('.lazy-bg-section');
3
 
4
  if (!sections.length || !('IntersectionObserver' in window)) return;
5
 
6
  const observer = new IntersectionObserver(
7
    (entries) => {
8
      entries.forEach((entry) => {
9
        if (entry.isIntersecting) {
10
          const bgUrl = entry.target.dataset.bg;
11
          if (bgUrl) {
12
            entry.target.style.backgroundImage = `url(${bgUrl})`;
13
          }
14
          entry.target.classList.add('loaded');
15
          observer.unobserve(entry.target);
16
        }
17
      });
18
    },
19
    { rootMargin: '200px 0px' }
20
  );
21
 
22
  sections.forEach((section) => observer.observe(section));
23
});

Detalle clave: rootMargin: '200px 0px' significa que el Observer se activa 200 píxeles antes de que la sección aparezca realmente en pantalla. El usuario no ve el momento de carga, la imagen ya está en su sitio.

Paso 3. Marcado en Elementor. Abra la sección deseada → pestaña Avanzado → campo Clases CSS, introduzca lazy-bg-section. En el mismo lugar, en Atributos personalizados, añada un atributo data-bg con el valor de la URL completa de la imagen de fondo.

Este enfoque funciona en cualquier navegador moderno (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), es decir, en todos desde 2016. Para Internet Explorer, necesitará un polyfill, pero estos proyectos son ya poco frecuentes.

JQuery y atributos de datos: el enfoque clásico

En sitios realmente antiguos donde jQuery ya está cargado en cada página y no es posible reescribir la pila tecnológica, funciona un método con atributos de datos y un manejador de desplazamiento. Es menos eficiente que IntersectionObserver, pero está probado durante años y no requiere APIs modernas del navegador.

Paso 1. Clase de la sección. En los ajustes de la sección de Elementor, pestaña Avanzado → Clases CSS, especifique lazy-background:

Paso 2. Estilos CSS para el fondo. Para que la imagen de fondo se estire correctamente por toda la sección tras la carga, establezca los estilos. En Elementor, esto se hace a través de la pestaña Avanzado → CSS personalizado de la sección específica:

Estilos básicos para un fondo de pantalla completa:

1
#OO2 .lazy-bg {
2
  background-repeat: no-repeat;
3
  background-position: center;
4
  background-size: cover;
5
  position: absolute;
6
  top: 0;
7
  right: 0;
8
  bottom: 0;
9
  left: 0;
10
  z-index: -1;
11
  background-attachment: fixed;
12
}

Observe el selector #OO2, este es el identificador CSS de la sección que usted establece en la misma pestaña Avanzado → ID CSS. Para cada sección con su propio fondo, el identificador debe ser único para que los estilos no se solapen.

Opción para imágenes pequeñas (no de sección completa). Si necesita colocar una imagen pequeña en la sección en lugar de un fondo de pantalla completa, por ejemplo un logotipo o un elemento decorativo en el pie de página, ajuste los estilos para el tamaño y la posición específicos:

1
section#SDStudio-Footer .lazy-bg {
2
  background-repeat: no-repeat;
3
  background-position: right bottom;
4
  background-size: 350px;
5
  position: absolute;
6
  top: 0;
7
  right: 0;
8
  bottom: 0;
9
  left: 0;
10
  z-index: 0;
11
  background-attachment: fixed;
12
}
13
 
14
section#SDStudio-Footer .elementor-column.elementor-col-25,
15
.elementor-column[data-col="25"] {
16
  width: 25%;
17
  z-index: 2;
18
}

Aquí el fondo se posiciona en la esquina inferior derecha de la sección del pie de página con un ancho fijo de 350px, y a las columnas se les da z-index: 2 para que el contenido no quede cubierto por la capa de fondo.

Paso 3. Imágenes adaptables. Para evitar cargar una imagen de 2 megabytes en una pantalla móvil de 400px de ancho, prepare 6 variantes de imagen para diferentes resoluciones:

Paso 4. Atributos de datos. Suba las imágenes a la biblioteca de medios de WordPress y especifique las rutas a ellas en los atributos de datos de la sección. En Elementor: Avanzado → Atributos personalizados:

Formato para cada atributo:

1
data-bg-min-1701 | /wp-content/uploads/2020/03/Background-min-width-1701px.jpg
2
data-bg-max-1700 | /wp-content/uploads/2020/03/Background-max-width-1700px.jpg
3
data-bg-max-1200 | /wp-content/uploads/2020/03/Background-max-width-1200px.jpg
4
data-bg-max-1024 | /wp-content/uploads/2020/03/Background-max-width-1024px.jpg
5
data-bg-max-768  | /wp-content/uploads/2020/03/Background-max-width-768px.jpg
6
data-bg-max-400  | /wp-content/uploads/2020/03/Background-max-width-400px.jpg

El script (ver más abajo) lee estos atributos, determina el ancho de pantalla actual mediante window.matchMedia e inserta la URL del tamaño necesario.

Paso 5. Script jQuery. Añada el código al archivo de script de su tema o a través de un plugin:

1
jQuery(document).ready(function ($) {
2
  var $window = $(window),
3
    lazyBgArr = [];
4
 
5
  $window.on('load resize scroll', function () {
6
    for (var i = 0; i < lazyBgArr.length; i++) {
7
      var func = lazyBgArr[i];
8
      if (func !== undefined) {
9
        func();
10
      }
11
    }
12
  });
13
 
14
  function lazyBg(strEl, intPos) {
15
    return function () {
16
      var intCheckVal = $window.scrollTop() + $window.height() + 100;
17
      if (intCheckVal > strEl.offset().top) {
18
        var data_bg;
19
 
20
        if (window.matchMedia('(min-width: 1701px)').matches) {
21
          data_bg = 'data-bg-min-1701';
22
        } else if (
23
          window.matchMedia('(min-width: 1201px) and (max-width: 1700px)').matches
24
        ) {
25
          data_bg = 'data-bg-max-1700';
26
        } else if (
27
          window.matchMedia('(min-width: 1025px) and (max-width: 1200px)').matches
28
        ) {
29
          data_bg = 'data-bg-max-1200';
30
        } else if (
31
          window.matchMedia('(min-width: 769px) and (max-width: 1024px)').matches
32
        ) {
33
          data_bg = 'data-bg-max-1024';
34
        } else if (
35
          window.matchMedia('(min-width: 401px) and (max-width: 768px)').matches
36
        ) {
37
          data_bg = 'data-bg-max-768';
38
        } else if (window.matchMedia('(max-width: 400px)').matches) {
39
          data_bg = 'data-bg-max-400';
40
        }
41
 
42
        if (!data_bg) return;
43
 
44
        var tmpImg = new Image(),
45
          strSrc = strEl.attr(data_bg);
46
        tmpImg.src = strSrc;
47
        delete lazyBgArr[intPos];
48
 
49
        $(tmpImg).on('load', function () {
50
          strEl.append('<div class="lazy-bg"></div>').css('opacity', 1);
51
          strEl.addClass('loaded');
52
        });
53
      }
54
    };
55
  }
56
 
57
  $('.lazy-background').each(function (i) {
58
    lazyBgArr.push(lazyBg($(this), i));
59
  });
60
});

Cómo funciona: al cargar la página y en cada evento de desplazamiento, el script comprueba la posición de cada sección con la clase .lazy-background. Si la sección entra en la zona de «pantalla + 100px de margen», se determina el ancho actual de la ventana gráfica mediante matchMedia, se selecciona el atributo de datos necesario, se crea un objeto Image temporal para la precarga y, tras una carga exitosa, se añade a la sección un <div class="lazy-bg"> con la imagen de fondo. La sección procesada se elimina del array de observación, no hay cargas repetidas.

Qué método elegir: comparativa

El criterio práctico de selección es simple: si su Elementor es la versión 3.9 o superior y los fondos están configurados de forma estándar, active la función integrada y cierre el asunto. Si los fondos son personalizados (pestaña CSS, widgets de terceros), use IntersectionObserver con JavaScript vainilla, sin jQuery. Deje el método jQuery para proyectos donde jQuery ya está presente y no hay presupuesto para reescribir, o donde se necesita compatibilidad con Internet Explorer.

Independientemente del método elegido, la imagen de fondo sigue siendo físicamente el mismo archivo en el servidor. Si pesa 800 kilobytes, la carga diferida no la hará más ligera, solo pospondrá el momento en que el navegador empiece a descargar esos 800 kilobytes. Por eso la regla de «primero optimice, luego difiera la carga» también se aplica aquí: primero comprima a WebP o AVIF y redimensione al ancho máximo de pantalla de su público objetivo, y solo después aplique cualquiera de los tres métodos de carga diferida. Los plugins de caché (WP Rocket, LiteSpeed Cache, Flying Press) no entran en conflicto con ninguno de los tres enfoques, ya que un fondo cargado mediante background-image de CSS es cacheado por el navegador igual que un <img> normal.

⁉️🤔 Preguntas frecuentes

¿Por qué no usar simplemente loading="lazy" para las imágenes de fondo?

El atributo loading="lazy" solo funciona con las etiquetas <img> e <iframe>, pero no con la propiedad CSS background-image. El navegador no sabe que su CSS contiene una URL de imagen que podría diferirse hasta que analiza la hoja de estilos, y para entonces la solicitud ya ha salido a la red. Precisamente por eso los fondos necesitan un mecanismo independiente.

¿Qué método debo elegir si el sitio tiene 3 años y Elementor es la versión 3.12?

La carga diferida integrada de Elementor. La versión 3.12 ya incluye esta función en estado estable, solo tiene que ir a Ajustes, Funciones y activarla. No necesita escribir código.

¿El método jQuery ralentiza significativamente en móviles?

En dispositivos Android económicos de 2019-2020, de forma notable. El evento scroll combinado con offset().top golpea el hilo principal en cada fotograma del desplazamiento. Si la audiencia del sitio es predominantemente móvil, cambie a IntersectionObserver o actualice Elementor a 3.9+ y active la función integrada.

¿Puedo combinar enfoques en un mismo sitio?

Sí, y es una práctica normal. La mayoría de las secciones de fondo configuradas a través de la interfaz estándar de Elementor son gestionadas por la carga diferida integrada. Las secciones personalizadas restantes con CSS manual las conecta a IntersectionObserver. No hay conflicto: el Observer solo se activa en los elementos con la clase especificada, y el mecanismo integrado de Elementor los ignora.

¿Es obligatorio preparar 6 tamaños de imagen o basta con uno?

Seis tamaños es el máximo para un detalle significativo. En la práctica, para la mayoría de los sitios, tres son suficientes: 1920px para escritorio, 1024px para tableta y 768px para móvil. Cuatro puntos de ruptura, añadiendo 400px para pantallas pequeñas, ya es un buen equilibrio entre calidad y esfuerzo. Una sola imagen para todas las resoluciones funciona, pero carga kilobytes extra en móviles, Google PageSpeed Insights lo notará.

¿Vale la pena molestarse con código personalizado en 2026?

Si tiene Elementor 3.9 o superior, casi seguro que no. La función integrada cubre las necesidades de la gran mayoría de los sitios: actívela, compruébelo en PageSpeed Insights, olvídese del tema. Los métodos personalizados (IntersectionObserver y especialmente jQuery) se justifican exactamente en dos casos: la versión de Elementor está congelada por debajo de 3.9 por una razón válida, o los fondos se añaden de forma no estándar y el interruptor estándar no los detecta.

Para un proyecto nuevo con Elementor reciente, el orden correcto de acciones es: active la carga diferida integrada, pase el sitio por PageSpeed Insights y, solo si imágenes de fondo específicas siguen señaladas como problemáticas, trátelas individualmente mediante IntersectionObserver. No escriba código personalizado por adelantado «por si acaso», cada línea extra de JavaScript que pueda evitar escribir le ahorra tiempo de mantenimiento.