El rendimiento web en WordPress no depende solo de un buen hosting o de comprimir las imágenes. Hay una técnica concreta que marca la diferencia en las métricas de Core Web Vitals, especialmente en el Largest Contentful Paint (LCP): el preload de imágenes. Bien aplicado, puede reducir ese tiempo de forma notable. Mal aplicado, puede empeorar exactamente lo que intentas corregir.
Esta guía está pensada para que entiendas qué es el preload, cuándo tiene sentido usarlo, cómo implementarlo correctamente en WordPress y, sobre todo, cómo evitar los errores que cometen la mayoría de los desarrolladores y webmasters cuando se aventuran a tocarlo sin la información adecuada.
Si has llegado aquí porque Google PageSpeed Insights o alguna auditoría de rendimiento te ha señalado el LCP como problema, estás en el sitio correcto. Vamos al grano.
¿Qué es el preload de imágenes y cómo puede beneficiar a tu WordPress?
El preload es una directiva HTML que le indica al navegador que descargue un recurso concreto cuanto antes, antes incluso de que el HTML lo solicite de forma natural durante el proceso de renderizado. Se implementa con una etiqueta <link> en el <head> del documento con el atributo rel="preload".
En el caso de las imágenes, esta etiqueta tiene este aspecto:
<link rel="preload" as="image" href="/wp-content/uploads/imagen-hero.webp">El navegador, al leer esa línea en el <head>, inicia la descarga de la imagen de forma inmediata, sin esperar a que el parser llegue a la etiqueta <img> o al CSS que la define. Eso adelanta la disponibilidad del recurso y, si esa imagen es la más grande del viewport inicial, reduce directamente el tiempo de LCP. Si quieres profundizar en cómo mejorar el LCP en WordPress, sigue leyendo.
Debes usar preload únicamente cuando hay una imagen visible desde el primer momento en que el usuario carga la página, que además es la imagen más grande del viewport. El caso más habitual es la imagen hero de la portada, la imagen destacada de un artículo o un banner que ocupa la parte superior de la página.
Descubre por qué el preload puede mejorar tu LCP en WordPress
El LCP mide el tiempo que tarda en renderizarse el elemento visual más grande del viewport inicial. En la mayoría de los sitios WordPress, ese elemento es una imagen: la imagen destacada de un post, el logo grande de la cabecera o una imagen hero del tema.
El problema es que, en el flujo normal de carga, el navegador no descubre esa imagen hasta que procesa el HTML o el CSS. Si la imagen está referenciada en una hoja de estilos o viene desde JavaScript, el retraso puede ser considerable. El preload rompe ese cuello de botella: el navegador descarga la imagen en paralelo con otros recursos desde el inicio, sin esperar a que la descubra más tarde.
El resultado directo es un LCP más bajo, lo que mejora la puntuación en Core Web Vitals y, con ello, la señal de experiencia de página que Google tiene en cuenta para el posicionamiento.
Situaciones en las que NO deberías aplicar preload de imágenes
Aquí es donde mucha gente se equivoca. El preload no es una solución universal que debas aplicar a todas las imágenes de tu web. De hecho, usarlo mal puede penalizar el rendimiento.
- No hagas preload de imágenes que están fuera del viewport inicial. Si la imagen no se ve al cargar la página sin hacer scroll, no necesita preload. Estarás consumiendo ancho de banda y retrasando recursos que sí son críticos.
- No hagas preload de múltiples imágenes. Si añades tres o cuatro etiquetas de preload a la vez, saturarás la conexión al inicio y podrás retrasar la carga del CSS o del JavaScript necesario para renderizar la página.
- No hagas preload si la imagen ya se carga con alta prioridad de forma natural. Algunos temas bien optimizados ya priorizan correctamente los recursos. En ese caso, añadir preload no aporta nada y puede interferir.
- No apliques preload a imágenes con lazy load. Es una contradicción directa que el navegador no puede resolver de forma coherente. Más adelante lo explicamos con detalle. Si necesitas más información sobre qué es lazy load, consulta nuestra guía.
Cómo identificar la imagen que necesita preload en tu sitio web
Antes de tocar nada, tienes que identificar cuál es la imagen LCP de tu página. No lo supongas: confírmano con datos.
La forma más sencilla es usar Google PageSpeed Insights. Introduce la URL de tu página, espera el análisis y busca el apartado de Largest Contentful Paint. Allí te indicará exactamente qué elemento es el LCP y, si es una imagen, te mostrará su URL.
También puedes usar las DevTools de Chrome. Abre la pestaña Performance, graba una carga de página y busca en el timeline el elemento marcado como LCP. En la pestaña Elements puedes inspeccionarlo para obtener su URL exacta.
Una vez que tienes la URL de la imagen LCP confirmada, ya puedes plantearte implementar el preload. Sin ese paso previo, estarás trabajando a ciegas.
Opciones para implementar preload de imágenes en WordPress
En WordPress tienes varias formas de añadir preload de imágenes. La elección depende de tu nivel técnico y de si ya usas algún plugin de optimización.
Cómo añadir preload manualmente con código en functions.php
Esta es la opción más directa y controlada. Puedes añadir la etiqueta de preload al <head> de tu WordPress mediante un hook en el archivo functions.php de tu tema hijo.
function mi_preload_imagen_lcp() {
echo '<link rel="preload" as="image" href="/wp-content/uploads/2024/01/imagen-hero.webp" type="image/webp">';
}
add_action( 'wp_head', 'mi_preload_imagen_lcp', 1 );El número 1 en el hook indica que se ejecuta con máxima prioridad, lo que garantiza que la etiqueta aparezca lo antes posible en el <head>. Sustituye la URL por la de tu imagen LCP real.
Si la imagen LCP cambia según la página, puedes usar condicionales de WordPress para servir distintas etiquetas de preload en función de la URL:
function mi_preload_imagen_lcp() {
if ( is_front_page() ) {
echo '<link rel="preload" as="image" href="/wp-content/uploads/hero-home.webp" type="image/webp">';
} elseif ( is_singular( 'post' ) ) {
$imagen = get_the_post_thumbnail_url( get_the_ID(), 'large' );
if ( $imagen ) {
echo '<link rel="preload" as="image" href="' . esc_url( $imagen ) . '">';
}
}
}
add_action( 'wp_head', 'mi_preload_imagen_lcp', 1 );Esta aproximación es más precisa y evita que hagas preload de imágenes que no son el LCP en páginas donde la imagen destacada cambia.
Recuerda que este código debes añadirlo siempre en el tema hijo, nunca en el tema padre, para que no se pierda con las actualizaciones del tema.
Configura el preload fácilmente con plugins de optimización
Si no te sientes cómodo editando código, varios plugins populares de optimización en WordPress incluyen opciones relacionadas con el preload de imágenes.
WP Rocket es probablemente el más conocido. En su sección de medios tienes la opción de excluir imágenes del lazy load, que es el paso previo necesario si quieres que la imagen LCP se cargue con prioridad. Además, permite añadir manualmente URLs a precargar desde su configuración avanzada.
Perfmatters es otro plugin ligero que permite gestionar el preload de recursos directamente desde su panel, incluyendo imágenes específicas.
Litespeed Cache, si tu servidor lo soporta, también incluye opciones de preload aunque orientadas principalmente a páginas y recursos del servidor más que a imágenes individuales. Para saber más, puedes consultar cómo configurar LiteSpeed Cache.
La ventaja de usar plugins es la facilidad. El inconveniente es que a veces no son tan precisos como el código manual y pueden añadir preload a recursos que no lo necesitan si no se configuran con cuidado.
Errores comunes que debes evitar al usar preload de imágenes
Conocer los errores más frecuentes te ahorra horas de diagnóstico y problemas de rendimiento innecesarios.
- Hacer preload de la imagen equivocada. Si añades preload a una imagen que no es el LCP, estás priorizando un recurso que no impacta en esa métrica. Confirma siempre la imagen LCP antes de implementar nada.
- Usar preload y lazy load en la misma imagen. Muchos temas y plugins aplican lazy load a todas las imágenes por defecto. Si tu imagen LCP tiene
loading="lazy", el navegador recibirá señales contradictorias. Debes excluir específicamente la imagen LCP del lazy load. - Añadir el tipo MIME incorrecto. Si sirves la imagen en formato WebP pero el preload apunta a un JPEG, el navegador descargará ambas versiones. Asegúrate de que el
hrefdel preload apunta exactamente al formato que sirves. - No usar el atributo
as="image". Sin este atributo, el navegador no sabe de qué tipo de recurso se trata y puede no priorizarlo correctamente o descargarlo dos veces. - Aplicar preload en todas las páginas cuando solo es necesario en algunas. Un preload global de una imagen que solo es relevante en la portada supone una petición innecesaria en el resto de páginas.
Cómo comprobar si el preload funciona como debe
Implementar el preload no garantiza que funcione. Tienes que verificarlo.
La forma más directa es abrir las DevTools de Chrome, ir a la pestaña Network y recargar la página con la caché vacía. Filtra por imágenes y busca tu imagen LCP. Si el preload funciona correctamente, verás que en la columna Initiator aparece como PreloadScanner o link en lugar de img, lo que indica que el navegador la descargó anticipadamente.
También puedes revisar la pestaña Performance y verificar en el waterfall que la imagen empieza a descargarse muy pronto en la línea de tiempo, prácticamente al inicio, sin esperar a que el HTML o el CSS la soliciten.
Para confirmar el impacto en el LCP, vuelve a ejecutar el análisis en Google PageSpeed Insights o en Lighthouse desde las DevTools y compara el valor de LCP antes y después de la implementación. Una mejora real suele ser visible en la reducción de ese tiempo y, en algunos casos, en la desaparición de la advertencia de recursos que retrasan la carga de la imagen LCP.
Si después de implementar el preload el LCP no mejora o incluso empeora, revisa que no estás haciendo preload de múltiples imágenes a la vez, que la URL del href es exactamente la que sirve el servidor y que la imagen no sigue teniendo loading="lazy" en su etiqueta HTML.
Respuestas a las preguntas más frecuentes sobre el preload de imágenes
¿Cuántas imágenes debería cargar con preload en mi sitio WordPress?
Lo recomendable es hacer preload únicamente de la imagen principal que aparece en el viewport inicial, normalmente una sola imagen. Hacer preload de múltiples imágenes puede saturar la conexión y retrasar la carga de recursos más importantes, empeorando el rendimiento en lugar de mejorarlo.
¿El preload de imágenes garantiza una carga más rápida en WordPress?
No siempre. El preload solo mejora el rendimiento cuando se aplica a la imagen más grande del viewport inicial, es decir, la imagen LCP. Si haces preload de imágenes que no están en la parte visible o de múltiples imágenes a la vez, puedes empeorar el tiempo de carga al priorizar recursos innecesarios y bloquear otros más importantes.
¿Es posible usar preload y lazy load en la misma imagen?
No, nunca debes aplicar preload y lazy load a la misma imagen porque son técnicas opuestas. El preload carga la imagen de forma inmediata con alta prioridad, mientras que el lazy load retrasa su carga hasta que el usuario se acerca a ella. Usa preload solo para la imagen LCP y lazy load para el resto de imágenes que están fuera del viewport inicial.
¿Cuál es la diferencia entre preload y el atributo fetchpriority en imágenes?
El preload fuerza al navegador a descargar la imagen antes de que el HTML la solicite de forma natural, mientras que fetchpriority="high" indica al navegador que esa imagen tiene prioridad alta en el momento en que la etiqueta img es descubierta durante el parsing. Para la imagen LCP, lo ideal es combinar ambas técnicas: añadir el preload en el <head> y el atributo fetchpriority="high" en la propia etiqueta <img> para obtener el máximo efecto.
