El atributo preload es fundamental para la mejora de la velocidad de carga de un sitio.
Atendiendo a los Core Web Vitals su uso incide de manera positiva en el indicador LCP (largest content paintful). No se recomienda hacer un uso abusivo de este atributo sin embargo, sí se recomienda sobre todo para la precarga de imágenes grandes que se mostrarán en el viewport al inicio de cada página.
Pero, ¿qué imágenes se muestran siempre al inicio de una página? Pues bien, generalmente una de las imágenes que cumple con esto es la imagen destacada. El código a continuación puedes incluirlo en el functions.php de tu sitio.
/* Precargar (preload) la imagen destacada en cada post */
add_action('wp_head', 'preload_post_attachment_image');
function preload_post_attachment_image(){
if (has_post_thumbnail()) {
$attachment_image = wp_get_attachment_url( get_post_thumbnail_id() );
echo '<link rel="preload" as="image" href="'.$attachment_image.'">';
}
}Otra vía que te recomendamos para imágenes que solo se van a cargar en una página es añadir un código personalizado a tu sitio y cargarlo dentro de la etiqueta head.
<link rel="preload" as="image" href="https://cdn.example.com/wp-content/uploads/example-img.jpg">El ejemplo anterior se utilizó en un sitio web maquetado con elementor lo cual te da la posibilidad que que el código personalizado se muestre solo para la o las páginas que te interese.
