Precarga de imágenes pesadas en WordPress

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.

3 comentarios en “Precarga de imágenes pesadas en WordPress”

    1. Hola. Tienes varias opciones, puedes resolver todo en pocos clics con wp rocket y cloudflare. Por los últimos trabajos que hemos hecho hemos visto que se ha popularizado bastante (las soluciones realmente buenas aqui son de pago). Por otro lado, si quieres lograr mayor optimizacion tienes que pensar en 4 cosas: (1) tiempo de carga del servidor (tratar de que el server esté tan ligero como puedas para reducir sus tiempos de respuesta), (2) minimizar e incrustar css y js en la medida de lo posible defer o async del que no puedas incrustar, (3) evitar peticiones peticiones externas (muy común con librerías como font-awesome y fuentes de google), (4) imágenes en formatos de nueva generación y demorar la carga de las que no aparecen el el viewport lazy load y (5) caché. Para esto tienes varios plugins por separado que se pueden encargar de cada caso o combinaciones de estos. En nuestro caso nos especializamos en migrar wordpress a aws, y hacerlo compatible con amp. Para este caso específico te comparto parte del stack de plugins que utilizamos en este artículo Funciones de AWS Cloudfront para una CDN

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *