Scopri di più sugli hint delle risorse rel=preconnect e rel=dns-prefetch e come utilizzarli.
Prima che il browser possa richiedere una risorsa a un server, deve stabilire una connessione. Per stabilire una connessione sicura sono necessari tre passaggi:
Cerca il nome di dominio e risolvilo 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 dato a un server che, a sua volta, invia una risposta. Questo viaggio, dal luogo di partenza alla destinazione e viceversa, è chiamato andata e ritorno.
A seconda delle condizioni della rete, un singolo round trip può richiedere molto tempo. Il processo di configurazione della connessione può comportare fino a tre viaggi di andata e ritorno, e molto altro nei casi non ottimizzati.
Prendersi cura di tutto questo in anticipo rende le applicazioni molto più veloci. Questo post spiega come ottenere questo risultato con due suggerimenti di risorse: <link rel=preconnect> e <link rel=dns-prefetch>.
Stabilisci contatti iniziali 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 😉).
L'aggiunta di rel=preconnect a un <link> comunica al browser che la tua pagina intende stabilire una connessione a un altro dominio e che desideri che la procedura venga avviata il prima possibile. Le risorse verranno caricate più rapidamente perché il processo di configurazione è già stato completato quando il browser le richiede.
I hint delle risorse prendono il nome perché non sono istruzioni obbligatorie. Forniscono informazioni su ciò che ti aspetti che succeda, ma in ultima analisi spetta al browser decidere se eseguirle. Configurare e mantenere aperta una connessione richiede molto lavoro, quindi il browser potrebbe scegliere di ignorare i suggerimenti delle risorse o di eseguirli parzialmente, a seconda della situazione.
Comunicare al browser le tue intenzioni è semplice, basta 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 anticipatamente connessioni a importanti origini di terze parti. Questi numeri possono sembrare ridotti, ma fanno la differenza nel modo in cui gli utenti percepiscono le prestazioni delle pagine web.
Casi d'uso di rel=preconnect
Sapere da dove si parte, ma non cosa stai recuperando
A causa delle dipendenze del controllo delle versioni, a volte potresti trovarti in una situazione in cui sai che richiederai una risorsa da una determinata CDN, ma non il percorso esatto.
L'altro caso comune è il caricamento di immagini da una CDN di immagini, 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 recuperi è importante, vuoi risparmiare il più possibile tempo 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 dover attendere diversi viaggi di andata e ritorno.
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, è quando lo streaming di contenuti multimediali da un'origine diversa.
A seconda di come la tua pagina gestisce i contenuti trasmessi in streaming, potrebbe essere opportuno attendere che gli script vengano caricati e siano pronti per elaborare lo stream. La preconnessione consente di ridurre i tempi di attesa di un singolo round trip quando è tutto pronto per iniziare il recupero.
Come implementare rel=preconnect
Un modo per avviare un preconnect è aggiungere un tag <link> a <head> del documento.
<head>
<link rel="preconnect" href="https://example.com">
</head>
La preconnessione è efficace solo per domini diversi dal dominio di origine, quindi 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 casi 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
Ricordi i siti per nome, ma i server li ricordano in base agli indirizzi 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. Il processo di risoluzione del nome di dominio è il primo passo per stabilire una connessione.
Se una pagina deve effettuare collegamenti a molti domini di terze parti, precollegarli tutti è controproducente. Il suggerimento preconnect è consigliato solo per le connessioni più critiche. Per tutto il resto, utilizza <link rel=dns-prefetch> per risparmiare tempo sul primo passaggio, la ricerca DNS, che richiede in genere circa 20-120 ms.
La risoluzione DNS viene avviata in modo simile a preconnect, aggiungendo un tag <link> a <head> del documento.
<link rel="dns-prefetch" href="http://example.com">
Il supporto dei browser per dns-prefetch è leggermente diverso dal supporto di preconnect, quindi dns-prefetch può fungere da riserva per i browser che non supportano preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
dns-prefetch di riserva nello stesso tag <link> causa un bug in Safari per cui preconnect viene annullato.
Effetto sulla visualizzazione più grande con contenuti (LCP)
L'utilizzo di dns-prefetch e preconnect consente ai siti di ridurre la quantità di tempo necessaria per connettersi a un'altra origine. L'obiettivo finale è ridurre il più possibile il tempo di caricamento di una risorsa da un'altra origine.
Per quanto riguarda la visualizzazione più grande dei contenuti (LCP), è meglio che le risorse siano immediatamente rilevabili, dal momento che i candidati LCP sono parti fondamentali dell'esperienza utente. Un valore fetchpriority di "high" sulle risorse LCP può migliorare ulteriormente questa situazione segnalando l'importanza dell'asset al browser, in modo che possa recuperarlo tempestivamente.
Laddove non è possibile rendere immediatamente rilevabili gli asset LCP, un link preload, anch'esso con il valore fetchpriority di "high", consente comunque al browser di caricare la risorsa il prima possibile.
Se nessuna di queste opzioni è disponibile, perché 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 è meno costoso di preload in termini di utilizzo della larghezza di banda, ma non è comunque privo di rischi. Come nel caso del numero eccessivo di suggerimenti preload, un numero eccessivo di suggerimenti preconnect consuma comunque larghezza di banda se 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 sulle risorse sono utili per migliorare la velocità delle pagine quando sai che scaricherai presto 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. Presta attenzione ai vincoli, utilizza preconnect solo per le risorse più importanti, affidati a dns-prefetch per le altre risorse e misura sempre l'impatto nel mondo reale.