Scopri di più sugli hint relativi alle risorse rel=preconnect e rel=dns-prefetch e su come utilizzarli.
Prima che il browser possa richiedere una risorsa a un server, deve stabilire una connessione. Per stabilire una connessione sicura sono previsti tre passaggi:
Cercare il nome di dominio e risolverlo in un indirizzo IP.
Configura una connessione al server.
Cripta la connessione per motivi di sicurezza.
In ognuno di questi passaggi, il browser invia un'informazione a un server e il server invia una risposta. Questo viaggio, dall'origine alla destinazione e viceversa, è chiamato andata e ritorno.
A seconda delle condizioni della rete, un singolo andata e ritorno potrebbe richiedere molto tempo. Il processo di configurazione della connessione può comportare fino a tre round trip e più passaggi nei casi non ottimizzati.
Prendersi cura di tutto questo in anticipo rende le applicazioni molto più veloci. Questo post spiega come raggiungere questo obiettivo con due suggerimenti relativi alle risorse: <link rel=preconnect> e <link rel=dns-prefetch>.
Stringi legami tempestivi con rel=preconnect
I browser moderni fanno del loro meglio per prevedere le connessioni necessarie per una pagina, ma non possono prevederle tutte in modo affidabile. La buona notizia è che puoi dare loro un indizio (risorsa 😉).
Se aggiungi rel=preconnect a un <link>, indichi al browser che la tua pagina intende stabilire una connessione a un altro dominio e vuoi che la procedura venga avviata il prima possibile. Le risorse verranno caricate più rapidamente perché il processo di configurazione è già stato completato nel momento in cui il browser le richiede.
Gli hint delle risorse prendono il nome perché non sono istruzioni obbligatorie. Forniscono le informazioni relative a ciò che vuoi che avvenga, ma alla fine spetta al browser decidere se eseguirle. Impostare e mantenere una connessione aperta richiede molto lavoro, quindi il browser potrebbe scegliere di ignorare i suggerimenti relativi alle risorse o di eseguirli parzialmente, a seconda della situazione.
Per comunicare al browser le tue intenzioni è sufficiente aggiungere un tag <link> alla tua pagina:
<link rel="preconnect" href="https://example.com">
Puoi accelerare il tempo di caricamento di 100-500 ms stabilendo in anticipo connessioni con importanti origini di terze parti. Questi numeri possono sembrare piccoli, ma fanno la differenza nel modo in cui gli utenti percepiscono il rendimento delle pagine web.
Casi d'uso di rel=preconnect
Sapere da dove, ma non cosa stai recuperando
A causa delle dipendenze sottoposte al controllo delle versioni, a volte potresti trovarti in una situazione in cui sai che stai richiedendo una risorsa da una determinata CDN, ma non il percorso esatto.
L'altro caso comune è il caricamento delle immagini da una CDN di immagine, in cui il percorso esatto di un'immagine dipende dalle query supporti o dai controlli delle funzionalità di runtime sul browser dell'utente.
In queste situazioni, se la risorsa che recupererai è importante, conviene risparmiare il più tempo possibile eseguendo la preconnessione al server. Il browser non scaricherà il file finché la pagina non lo richiede, ma almeno è in grado di gestire in anticipo gli aspetti della connessione, evitando all'utente di attendere diversi round trip.
Streaming di contenuti multimediali
Un altro esempio in cui potresti voler risparmiare tempo nella fase di connessione, ma non necessariamente iniziare subito a recuperare i contenuti, è lo streaming di contenuti multimediali da un'origine diversa.
A seconda di come la pagina gestisce i contenuti trasmessi in streaming, può essere opportuno attendere che gli script vengano caricati e pronti per elaborare lo stream. La preconnessione ti aiuta a ridurre i tempi di attesa a un singolo round trip quando è tutto pronto per iniziare il recupero.
Come implementare rel=preconnect
Un modo per avviare una richiesta preconnect è aggiungere un tag <link> al <head> del documento.
<head>
<link rel="preconnect" href="https://example.com">
</head>
La preconnessione è efficace solo per domini diversi dal dominio di origine, pertanto non dovresti utilizzarla per il tuo sito.
Puoi anche avviare una preconnessione tramite l'intestazione HTTP Link:
Link: <https://example.com/>; rel=preconnect
Alcuni tipi di risorse, ad esempio i caratteri, vengono caricati in modalità anonima. Per questi, devi impostare l'attributo crossorigin con il suggerimento preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Se ometti l'attributo crossorigin, il browser esegue solo la ricerca DNS.
Risolvi in anticipo il nome di dominio con rel=dns-prefetch
Ricordate i siti per nome, ma i server li ricordano per indirizzo IP. Questo è il motivo per cui esiste il DNS (Domain Name System). Il browser utilizza il DNS per convertire il nome del sito in un indirizzo IP. Questo processo, la risoluzione del nome di dominio, è il primo passaggio per stabilire una connessione.
Se una pagina deve collegarsi a molti domini di terze parti, precollegarli tutti è controproduttivo. Il suggerimento preconnect è consigliato solo per le connessioni più critiche. Per tutto il resto, utilizza <link rel=dns-prefetch> per risparmiare tempo nel primo passaggio, la ricerca DNS, che in genere richiede 20-120 ms.
La risoluzione DNS viene avviata in modo simile a preconnect, aggiungendo un tag <link> al <head> del documento.
<link rel="dns-prefetch" href="http://example.com">
Il supporto dei browser per dns-prefetch è leggermente diverso dal preconnect supporto, pertanto dns-prefetch può fungere da alternativa per i browser che non supportano preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">Per implementare in modo sicuro la tecnica di riserva, utilizza tag link separati.
<link rel="preconnect dns-prefetch" href="http://example.com">L'implementazione di
dns-prefetch di riserva nello stesso tag <link> causa un bug in Safari in cui preconnect viene annullato.
Effetto sulla Largest Contentful Paint (LCP)
L'utilizzo di dns-prefetch e preconnect consente ai siti di ridurre il tempo necessario per connettersi a un'altra origine. L'obiettivo finale è ridurre al minimo il tempo per caricare una risorsa da un'altra origine.
Per quanto riguarda la Largest Contentful Paint (LCP), è meglio che le risorse siano immediatamente individuabili, poiché i candidati LCP sono una parte fondamentale dell'esperienza utente. Un valore fetchpriority pari a "high" sulle risorse LCP può migliorare ulteriormente questo comportamento segnalando al browser l'importanza di questo asset, in modo che possa recuperarlo in anticipo.
Se non è possibile rendere immediatamente rilevabili gli asset LCP, un collegamento a preload, anch'esso con il valore fetchpriority pari a "high", consente comunque al browser di caricare la risorsa il prima possibile.
Se nessuna di queste opzioni è disponibile, poiché la risorsa esatta non sarà nota fino a una fase successiva del caricamento della pagina, puoi utilizzare preconnect sulle risorse multiorigine per ridurre il più possibile l'impatto del rilevamento tardivo della risorsa.
Inoltre, preconnect costa meno di preload in termini di utilizzo della larghezza di banda, ma non è comunque privo di rischi. Come nel caso di un numero eccessivo di suggerimenti preload, un numero eccessivo di suggerimenti preconnect consuma comunque larghezza di banda quando sono interessati i certificati TLS. Fai attenzione a non precollegarti a troppe origini, poiché ciò potrebbe causare un conflitto di larghezza di banda.
Conclusione
Questi due suggerimenti relativi alle risorse sono utili per migliorare la velocità delle pagine se sai che a breve scaricherai qualcosa da un dominio di terze parti, ma non conosci l'URL esatto della risorsa. Alcuni esempi sono le CDN che distribuiscono librerie, immagini o caratteri JavaScript. Fai attenzione ai vincoli, usa preconnect solo per le risorse più importanti, affidati a dns-prefetch per il resto e misura sempre l'impatto nel mondo reale.