Precollegati alle origini richieste

La sezione Opportunità del report Lighthouse elenca tutte le richieste chiave che non danno ancora priorità alle richieste di recupero con <link rel=preconnect>:

Uno screenshot del controllo Precollega a origini richieste di Lighthouse

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:

<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.

Risorse