La sezione Opportunità del report Lighthouse elenca tutte le richieste di chiavi
che non danno ancora la priorità alle richieste di recupero con <link rel=preconnect>:
Compatibilità del browser
<link rel=preconnect> è supportato dalla maggior parte dei browser. Consulta la sezione
Compatibilità del browser.
Migliorare la velocità di caricamento delle pagine con il preconnect
Potresti aggiungere hint delle risorse preconnect o dns-prefetch
per collegarti anticipatamente 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 inizi il prima possibile.
Stabilire le connessioni spesso richiede molto tempo nelle reti lente, soprattutto quando si tratta di connessioni sicure, in quanto potrebbe comportare ricerche DNS, reindirizzamenti e diversi round trip al server finale che gestisce la richiesta dell'utente.
Se ti occupi di tutto questo in anticipo, l'applicazione risulterà molto più reattiva per l'utente senza influire negativamente sull'utilizzo della larghezza di banda. La maggior parte del tempo necessario per stabilire una connessione viene speso in attesa, anziché nello scambio di 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
connettersi a example.com e recuperare i contenuti da lì.
Tieni presente che, sebbene <link rel="preconnect"> sia piuttosto economico,
può comunque occupare tempo prezioso della CPU, in particolare sulle connessioni sicure.
Questo è particolarmente negativo se la connessione non viene utilizzata entro 10 secondi,
in quanto il browser la chiude, sprecando tutto il lavoro di connessione iniziale.
In generale,
prova a utilizzare <link rel="preload">,
in quanto è una modifica delle prestazioni più completa,
ma tieni <link rel="preconnect"> nella tua cassetta degli attrezzi per i casi limite come:
- Caso d'uso: sapere da dove, 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 del browser, quindi può fungere da fallback.
Lo utilizzi esattamente nello stesso modo:
<link rel="dns-prefetch" href="https://example.com" />.
Indicazioni specifiche per lo stack
Drupal
Puoi aggiungere hint di risorse Preconnect o dns-prefetch installando e configurando un modulo che offre servizi per gli hint delle risorse user agent.
Magento
Modifica il layout dei temi e aggiungi hint di precollegamento o prelettura DNS delle risorse.