Precargar la imagen del Largest Contentful Paint

¿Qué es la precarga?

La precarga le indica al navegador que descargue algo temprano, antes de que comience el renderizado principal. El archivo está listo antes y no bloquea el renderizado de la página. En términos de tiempo del LCP, la precarga reduce el Resource Load Delay: la brecha entre que el navegador recibe el HTML y comienza a descargar la imagen LCP.

<link rel="preload"
as="image"
href="image.jpg"
fetchpriority="high"
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w"
imagesizes="100vw">

¿Por qué debería precargar la imagen del largest contentful paint?

Las imágenes que son visibles y están en la ventana gráfica tendrán una alta prioridad y se descargarán relativamente temprano en todo el proceso de carga de la página. Navegadores como Chrome harán todo lo posible para priorizar esas imágenes por usted y a menudo harán un buen trabajo. Aún así, los navegadores harán una suposición fundamentada sobre el orden de descarga y a menudo priorizarán otros recursos como el JavaScript remoto u otras imágenes visibles sobre la imagen LCP.

Debido a este comportamiento, la descarga de la imagen LCP no comenzará tan temprano como desearía. Precargar la imagen del Largest Contentful Paint solucionará este problema.

Los números respaldan esto. Según el 2025 Web Almanac, el 76% de las páginas móviles tienen una imagen como su elemento LCP. Sin embargo, solo el 2,1% de las páginas precarga realmente esa imagen. Esa es una oportunidad perdida enorme. Además de eso, muchas imágenes LCP no se pueden descubrir en el HTML inicial porque dependen de JavaScript o CSS para renderizarse. El navegador no puede descargar lo que no puede encontrar. Una etiqueta de precarga resuelve eso.

¿Cómo afecta el precargar la imagen del Largest Contentful Paint al rendimiento de la página?

Precargar la imagen LCP hace que esté disponible para renderizarse antes. El resultado: una mejor puntuación LCP tanto en Lighthouse como en los datos de campo.

En los sitios monitoreados por CoreDash, el 98% de las cargas de página con una imagen LCP precargada obtienen la calificación de "bueno", en comparación con el 88% sin precarga. El LCP p75 para imágenes precargadas es aproximadamente el doble de rápido que para las no precargadas.

La precarga importa aún más cuando la imagen LCP no es la primera imagen que descarga el navegador. Esto sucede cuando:

• Hay múltiples imágenes en la ventana gráfica visible
• La imagen LCP es una imagen de fondo (las imágenes de fondo generalmente se descargan después que las imágenes en primer plano)
• El elemento LCP depende de JavaScript. Por ejemplo, con un script de control deslizante o si su sitio está construido sobre un framework de JavaScript como React.

Aún así, el 17% de los sitios móviles carga de forma diferida su imagen LCP según el 2025 Web Almanac. Solo el 62% de los orígenes móviles aprueban el LCP. Estos dos hechos no están desconectados. Si está cargando de forma diferida su imagen LCP, solucione eso primero y luego precárguela.

Utilice fetchpriority="high" en la imagen LCP

Además de la precarga, también debe agregar fetchpriority="high" al elemento de la imagen LCP en sí. Esto le indica al navegador que priorice esta imagen sobre otros recursos. Una prueba en Google Flights mostró mejoras en el LCP de 2,6 segundos a 1,9 segundos solo con agregar este atributo.

<img src="hero.jpg"
     fetchpriority="high"
     width="800"
     height="400"
     alt="Hero image">

Una imagen precargada todavía obtiene la prioridad predeterminada a menos que la aumente explícitamente. Combinar rel="preload" con fetchpriority="high" tanto en la etiqueta de enlace como en el elemento img le da al navegador la señal más clara posible. Para obtener más información sobre cómo los navegadores deciden qué descargar primero, consulte la guía completa sobre la priorización de recursos.

<link rel="preload"
      as="image"
      href="hero.jpg"
      fetchpriority="high">

La adopción de fetchpriority="high" creció del 0,03% de los sitios móviles en 2022 al 17,3% en 2025, en gran parte gracias a que WordPress lo agregó a su núcleo. Si su CMS no lo configura automáticamente, agréguelo usted mismo.

Cómo precargar la imagen del Largest Contentful Paint

Precargar la imagen LCP es fácil. Solo hay que seguir 3 pasos:

1. Determine el elemento LCP: Ejecute una auditoría en Lighthouse y verifique el Largest Contentful Paint Element. ¡Asegúrese de que el elemento LCP sea efectivamente una imagen!
2. Verifique los formatos de imagen adaptables. Si está utilizando imágenes adaptables, debe agregar todos esos tamaños de imagen al srcset de la etiqueta de precarga. De lo contrario, precargaremos la imagen equivocada. Eso solo ralentizará la página.
3. Agregue la etiqueta de precarga. Todo lo que queda por hacer es agregar la etiqueta de precarga.

<link
   <!-- indicate preload -->
   rel="preload"
   <!-- as is required and indicates we are preloading an image -->
   as="image"
   <!-- image src -->
   href="wolf.jpg"
   <!-- boost priority -->
   fetchpriority="high"
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- must match the sizes attribute on your img element -->
   imagesizes="100vw">

El valor de imagesizes debe coincidir con el atributo sizes de su elemento <img>. Si su imagen se muestra a la mitad del ancho de la ventana gráfica, use imagesizes="50vw". Equivocarse en esto significa que el navegador precarga la variante de imagen incorrecta.

Solo precargue la imagen LCP. Si precarga demasiados recursos, diluye el aumento de prioridad y el navegador no puede distinguir qué es lo que más importa. Una sola precarga para la imagen LCP es todo lo que necesita. Para un enfoque aún más agresivo, puede combinar la precarga con 103 Early Hints para comenzar la descarga antes de que siquiera llegue el HTML.

La precarga logra que la imagen comience a descargarse antes, pero la imagen en sí todavía necesita ser optimizada. Sírvala en un formato moderno como WebP o AVIF y con las dimensiones correctas. Consulte optimizar imágenes para las Core Web Vitals para obtener el resumen completo.

La precarga solo ayuda con una parte del tiempo del LCP: el retraso antes de que la imagen comience a descargarse. Si su Time to First Byte es lento, ninguna cantidad de precarga lo compensará. La etiqueta de precarga se encuentra en el HTML, por lo que el navegador debe recibir primero el HTML. Verifique su TTFB antes de agregar indicaciones de precarga.

Cómo precargar la imagen del Largest Contentful Paint en WordPress

Precargar la imagen del Largest Contentful Paint en WordPress no es nada difícil. Por lo general, la imagen del Largest Contentful Paint es la imagen destacada de una publicación de blog o una página. Con solo unas pocas líneas de código podemos obtener la URL de la imagen destacada y el srcset y agregarlo a la cabecera de la página.

Simplemente agregue este código directamente después del elemento de título en el archivo header.php de su plantilla actual.

<?php if((int)get_post_thumbnail_id() > 0){
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 $sizes = wp_get_attachment_image_sizes(get_post_thumbnail_id());
?>
 <link rel="preload"
       as="image"
       href="<?php echo $imgurl;?>"
       fetchpriority="high"
       imagesrcset="<?php echo $srcset;?>"
       imagesizes="<?php echo $sizes;?>">
<?php } ?>