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.
Migliora la velocità di caricamento delle pagine con preconnessione
Valuta la possibilità di aggiungere preconnect o dns-prefetch hint delle risorse
per stabilire i collegamenti iniziali con importanti origini di terze parti.
<link rel="preconnect"> comunica al browser che la tua pagina vuole
per stabilire una connessione con un'altra origine,
e che la procedura venga avviata il prima possibile.
Stabilire connessioni richiede spesso molto tempo in reti lente, in particolare per le connessioni sicure, poiché potrebbero comportare ricerche DNS, reindirizzamenti e diversi round trip al server finale che gestisce la richiesta dell'utente.
Prendersi cura di tutto in anticipo può rendere la tua applicazione molto più rapida per l'utente senza influire negativamente sull'utilizzo 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, basta aggiungere un tag link alla tua pagina:
<link rel="preconnect" href="https://example.com">
In questo modo il browser saprà che la pagina intende
per collegarti a example.com e recuperare contenuti da lì.
Tieni presente che sebbene <link rel="preconnect"> sia piuttosto economico,
ma può comunque richiedere tempo di CPU prezioso, in particolare per le connessioni sicure.
Ciò è particolarmente peggiorato se la connessione non viene utilizzata entro 10 secondi
quando il browser lo chiude, sprecando tutto il lavoro di connessione iniziale.
In generale,
prova a usare <link rel="preload">,
perché è una modifica più completa del rendimento,
ma tieni <link rel="preconnect"> nella cintura degli strumenti 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.
che gestisce solo la ricerca DNS,
ma offre un supporto più ampio dei browser, quindi può servire come un bel fallback.
Puoi utilizzarlo nello stesso modo:
<link rel="dns-prefetch" href="https://example.com" />.
Indicazioni specifiche per stack
Drupal
Utilizza un modulo che supporta gli hint delle risorse dello user agent in modo da poter installare e configurare gli hint delle risorse di precaricamento o di precaricamento DNS.
Magento
Modificare il layout dei temi e aggiungere hint di preconnessione o di precaricamento DNS.