Ver contenido
Introducción
Cuando tu página carga, el navegador realiza docenas de solicitudes para varios recursos: imágenes, scripts, hojas de estilo, fuentes. Pero no todos los recursos son igualmente importantes. El atributo fetchpriority te permite indicar al navegador qué recursos deben cargarse primero.
El UXR SEO Analyzer verifica el uso correcto de fetchpriority porque este atributo afecta directamente la rapidez con que aparece tu contenido más importante, particularmente tu elemento Largest Contentful Paint (LCP).
¿Qué es el Atributo Fetchpriority?
El atributo fetchpriority es una indicación HTML que le dice a los navegadores la prioridad relativa de una solicitud de recurso. Brinda a los desarrolladores control sobre la programación de recursos del navegador, que anteriormente era determinada completamente por heurísticas del navegador.
Elementos soportados:
<img>- Imágenes<link>- Hojas de estilo, indicaciones de precarga<script>- Archivos JavaScript<iframe>- Contenido incrustado
Valores válidos:
| Valor | Significado |
|---|---|
high | Cargar con prioridad más alta que la predeterminada |
low | Cargar con prioridad más baja que la predeterminada |
auto | Dejar que el navegador decida (comportamiento por defecto) |
Cómo Funciona la Prioridad del Navegador Sin Fetchpriority
Los navegadores usan heurísticas para priorizar la carga de recursos:
- CSS y fuentes: Cargados con alta prioridad (bloquean el renderizado)
- Scripts en
<head>: Alta prioridad a menos que tenganasyncodefer - Imágenes en el viewport: Inician con prioridad baja, luego se actualizan a alta después del layout
- Imágenes fuera del viewport: Prioridad baja
El problema con este sistema es el retraso. Para imágenes, el navegador inicialmente asigna prioridad baja. Solo después de calcular el layout y determinar que la imagen está en el viewport actualiza la prioridad. Esto desperdicia tiempo valioso.
Por Qué Fetchpriority Importa para SEO
1. LCP Más Rápido para Imágenes Hero
Tu elemento LCP frecuentemente es una imagen grande: un banner hero, producto destacado o cabecera de artículo. Sin fetchpriority="high", el navegador:
- Comienza a cargar la imagen con prioridad baja
- Calcula el layout de la página
- Se da cuenta que la imagen está en el viewport
- Actualiza a prioridad alta
- Compite con otros recursos actualizados
Con fetchpriority="high", saltas los pasos 1-4:
<!-- Imagen LCP con fetchpriority -->
<img src="hero.webp"
alt="Presentacion de producto"
width="1200"
height="600"
fetchpriority="high">
2. Impacto Real en Rendimiento
Según la documentación de web.dev, Google probó fetchpriority en Google Flights y mejoró el LCP de 2.6 segundos a 1.9 segundos—una mejora del 27% solo agregando un atributo.
3. Complementa Otras Optimizaciones
Fetchpriority funciona junto con otras técnicas:
| Técnica | Propósito | Cuándo Usar |
|---|---|---|
fetchpriority="high" | Aumentar prioridad de descarga | Imagen LCP, recursos críticos |
<link rel="preload"> | Descubrir recurso antes | Recursos no en HTML inicial |
loading="lazy" | Diferir carga | Imágenes debajo del fold |
Distinción importante:
- Preload ayuda con el descubrimiento—indicar al navegador que un recurso existe antes de que lo encuentre naturalmente
- Fetchpriority ayuda con la priorización—una vez descubierto, qué tan urgente cargarlo
Puedes combinarlos:
<!-- Preload + alta prioridad para imagen LCP -->
<link rel="preload"
as="image"
href="hero.webp"
fetchpriority="high">
Cómo UXR SEO Analyzer Verifica Esto
El analizador evalúa el uso de fetchpriority verificando:
- Candidatos LCP sin
fetchpriority="high": Imágenes grandes en el viewport que podrían beneficiarse - Imágenes críticas sin indicaciones de prioridad: Imágenes above-fold cargando con prioridad predeterminada
- Mal uso de alta prioridad: Demasiados recursos marcados como alta (diluye el efecto)
Errores Comunes a Evitar
1. Usar Alta Prioridad para Todo
Si cada imagen tiene fetchpriority="high", efectivamente no has priorizado nada:
<!-- NO: Sobreuso de alta prioridad -->
<img src="hero.webp" fetchpriority="high">
<img src="producto1.webp" fetchpriority="high">
<img src="producto2.webp" fetchpriority="high">
<img src="producto3.webp" fetchpriority="high">
Solo 1-2 recursos verdaderamente críticos deberían tener alta prioridad.
2. Combinar Alta Prioridad con Lazy Loading
Esta combinación no tiene sentido—estás diciendo simultáneamente “carga esto urgentemente” y “no cargues esto hasta hacer scroll”:
<!-- NO: Atributos contradictorios -->
<img src="hero.webp"
fetchpriority="high"
loading="lazy">
3. Olvidar Identificar el Elemento LCP
Antes de agregar fetchpriority, sabe cuál elemento es tu LCP:
- Ejecuta Lighthouse o PageSpeed Insights
- Revisa el diagnóstico “Largest Contentful Paint element”
- Agrega
fetchpriority="high"a ese elemento específico
4. No Usar Baja Prioridad para Below-Fold
Mientras fetchpriority="high" recibe atención, fetchpriority="low" también es valioso:
<!-- Imagenes de carrusel below-fold -->
<img src="slide2.webp" fetchpriority="low" loading="lazy">
<img src="slide3.webp" fetchpriority="low" loading="lazy">
Soporte de Navegadores
Fetchpriority es soportado en:
- Chrome 101+
- Edge 101+
- Opera 87+
- Safari 17.2+
- Firefox 132+
Para navegadores no soportados, el atributo simplemente se ignora—sin daño. Esto lo hace seguro para agregar inmediatamente.
Guía Rápida de Implementación
- Identifica tu elemento LCP usando PageSpeed Insights
- Agrega
fetchpriority="high"a ese elemento - Considera
fetchpriority="low"para recursos below-fold - No abuses—limita alta prioridad a 1-2 recursos
- Prueba con Lighthouse para verificar la mejora
Próximos Pasos
Para estrategias detalladas de implementación incluyendo combinar fetchpriority con preload, depurar problemas de prioridad en DevTools y técnicas avanzadas de optimización, lee nuestra Guía de Optimización Fetchpriority completa.
Artículos Relacionados
- Guía de Optimización LCP - Optimización completa de Largest Contentful Paint
- Guía de Optimización de Imágenes - Estrategias integrales de optimización de imágenes
- Mejores Prácticas de Lazy Loading - Cuándo usar y evitar lazy loading
- Hub de SEO de Imágenes - Todas las guías de optimización de imágenes
Referencias
- web.dev - Optimize resource loading with the Fetch Priority API
- web.dev - Optimize Largest Contentful Paint
- Chrome Developers - LCP request discovery
- MDN Web Docs - HTMLImageElement: fetchPriority property