Precarga la imagen de Largest Contentful Paint

¿Qué es la precarga?

Precargar un recurso hará que el navegador descargue un recurso de forma anticipada, incluso antes de que se inicie el renderizado principal del navegador. Esto asegura que un recurso esté disponible antes y es menos probable que bloquee el renderizado de la página, lo que mejorará el rendimiento en la mayoría de los casos.

<link rel="preload" 
as="image" 
href="image.jpg" 
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w">

¿Por qué debería precargar la imagen de Largest Contentful Paint?

Las imágenes que son visibles y están en el viewport 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 ti y a menudo harán un buen trabajo. Aun así, los navegadores harán una estimación del orden de descarga y a veces priorizarán otros recursos como JavaScript remoto u otras imágenes visibles por encima de la imagen LCP.

Debido a este comportamiento, la descarga de la imagen LCP no comenzará tan pronto como te gustaría. Precargar la imagen de Largest Contentful Paint resolverá este problema.

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

Precargar la imagen de Largest Contentful Paint hará que la imagen esté disponible para el renderizado antes en el proceso de renderizado. Esto generalmente conduce a una mejor puntuación de LCP. En casi todos los casos, precargar el elemento LCP te dará mejores puntuaciones en Lighthouse y RUM.

Precargar el elemento LCP puede ser aún más beneficioso cuando por alguna razón la imagen LCP no es la primera imagen que se descarga. Esto puede ocurrir cuando:

• Hay múltiples imágenes en el viewport visible
• La imagen LCP es una imagen de fondo (las imágenes de fondo generalmente se descargan más tarde que las imágenes en primer plano)
• El elemento LCP depende de JavaScript. Por ejemplo, con un script de slider o si tu sitio está construido sobre un framework de JavaScript como REACT.

Cómo precargar la imagen de Largest Contentful Paint

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

1. Determinar el elemento LCP: Ejecuta una auditoría de Lighthouse y verifica el elemento de Largest Contentful Paint. ¡Asegúrate de que el elemento LCP sea efectivamente una imagen!
2. Verificar formatos de imagen responsiva. Si estás usando imágenes responsivas, necesitas agregar todos esos tamaños de imagen al srcset de la etiqueta preload. De lo contrario, precargaremos la imagen incorrecta. Eso solo ralentizará la página.
3. Agregar la etiqueta preload. Todo lo que queda por hacer es agregar la etiqueta preload. La sintaxis es sencilla.

<link 
   <!-- indica preload -->
   rel="preload" 
   <!-- as es obligatorio e indica que estamos precargando una imagen -->
   as="image" 
   <!-- src de la imagen -->
   href="wolf.jpg" 
   <!-- opcional: el srcset de imagen responsiva -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w">

Cómo precargar la imagen de Largest Contentful Paint en Wordpress

Precargar la imagen de Largest Contentful Paint en Wordpress no es difícil en absoluto. Generalmente, la imagen de Largest Contentful Paint es la imagen destacada de una entrada de blog o página. Con solo unas pocas líneas de código podemos obtener la URL y el srcset de la imagen destacada y agregarlos al head de la página.

Simplemente agrega este código directamente después del elemento title en el archivo header.php de tu 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());
 <link rel="preload" 
       as="image" 
       href="<?php echo $imgurl;?>" 
       imagesrcset="<?php echo $srcset;?>">
<?php } ?>.