Scopri di più sui suggerimenti per le risorse `rel=preconnect` e `rel=dns-prefetch` e su come utilizzarli.
Prima che il browser possa richiedere una risorsa da un server, deve stabilire una connessione. La creazione di una connessione sicura prevede tre passaggi:
Cerca il nome di dominio e risolvilo in un indirizzo IP.
Configura una connessione al server.
Cripta la connessione per la sicurezza.
In ognuno di questi passaggi, il browser invia un dato a un server e il server invia una risposta. Questo viaggio, dal luogo di partenza alla destinazione e viceversa, è chiamato andata e ritorno.
A seconda delle condizioni di rete, un singolo round trip potrebbe richiedere molto tempo. La procedura di configurazione della connessione potrebbe comportare fino a tre round trip e anche di più in casi non ottimizzati.
Se ti occupi di tutto in anticipo, le applicazioni sembreranno molto più veloci. Questo post spiega come ottenere questo risultato con due suggerimenti per le risorse: <link rel=preconnect> e <link rel=dns-prefetch>.
Stabilire connessioni anticipate con rel=preconnect
I browser moderni fanno del loro meglio per prevedere le connessioni di cui una pagina avrà bisogno, ma non possono prevederle tutte in modo affidabile. La buona notizia è che puoi dare loro un suggerimento (per le risorse 😉).
L'aggiunta di rel=preconnect a un <link> informa il browser che la tua pagina intende stabilire una connessione a un altro dominio e che vuoi che la procedura inizi il prima possibile. Le risorse verranno caricate più rapidamente perché la procedura di configurazione è già stata completata quando il browser le richiede.
I suggerimenti per le risorse prendono il nome perché non sono istruzioni obbligatorie. Forniscono informazioni su ciò che vuoi che accada, ma in definitiva spetta al browser decidere se eseguirle. La configurazione e il mantenimento di una connessione aperta richiedono molto lavoro, pertanto il browser potrebbe scegliere di ignorare i suggerimenti per le risorse o di eseguirli parzialmente a seconda della situazione.
Informare il browser della tua intenzione è semplice come aggiungere un tag <link> alla pagina:
<link rel="preconnect" href="https://example.com">
Puoi velocizzare il tempo di caricamento di 100-500 ms stabilendo connessioni anticipate a origini di terze parti importanti. Questi numeri potrebbero sembrare piccoli, ma fanno la differenza nel modo in cui gli utenti percepiscono il rendimento delle pagine web.
Casi d'uso per rel=preconnect
Sapere da dove, ma non cosa stai recuperando
A causa delle dipendenze con controllo della versione, a volte ti ritrovi 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 multimediali o dai controlli delle funzionalità di runtime sul browser dell'utente.
In queste situazioni, se la risorsa che recupererai è importante, ti consigliamo di risparmiare il più tempo possibile pre-connettendoti al server. Il browser non scaricherà il file finché la pagina non lo richiede, ma almeno può gestire gli aspetti della connessione in anticipo, evitando all'utente di attendere diversi round trip.
Streaming
Un altro esempio in cui potresti voler risparmiare tempo nella fase di connessione, ma non necessariamente iniziare subito a recuperare i contenuti, è quando esegui lo streaming di contenuti multimediali da un'origine diversa.
A seconda di come la pagina gestisce i contenuti in streaming, potresti voler attendere che gli script siano stati caricati e siano pronti per elaborare lo stream. La pre-connessione ti aiuta a ridurre il tempo di attesa a un singolo round trip quando sei pronto per iniziare il recupero.
Come implementare rel=preconnect
Un modo per avviare un preconnect è aggiungere un tag <link> all'elemento <head> del documento.
<head>
<link rel="preconnect" href="https://example.com">
</head>
La pre-connessione è efficace solo per i domini diversi dal dominio di origine, quindi non devi utilizzarla per il tuo sito.
Puoi anche avviare una pre-connessione tramite l'intestazione HTTP Link header:
Link: <https://example.com/>; rel=preconnect
Alcuni tipi di risorse, come 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.
Risolvere il nome di dominio in anticipo con rel=dns-prefetch
Ricordi i siti per nome, ma i server li ricordano per indirizzo IP. Per questo motivo esiste il Domain Name System (DNS). Il browser utilizza il DNS per convertire il nome del sito in un indirizzo IP. Questa procedura, la risoluzione del nome di dominio, è il primo passaggio per stabilire una connessione.
Se una pagina deve stabilire connessioni a molti domini di terze parti, la pre-connessione di tutti è controproducente. Il suggerimento preconnect è ideale solo per le connessioni più critiche. Per tutte le altre, utilizza <link rel=dns-prefetch> per risparmiare tempo nel primo passaggio, la ricerca DNS, che in genere richiede circa 20-120 ms.
La risoluzione DNS viene avviata in modo simile a preconnect: aggiungendo un tag <link> all'elemento <head> del documento.
<link rel="dns-prefetch" href="http://example.com">
Il supporto del browser per dns-prefetch è leggermente diverso dal supporto di preconnect , quindi dns-prefetch può fungere da fallback 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 nello stesso tag <link> causa un bug in Safari in cui preconnect viene annullato.
Effetto su 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 di caricamento di una risorsa da un'altra origine.
Per quanto riguarda Largest Contentful Paint (LCP), è preferibile che le risorse siano immediatamente rilevabili, poiché i candidati LCP sono parti fondamentali dell'esperienza utente. Un valore fetchpriority di "high" sulle risorse LCP può migliorare ulteriormente questo aspetto segnalando l'importanza di questa risorsa al browser in modo che possa recuperarla in anticipo.
Se non è possibile rendere immediatamente rilevabili le risorse LCP, un preload link, 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 quando non verrà caricato il caricamento pagina, puoi utilizzare preconnect sulle risorse cross-origin per ridurre al minimo l'impatto della rilevazione tardiva della risorsa.
Inoltre, preconnect è meno costoso di preload in termini di utilizzo della larghezza di banda, ma non è privo di rischi. Come nel caso di suggerimenti preload eccessivi, i suggerimenti preconnect eccessivi consumano comunque larghezza di banda per quanto riguarda i certificati TLS. Fai attenzione a non pre-connetterti a troppe origini, perché potresti causare una contesa della larghezza di banda.
Conclusione
Questi due suggerimenti per le risorse sono utili per migliorare la Page Speed quando sai che scaricherai a breve qualcosa da un dominio di terze parti, ma non conosci l'URL esatto della risorsa. Alcuni esempi sono le CDN che distribuiscono librerie JavaScript, immagini o caratteri. Tieni presente i vincoli, utilizza preconnect solo per le risorse più importanti, affidati a dns-prefetch per le altre e misura sempre l'impatto nel mondo reale.