Su hero es una sección a ancho completo con una imagen de fondo, configurada en Divi, Elementor u otro maquetador. PageSpeed señala esa sección como el elemento Largest Contentful Paint, y muestra «Descubrimiento de solicitudes de LCP» entre sus avisos. Ya comprimió la imagen. Sigue siendo lenta.

El peso rara vez es el problema principal. El problema es cuándo se entera el navegador de que la imagen existe.

Por qué una imagen de fondo arranca tarde

Una etiqueta <img> normal está en el HTML: el navegador la detecta en los primeros bytes y puede solicitarla de inmediato. Una imagen de fondo vive en el CSS. El navegador solo la encuentra tras cuatro pasos:

descargar el HTML;
descargar la hoja de estilos que contiene la regla, a menudo un archivo por página generado por el maquetador;
aplicar los estilos y hacer coincidir la regla con la sección;
solo entonces, solicitar la imagen.

Dos costumbres de los maquetadores lo empeoran. El fondo a menudo no tiene variantes de tamaño: un único archivo de 1920 píxeles para todas las pantallas, móviles incluidos. Y muchos temas y plugins aplican lazy load a los fondos con un script que añade la imagen cuando la sección entra en pantalla. Si ese script está a su vez retrasado hasta la primera interacción, el hero espera a que el visitante se mueva.

En resumen

Un fondo solo se descubre después de que su hoja de estilos se descargue y se aplique.
No tiene srcset: los móviles reciben el archivo de escritorio.
Los fondos con lazy load esperan a un script, a veces a una interacción.

Confirmarlo en su página

En DevTools, inspeccione la sección hero y busque background-image en los estilos calculados. Anote la URL del archivo.
En el panel Network, con emulación móvil, recargue y localice ese archivo: observe lo tarde que empieza en comparación con el HTML y las hojas de estilos.
Revise las clases y los atributos de la sección en busca de un marcador de lazy load, a menudo una clase como lazyload o un atributo como data-bg.

Solución A (la mejor): convertir el hero en una imagen real

Coloque una etiqueta <img> dentro de la sección, posicionada para cubrirla. Se ve igual, y ahora el navegador la ve en el HTML, puede elegir un ancho de su srcset y puede darle prioridad alta:

HTML + CSS

<section class="hero">
  <img class="hero__bg" src="/uploads/hero-1920.webp"
       srcset="/uploads/hero-768.webp 768w, /uploads/hero-1920.webp 1920w"
       sizes="100vw" width="1920" height="900" alt="" fetchpriority="high">
  <div class="hero__content"><!-- título, botón --></div>
</section>

<style>
  .hero { position: relative; }
  .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
</style>

En la mayoría de maquetadores, esto es un módulo de imagen colocado en la sección con el mismo CSS, o un bloque de HTML personalizado. El atributo alt vacío la mantiene decorativa, como lo era el fondo.

Solución B: conservar el fondo, pero hacer que llegue pronto

Si el diseño tiene que seguir siendo un fondo:

Precárguelo, con un preload por dispositivo si el maquetador usa un fondo distinto en móvil. El método está en nuestra guía sobre la imagen LCP por dispositivo.
Saque el hero de cualquier lazy load de fondos: en los ajustes del maquetador, en el plugin que lo añade, o excluyendo esa sección.
Dé a los móviles un archivo más pequeño: tanto Divi como Elementor permiten definir una imagen de fondo distinta por dispositivo. Suba ahí una versión con tamaño para móvil.
Ponga la regla del hero en el critical CSS, para que se aplique en el primer pintado en lugar de esperar a la hoja de estilos completa.

Hero que arranca pronto

Una imagen real con srcset y prioridad alta, o un fondo precargado, sin lazy load, con un archivo de tamaño para móvil.

Hero que arranca tarde

Un fondo de 1920 píxeles, con lazy load mediante un script, a su vez retrasado hasta la primera interacción.

Comprobar el resultado

Panel Network, emulación móvil: la imagen del hero empieza justo después del HTML, no después de las hojas de estilos.
Su tamaño corresponde al dispositivo.
Aparece sin mover el ratón ni hacer scroll.

Con Mantys Core

Mantys Core puede gestionar toda su capa de rendimiento, caché incluida, o convivir con la configuración que ya tiene. En un hero con imagen de fondo, se ocupa del problema del descubrimiento:

Detecta, a partir de renderizados reales en móvil y escritorio, cuándo el LCP de una página es un fondo CSS, y precarga esa imagen para ese dispositivo.
El critical CSS de cada página contiene las reglas de lo que es visible en la carga, así que el hero tiene sus estilos en el primer pintado en lugar de esperar a la hoja de estilos completa.

El archivo en sí sigue siendo cosa suya: un fondo tiene una sola imagen para todas las pantallas, así que el peso en móvil se resuelve con una imagen real (solución A) o con un fondo por dispositivo en su maquetador.

En resumen

Una imagen de fondo se descubre tarde: el HTML, luego el CSS, luego la aplicación de estilos, luego la imagen.
No tiene srcset, y los maquetadores a menudo le aplican lazy load con un script.
La mejor solución: una imagen real que cubra la sección, con srcset y prioridad alta.
Si no: preload por dispositivo, nada de lazy load en el hero, un archivo de tamaño para móvil y su regla en el critical CSS.

Comentarios

¿Atascado con un problema parecido? Describa su configuración y lo que observa. Leemos cada comentario y respondemos.

Todavía no hay comentarios. Comparta el primero su caso.