La imagen LCP no es la misma en móvil y en escritorio: cómo hacer el preload de la correcta

Añadió un preload para la imagen hero, como recomiendan todas las guías. En escritorio, el Largest Contentful Paint mejoró. En móvil no, y ahora PageSpeed avisa de que una imagen precargada no se utilizó, o el panel de red muestra el hero descargado dos veces.

El preload no está mal en sí. Apunta a un dispositivo, y el otro dispositivo paga las consecuencias.

Por qué la imagen LCP cambia con la pantalla

• Diseños distintos: en escritorio, la imagen hero es el elemento más grande; en un móvil, el título o una imagen más abajo en la columna ocupa su lugar.
• Secciones duplicadas: los maquetadores visuales suelen mostrar una sección en escritorio y otra en móvil, cada una con su propia imagen, y la otra oculta.
• Dirección de arte: una versión recortada en vertical del hero para móviles.
• Misma imagen, distinto tamaño: un archivo en varios anchos, donde el móvil debería descargar uno pequeño.
• Una imagen de fondo: cuando el hero es un fondo CSS, el navegador lo descubre aún más tarde, un caso tratado en nuestra guía sobre los hero con imagen de fondo.

Encontrar el elemento LCP en cada dispositivo

Ejecute PageSpeed en móvil y en escritorio, y abra el diagnóstico «Elemento de Largest Contentful Paint» en cada pestaña. O grabe en el panel Performance de DevTools con emulación móvil: el marcador LCP indica el elemento. Hágalo para ambos tamaños; no lo dé por supuesto.

new PerformanceObserver(l => {
  const e = l.getEntries().at(-1);
  console.log('LCP', Math.round(e.startTime), e.element, e.url);
}).observe({ type: 'largest-contentful-paint', buffered: true });

Los cuatro errores que desperdician el preload

1. Un único preload para todos. El hero de escritorio se precarga para todos los visitantes. Los móviles descargan una imagen grande que nunca mostrarán, con prioridad alta, compitiendo con su verdadero LCP. Firma: el aviso «precargada pero no utilizada» en móvil.

2. Un preload sin el srcset de la imagen. El preload apunta a un archivo, mientras que la etiqueta <img> elige otro ancho de su srcset. El navegador descarga ambos. Firma: la misma imagen dos veces en el panel de red, en dos tamaños.

3. Un preload colocado antes de la etiqueta viewport. Hasta que el navegador lee <meta name="viewport">, un móvil maqueta la página como si tuviera unos 980 píxeles de ancho. Un preload responsive leído antes de esa etiqueta se resuelve para ese ancho, así que el móvil descarga un candidato demasiado grande y luego el correcto. Firma: una doble descarga solo en móvil.

4. La imagen LCP tiene lazy load. Un loading="lazy" en el hero, que a menudo añade un tema o un plugin a todas las imágenes, le dice al navegador que espere a la maquetación antes de descargarla. Firma: la petición de la imagen empieza tarde, después de las hojas de estilos.

La solución, caso por caso

Imagen distinta por dispositivo. Un preload para cada uno, separados por una media query que coincida con el breakpoint de su tema:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preload" as="image" href="/uploads/hero-mobile.webp"
      media="(max-width: 768px)" fetchpriority="high">
<link rel="preload" as="image" href="/uploads/hero-desktop.webp"
      media="(min-width: 769px)" fetchpriority="high">

Misma imagen, varios anchos. Un único preload que repite el srcset de la imagen como imagesrcset y su sizes como imagesizes, carácter por carácter, para que el navegador elija el mismo candidato las dos veces y lo descargue una sola vez. Si el sizes de la imagen ya es incorrecto de entrada, corríjalo primero: nuestra guía sobre srcset y sizes explica cómo.

<link rel="preload" as="image" fetchpriority="high"
      imagesrcset="/uploads/hero-480.webp 480w, /uploads/hero-960.webp 960w, /uploads/hero-1920.webp 1920w"
      imagesizes="100vw">

En la propia imagen. Elimine loading="lazy", añada fetchpriority="high" y conserve sus atributos width y height.

Secciones duplicadas del maquetador. La variante oculta no debería descargarse en absoluto. Una imagen oculta con loading="lazy" nunca se descarga; sin él, se descarga en cada visita.

Comprobar el resultado

• Panel de red, emulación móvil, caché desactivada: el hero aparece una sola vez, pronto, con el ancho que espera.
• Lo mismo en escritorio.
• Ningún aviso «precargada pero no utilizada» en ninguna de las dos pestañas de PageSpeed.
• Varias pruebas por dispositivo, comparadas por la mediana, como se explica en nuestra guía sobre los datos de laboratorio y de campo.

Con Mantys Core

En resumen

• El elemento LCP suele diferir entre el móvil y el escritorio: compruebe ambos.
• Un único preload hace que un dispositivo descargue una imagen que no muestra.
• Use un preload por dispositivo, o un único preload con el mismo srcset y sizes que la imagen.
• Colóquelo justo después de la etiqueta viewport, y nunca aplique lazy load a la imagen LCP.
• Compruebe en el panel de red que el hero se descarga una sola vez en cada dispositivo.