PageSpeed Insights y LCP: Qué es el atributo fetchpriority y cómo usarlo para mejorar tu puntuación

Antes de hablar del fetchpriority=high, quiero ponerte algo de contexto. Si llevas tiempo trabajando el SEO técnico de tu sitio o el de tus clientes, seguro que te has topado con la «pared» de las Core Web Vitals. Optimizas imágenes, minificas CSS, retrasas el JavaScript, pero PageSpeed Insights sigue mostrándote una advertencia en rojo o naranja: LCP (Largest Contentful Paint).

El problema, muchas veces, no es el peso del archivo, sino la prioridad que el navegador le asigna.

En este artículo vamos a ver una solución moderna, nativa y extremadamente efectiva para decirle a Google «carga esto primero»: el atributo fetchpriority.

¿Qué es el atributo fetchpriority?

fetchpriority es un atributo HTML que nos permite indicar al navegador la importancia relativa de un recurso (como una imagen, un iframe o un script) en comparación con otros recursos de la página.

Cuando un navegador entra en tu web, tiene que descargar un montón de cosas a la vez: HTML, CSS, fuentes, imágenes, scripts de seguimiento, etc. El navegador intenta adivinar qué es importante y qué no, pero a veces se equivoca. A veces, decide cargar primero un icono del footer antes que tu imagen principal (Hero Image).

Con fetchpriority, eliminamos esa adivinanza. Le damos una orden directa.

Existen tres valores posibles:

• high: El recurso es urgente. Cárgalo lo antes posible.
• low: El recurso no es importante ahora. Cárgalo cuando tengas hueco.
• auto: (Valor por defecto). Deja que el navegador decida.

Veamos como pasar de esto:

a esto:

¿Por qué es crítico para el SEO y el LCP?

El LCP (Largest Contentful Paint) mide cuánto tarda en aparecer el elemento de contenido más grande visible en la pantalla (generalmente la imagen destacada o un titular H1).

Si tu imagen destacada tarda en cargar porque el navegador estaba ocupado descargando otras cosas, tu LCP sube (y tu puntuación baja).

Al aplicar fetchpriority=»high» a esa imagen principal, logramos:

1. Adelantar la descarga: La imagen salta la cola de espera.
2. Estabilidad visual: El usuario ve la web «montada» mucho antes.
3. Mejor nota en Core Web Vitals: Google premia la carga rápida del contenido principal.

Esto puntualmente lo hice desde «Exclusiones de Medios» de Litespeed Caché:

Lo que hice fue fijarme imagen por imagen y bloque por bloque cual debería saltarme en la cola de espera.

Cómo implementar fetchpriority correctamente

La implementación es muy sencilla y se hace directamente en la etiqueta HTML. No necesitas tocar el archivo .htaccess ni configurar el servidor.

El código base

Supongamos que esta es la imagen de tu cabecera (Hero Image):

? Forma estándar (El navegador decide cuándo cargarla):

<img src="portada-seo-tupac.jpg" alt="Consultoría SEO" width="1200" height="600">

? Forma optimizada (Forzamos prioridad alta):

<img src="portada-seo-tupac.jpg" alt="Consultoría SEO" width="1200" height="600" fetchpriority="high">

¿Dónde debes usarlo?

Este atributo NO es para todas las imágenes. De hecho, si lo usas en todas partes, pierde su efecto (si todo es urgente, nada es urgente).

Úsalo solo en:

• La imagen destacada del post (si aparece «Above the fold»).
• La imagen de fondo de tu Hero Section.
• El logo (si es muy pesado o crítico).

¿Cómo hacerlo en WordPress?

Si usas WordPress, las versiones más recientes (desde la 6.3) intentan añadirlo automáticamente, pero no siempre aciertan.

Si estás metiendo la imagen manualmente en HTML o en un bloque de código, simplemente escribe el atributo. Si usas constructores visuales (como Elementor o Divi) y no te dan la opción en la interfaz, puedes necesitar un pequeño snippet en tu functions.php o usar un plugin de optimización que soporte esta función específica.

Diferencias clave: loading=»lazy» vs preload vs fetchpriority

Es vital no confundir estos términos, ya que usarlos mal puede romper tu rendimiento.

1. loading="lazy" (Carga diferida)

• Qué hace: Dice «no cargues esto hasta que el usuario haga scroll y llegue aquí».
• Dónde usarlo: Imágenes que NO se ven al abrir la web (imágenes dentro del artículo, footer, etc.).
• Peligro: NUNCA uses lazy en la imagen principal (LCP). Si lo haces, estás diciéndole al navegador que retrase lo más importante.

2. <link rel="preload">

• Qué hace: Se pone en el <head> y fuerza la descarga de un recurso muy temprano.
• Diferencia: preload es muy agresivo y carga el archivo incluso si no se usa inmediatamente. fetchpriority es más semántico y trabaja mejor con la lógica interna del navegador para imágenes.
• Veredicto: Hoy en día, para imágenes, fetchpriority=»high» suele ser más eficiente y fácil de mantener que preload.

3. fetchpriority=»high»

• Qué hace: Aumenta la prioridad en la cola de descarga.
• Dónde usarlo: SOLO en el elemento LCP (la imagen más grande visible al principio).

Resumen: Mi recomendación como especialista SEO

En mi experiencia auditando sitios web, he visto puntuaciones de PageSpeed pasar de rojo a verde solo con este cambio.

Si estás luchando con un LCP alto:

1. Identifica cuál es tu elemento LCP (PageSpeed Insights te lo dice en el diagnóstico).
2. Si es una imagen, asegúrate de que NO tenga loading="lazy".
3. Añádele fetchpriority=»high».

Es una de esas «pequeñas victorias» del SEO técnico: máximo impacto con mínimo esfuerzo de código.

PD: también precargar las fuentes sirve:

Si encontraste útil toda la información que hemos compartido, te agradecemos sinceramente tu apoyo. Si deseas colaborar con nosotros, puedes hacerlo mediante una donación a través de PayPal o Cafecito. Tu generosidad nos ayuda a mantener nuestro contenido libre de publicidad y a seguir ofreciendo información valiosa para ti y para nuestra comunidad de lectores.

Si estás considerando crear tu propio sitio web, te recomendamos Hostgator. Es una plataforma fácil de usar y muy popular que te permitirá llevar tus ideas al mundo digital. Haz clic en el banner de abajo para obtener un descuento al crear tu sitio con WordPress.