Has optimitzat imatges, activat la memòria cau i revisat el CSS crític, però el teu LCP segueix per sobre del recomanat. De vegades el problema no és el pes del fitxer, sinó l'ordre en què el navegador decideix què descarregar primer. Aquí entra fetchpriority: un atribut HTML que indica al navegador quin recurs mereix prioritat de xarxa.
A l'octubre de 2026, amb xarxes mòbils saturades i webs d'empresa plenes de scripts de tercers, marcar bé la imatge o el vídeo hero pot retallar centenars de mil·lisegons sense tocar el disseny. T'explicam què fa fetchpriority, quan usar-lo (i quan no) i com encaixa amb preload i lazy loading.
Què és fetchpriority i per què importa en una web corporativa
fetchpriority és un atribut que pots afegir a etiquetes com <img>, <link> o <script>. Accepta tres valors: high, low i auto (per defecte). No substitueix una bona arquitectura de recursos, però orienta el navegador quan diversos elements competeixen per ample de banda alhora.
En una landing de serveis, la foto de l'equip o el mockup del producte sol ser l'element LCP. Si el navegador prioritza abans un banner de cookies, un widget de xat o imatges del peu de pàgina, l'usuari percep la web com lenta encara que el pes total sigui raonable.
fetchpriority="high" en aquesta imatge hero envia un senyal clar: descarrega això abans que la resta d'imatges no crítiques. És compatible amb els navegadors moderns i no requereix JavaScript addicional.
Relació amb rendiment i Core Web Vitals
Google segueix mesurant l'experiència real amb LCP, INP i CLS. fetchpriority impacta sobretot en LCP quan el recurs més gran és una imatge o un pòster de vídeo. No millora el TTFB ni el JavaScript bloquejant, però pot avançar la pintura de l'element principal.
Combina-ho amb el que ja hauries de tenir en marxa:
- Preload del recurs LCP quan la URL és estable (vegeu preload, prefetch i preconnect).
- fetchpriority="high" en la mateixa imatge si és en l'HTML inicial.
- width i height explícits per evitar salts de layout (CLS).
- formats moderns (WebP/AVIF) i mides adequades al viewport.
Evita senyals contradictoris: preload + lazy loading en la mateixa URL, o fetchpriority high en desenes d'imatges.
fetchpriority davant lazy loading i preload
Són complements, no alternatives:
- lazy loading (
loading="lazy"): retrassa imatges fora de pantalla. Ús en galeries, blog i peu de pàgina. Mai en la imatge LCP above the fold. - preload (
<link rel="preload" as="image">): reserva espai a la cua de xarxa abans que el parser trobi el<img>. - fetchpriority: ajusta la prioritat relativa dins la cua. Molt útil quan ja tens moltes imatges en l'HTML.
Si el hero està en el primer bloc de l'HTML, sol bastar fetchpriority="high" + loading="eager". Si el hero el genera un slider en JavaScript, revisa primer l'ordre de càrrega del script.
Casos pràctics en webs d'empresa
Portada amb foto d'equip o instalacions. Una sola <img fetchpriority="high"> al banner principal.
Catàleg o blog amb llistats. Mantén lazy en miniatures i fetchpriority="low" en avatars decoratius si competeixen amb la capçalera de producte.
Vídeo hero amb pòster. El pòster sovint és el LCP; aplica high al pòster.
Logotips del menú. No facis servir high en elements petits.
Implementació pas a pas
- Identifica el LCP en Chrome DevTools o PageSpeed Insights.
- Confirma que el recurs és una imatge visible a la primera pantalla.
- Afegeix
fetchpriority="high"només a aquesta etiqueta. - Treu
loading="lazy"del mateix element. - Desplega i compara LCP en camp després d'una o dues setmanes.
Errors freqüents amb fetchpriority
- Marcar high totes les imatges del slider. Només una ha de ser LCP.
- High en imatges lazy. Contradicció amb resultats impredictibles.
- Oblidar el mòbil. El LCP pot canviar amb
srcset. - Confiar només en l'atribut. Optimitza abans (WebP i AVIF).
- Ignorar tercers. Revisa scripts de tercers.
Quines millores esperar (Referències 2026)
En webs corporatives amb hero pesada i moltes miniatures, és habitual veure 100–400 ms menys en LCP de laboratori en passar la hero a fetchpriority high. En camp, l'impacte es nota sobretot en 4G i en la primera visita sense memòria cau.
Checklist abans del proper desplegament
- Un sol recurs LCP amb
fetchpriority="high". - Sense
loading="lazy"en aquest recurs. - Dimensions width/height per evitar CLS.
- Lazy en imatges below the fold.
- Mesura repetida en mòbil i escriptori.
Conclusió
fetchpriority és un ajuste fi i de baix risc que alinea la prioritat de xarxa amb el que l'usuari veu primer. En webs d'empresa amb hero visual fort, és una de les palanques més ràpides per millorar LCP després de comprimir imatges i ordenar CSS crític.
Si vols una revisió de la teva portada i quin recurs actua com LCP avui, a aatsoft auditem rendiment i priorització de recursos sense sacrificar la teva identitat visual.
