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 dalla maggior parte dei browser. Vedi
Compatibilità del browser.
Migliora la velocità di caricamento delle pagine con la preconnessione
Potresti aggiungere hint delle risorse preconnect o dns-prefetch
per connetterti in anticipo a importanti origini di terze parti.
<link rel="preconnect"> comunica al browser che la tua pagina intende stabilire una connessione a un'altra origine e che vuoi che la procedura venga avviata il prima possibile.
Stabilire le connessioni spesso richiede molto tempo nelle 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.
Prendersi cura di tutto questo 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 viene trascorso ad aspettare, anziché a scambiare dati.
Per comunicare al browser la tua intenzione è sufficiente aggiungere un tag link alla tua pagina:
<link rel="preconnect" href="https://example.com">
Questo indica al browser che la pagina intende connettersi a example.com e recuperare contenuti da lì.
Tieni presente che sebbene <link rel="preconnect"> sia economico,
può comunque richiedere tempo di CPU prezioso, in particolare per le connessioni sicure.
Ciò è particolarmente utile se la connessione non viene utilizzata entro 10 secondi,
quando il browser la chiude, sprecando tutto il lavoro di connessione iniziale.
In generale, prova a usare <link rel="preload">,
perché è un ritocco più completo delle prestazioni,
ma tieni <link rel="preconnect"> nella barra degli strumenti per casi limite come:
- Caso d'uso: sapere da dove proviene, ma non cosa stai recuperando
- Caso d'uso: streaming multimediale
<link rel="dns-prefetch"> è un altro tipo di <link> correlato alle connessioni.
Questo gestisce solo la ricerca DNS,
ma grazie al supporto di un browser più ampio, potrebbe fungere da fallback.
Puoi utilizzarlo esattamente allo stesso modo:
<link rel="dns-prefetch" href="https://example.com" />.
Indicazioni specifiche per lo stack
Drupal
Utilizza un modulo che supporti gli hint delle risorse dello user agent per installare e configurare gli hint di preconnessione o precaricamento DNS.
Magento
Modifica il layout del tema e aggiungi hint di preconnessione o precaricamento DNS delle risorse.