Preload, preconnect e fetchpriority: suggerire le priorità

Il browser è bravo a decidere da solo cosa scaricare e in che ordine, ma non è onnisciente. Non sa che il font del titolo è dichiarato in fondo a un foglio di stile, né che lo script di pagamento verrà caricato da un dominio esterno tra un istante. I suggerimenti sulle risorse, detti resource hints, servono a colmare questo vuoto. Usati bene accorciano il caricamento; usati male lo peggiorano, perché ogni priorità data a una risorsa è tolta a un'altra.

dns-prefetch: risolvere il nome in anticipo

<link rel="dns-prefetch" href="//api.servizio-esterno.example">

Chiede al browser di risolvere subito il nome a dominio, così quando servirà davvero la ricerca DNS sarà già fatta. È il suggerimento più leggero: costa pochissimo e ha senso per domini che verranno usati più avanti nella pagina, per esempio quello di un widget caricato dopo un'interazione.

preconnect: aprire la connessione

<link rel="preconnect" href="https://font-esterni.example" crossorigin>

Va oltre: risolve il DNS, apre la connessione e completa la negoziazione TLS. Su reti mobili può far risparmiare diverse centinaia di millisecondi alla prima risorsa di quel dominio. Due avvertenze:

• l'attributo crossorigin deve corrispondere a come verrà richiesta la risorsa. I font si scaricano sempre in modalità CORS, quindi il preconnect verso un dominio di font va fatto con crossorigin; altrimenti il browser apre una connessione che poi non può riutilizzare;
• le connessioni aperte e non usate vengono chiuse dopo alcuni secondi e consumano risorse. Conviene limitarsi a due o tre domini davvero critici.

preload: scaricare subito una risorsa precisa

<link rel="preload" href="/font/titoli.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/copertina.avif" as="image" fetchpriority="high">

Il preload ordina di scaricare una risorsa specifica con la priorità adatta al suo tipo, indicato da as. È utile per risorse importanti che il browser scoprirebbe tardi:

• font dichiarati dentro un CSS;
• immagini di sfondo definite nel CSS e usate come elemento principale;
• script caricati dinamicamente da un altro script;
• il CSS di un componente importato con @import.

Gli errori tipici sono tre. Primo: precaricare senza as, o con il valore sbagliato, così la risorsa viene scaricata due volte. Secondo: precaricare risorse che poi non vengono usate entro pochi secondi; Chrome lo segnala in console con un avviso. Terzo: precaricare troppe cose, trasformando il preload in un modo di dire al browser «tutto è urgente», che equivale a dire che niente lo è.

Preload di immagini responsive

Se l'immagine principale usa srcset, anche il preload deve conoscere le varianti, altrimenti scarica quella sbagliata:

<link rel="preload" as="image"
      imagesrcset="/img/c-640.avif 640w, /img/c-1280.avif 1280w"
      imagesizes="100vw">

fetchpriority: regolare la priorità

L'attributo fetchpriority accetta high, low o auto e si applica a immagini, script, link e alle chiamate fetch(). Non cambia quando il browser scopre la risorsa, ma quanto la considera importante rispetto alle altre. Gli usi più efficaci:

Per le immagini il beneficio è spesso evidente: di base il browser assegna priorità bassa alle immagini finché il layout non conferma che sono visibili, e solo dopo la alza. Indicando subito high per l'immagine principale si elimina quell'attesa.

modulepreload per JavaScript a moduli

Per applicazioni che usano moduli ES esiste una variante specifica:

<link rel="modulepreload" href="/js/app.js">

Oltre a scaricare il file, il browser lo analizza e, a seconda dell'implementazione, può anticipare anche le sue dipendenze, accorciando la catena di import.

Come capire se servono

Il metodo è sempre lo stesso: osservare il waterfall. Se una risorsa critica parte tardi perché scoperta tardi, il preload aiuta. Se parte presto ma resta a lungo in coda con priorità bassa, serve fetchpriority. Se mostra una lunga fase di connessione verso un dominio esterno, valuta il preconnect. Dopo ogni modifica, misura di nuovo: capita che un preload di un font acceleri il titolo ma rallenti l'immagine principale, perché le due risorse si contendono la stessa banda.

In sintesi

• dns-prefetch risolve il nome in anticipo, costa poco ed è adatto a domini usati più tardi.
• preconnect apre connessione e TLS; limitalo a pochi domini e rispetta crossorigin.
• preload serve per risorse critiche scoperte tardi; indica sempre as.
• fetchpriority regola l'importanza relativa, utilissimo sull'immagine LCP.
• Ogni suggerimento toglie priorità ad altro: verifica sempre l'effetto nel waterfall.