La sezione Opportunità del report Lighthouse elenca tutte le richieste chiave
che non danno ancora priorità alle richieste di recupero con <link rel=preconnect>:
Compatibilità del browser
<link rel=preconnect> è supportato sulla maggior parte dei browser. Consulta
Compatibilità del browser.
Migliorare la velocità di caricamento delle pagine con il preconnect
Potresti aggiungere hint delle risorse preconnect o dns-prefetch
per stabilire connessioni iniziali con importanti origini di terze parti.
<link rel="preconnect"> comunica al browser che la tua pagina intende stabilire una connessione con un'altra origine e che vuoi che la procedura venga avviata il prima possibile.
Stabilire connessioni spesso richiede molto tempo in reti lente, in particolare quando si tratta di connessioni sicure, in quanto può comportare ricerche DNS, reindirizzamenti e diversi round trip al server finale che gestisce la richiesta dell'utente.
Prevenire tutto in anticipo può rendere la tua applicazione molto più veloce per l'utente senza influire negativamente sull'uso della larghezza di banda. La maggior parte del tempo per stabilire una connessione è dedicata ad attendere, piuttosto che a scambiare dati.
Comunicare al browser la tua intenzione è semplice come aggiungere un tag link alla pagina:
<link rel="preconnect" href="https://example.com">
In questo modo, il browser sa che la pagina intende collegarsi a example.com e recuperare i contenuti da lì.
Tieni presente che, anche se <link rel="preconnect"> è piuttosto economico, può comunque occupare tempo prezioso della CPU, in particolare su connessioni sicure.
Questo è particolarmente grave se la connessione non viene utilizzata entro 10 secondi, poiché il browser la chiude, sprecando tutto il lavoro di connessione iniziale.
In generale,
prova a utilizzare <link rel="preload">,
poiché è un'ottimizzazione delle prestazioni più completa,
ma tieni <link rel="preconnect"> a portata di mano per i casi limite come:
- Caso d'uso: sapere da dove proviene, ma non cosa stai recuperando
- Caso d'uso: streaming di contenuti multimediali
<link rel="dns-prefetch"> è un altro tipo di <link> correlato alle connessioni.
Gestisce solo la ricerca DNS, ma ha un supporto più ampio per i browser, quindi può essere un'opzione di riserva utile.
Puoi utilizzarlo nello stesso modo:
<link rel="dns-prefetch" href="https://example.com" />.
Indicazioni specifiche per lo stack
Drupal
Puoi aggiungere hint delle risorse Preconnect o dns-prefetch installando e configurando un modulo che fornisce servizi per gli hint delle risorse dello user agent.
Magento
Modifica il layout dei temi e aggiungi hint di risorse di precollegamento o prelettura DNS.