Si ja has aplicat CSS crític, minificació i caché del navegador, el següent nivell d'optimització són les pistes de recursos: preload, prefetch i preconnect.
Aquestes directives indiquen al navegador què descarregar abans, quina connexió obrir amb antelació i quins recursos pot portar en segon pla. Ben aplicades, redueixen la latència i milloren mètriques com l'LCP o el TTFB. Mal aplicades, dupliquen descàrregues i alenteixen la web. En aquesta guia repassem què fa cadascuna, quan convé usar-les en una web d'empresa i com comprovar que funcionen.
Què són preload, prefetch i preconnect
Les pistes de recursos són etiquetes al <head> que orienten el navegador sobre les prioritats:
preconnect: obre la connexió TCP/TLS amb un domini extern (CDN, fonts, analítica) abans que el navegador trobi aquest recurs a l'HTML.preload: descarrega immediatament un recurs crític de la pàgina actual (hero, font principal, CSS crític) amb alta prioritat.prefetch: descarrega en segon pla recursos que l'usuari podria necessitar a la següent navegació (pàgina de serveis, PDF, article següent del blog).
No substitueixen un bon CDN ni optimitzar imatges, però complementen aquestes millores quan la latència de xarxa o de tercers frena la càrrega.
Senyals que la teva web es beneficia de pistes de recursos
- PageSpeed Insights assenyala "Preconnect to required origins" o "Preload key requests".
- Fonts web o el hero triguen a aparèixer tot i tenir un bon hosting.
- Uses Google Fonts, Tag Manager, mapes o xat en dominis externs.
- L'LCP apunta a una imatge o font que arriba tard a la cascada de xarxa.
- Tens pàgines internes molt visitades des de la home i vols accelerar el següent clic.
- Després de la compressió Gzip/Brotli, la latència de connexió segueix sent el coll d'ampolla.
Com aplicar cada pista segons la teva web
Preconnect: obrir la porta abans de trucar
Utilitza'l per dominis que apareixen a gairebé totes les pàgines: CDN d'assets, Google Fonts, reproductors de vídeo o eines d'analítica. Un exemple habitual:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
No n'abusi: cada preconnect consumeix recursos. Limita't a 2–4 orígens realment crítics.
Preload: prioritzar el que defineix la primera impressió
Reserva preload per recursos imprescindibles a la pàgina actual: imatge hero, font del titular o CSS crític. Combina-ho amb CSS crític quan el bloqueig de renderització persisteix.
<link rel="preload" as="image" href="/storage/blog/hero.jpg" fetchpriority="high">
Prefetch: avançar la següent visita probable
Ideal per enllaços destacats del menú, landing de campanya o articles relacionats. El navegador descarrega en idle time, sense competir amb la pàgina actual. Evita-ho en mòbil amb dades limitades si no tens control fi.
Integració amb CMS i build modern
A WordPress, plugins de rendiment solen afegir preconnect automàticament. A Laravel, Vite o Next.js, configura les pistes a la plantilla base o al middleware de resposta. Documenta quin origen compleix quina funció per no duplicar pistes després de cada desplegament.
Errors freqüents en usar pistes de recursos
- Preload de recursos que no s'usen a la pàgina actual: malbaratament d'ample de banda.
- Duplicar preload i prefetch del mateix fitxer sense estratègia clara.
- Oblidar l'atribut
asen preload, cosa que impedeix al navegador prioritzar bé. - Preconnect a massa dominis, competint amb recursos realment crítics.
- Prefetch agressiu en mòbil, consumint dades del visitant sense benefici.
- No mesurar l'impacte en els Core Web Vitals després de cada canvi.
Checklist ràpid abans de publicar els canvis
- Audita la cascada de xarxa a DevTools i anota orígens externs recurrents.
- Afegeix
preconnectnomés a dominis que apareixen a la majoria de pàgines. - Preload de hero, font principal o CSS crític de plantilles clau (home, serveis).
- Prefetch opcional per rutes internes d'alta conversió.
- Verifica que el lazy loading segueix actiu en imatges below the fold.
- Mesura LCP, FCP i pes total abans i després amb PageSpeed o WebPageTest.
- Revisa a staging que formularis, mapes i vídeos segueixen carregant bé.
Conclusió: avança el que importa, no tot
Preload, prefetch i preconnect no són un pegat màgic: són una forma de comunicar prioritats al navegador. En webs corporatives amb fonts externes, analítica i assets en CDN, ben configurades poden retallar centenars de mil·lisegons a la primera càrrega. Si vols revisar el rendiment de la teva web o implementar pistes de recursos amb criteri, escriu-nos i t'ajudem a prioritzar el que més impacte tindrà.
