Origini per il preconnect

Silktide controlla se la tua pagina potrebbe caricarsi più velocemente comunicando in anticipo al browser quali altri server utilizzerà a breve. Aprire queste connessioni in anticipo significa che i file di terze parti iniziano a essere scaricati prima.

Prima che un browser possa scaricare qualsiasi elemento da un nuovo server, ad esempio un servizio di font, una o un provider di analytics, deve individuare l'indirizzo del server, aprire una connessione e negoziare la crittografia. Questa configurazione richiede diversi round trip di rete e, normalmente, il browser la avvia solo quando individua per la prima volta un file necessario da quel server, cosa che può avvenire tardi durante il caricamento della pagina.

Perché è importante

La configurazione della connessione a un singolo server può costare centinaia di millisecondi su una connessione mobile e una pagina tipica comunica con diversi server di terze parti. Quando questa configurazione inizia tardi, perché il file che la richiede è referenziato in profondità in un foglio di stile o in uno script, il ritardo influisce direttamente sui contenuti visibili, come font e immagini.

Un suggerimento preconnect sposta questo costo all'inizio del caricamento, sovrapponendolo alle attività che il browser stava comunque eseguendo. È una riga di per ogni server e non comporta modifiche visive alla pagina.

Come risolvere il problema

Aggiungi un suggerimento preconnect nell'elemento <head> della pagina per ogni server importante segnalato dal controllo:

<!-- Apri la connessione prima che il browser scopra di averne bisogno -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Includi l'attributo crossorigin per i server che ne hanno bisogno: i font lo richiedono sempre.
Usa il preconnect solo per i server importanti per la pagina visibile, ad esempio quelli che ospitano i font, le immagini o gli script essenziali. Ogni connessione aperta consuma risorse del dispositivo del visitatore, quindi alcuni suggerimenti sono utili, mentre decine possono essere dannosi.
Per i server meno importanti, rel="dns-prefetch" è un suggerimento meno costoso che esegue in anticipo solo la ricerca dell'indirizzo.

Come esegue il controllo Silktide

Carica la pagina in un browser reale, utilizzando il tipo di dispositivo, la velocità di connessione e la posizione di test configurati per i test di velocità.
Individua i server da cui la pagina scarica contenuti quando la configurazione della connessione ha ritardato il download e non era presente alcun suggerimento per una connessione anticipata.
Segnala ogni server indicando il tempo stimato che un suggerimento preconnect consentirebbe di risparmiare.
Valuta la pagina in base al risparmio totale stimato: un risparmio di circa 100 millisecondi comporta una riduzione della valutazione, mentre un risparmio di almeno 200 millisecondi è considerato scarso.

Risoluzione dei problemi

Ho aggiunto il suggerimento, ma il problema continua a essere segnalato

Controlla l'indirizzo esatto: il suggerimento deve corrispondere al server da cui provengono effettivamente i file, incluso il protocollo e qualsiasi sottodominio (https://fonts.gstatic.com non è https://fonts.googleapis.com). Anche i font richiedono crossorigin nel suggerimento: senza questo attributo, il browser apre il tipo di connessione sbagliato e poi la scarta.

Devo usare il preconnect per ogni server di terze parti?

No. I browser limitano il numero di connessioni anticipate che accettano e ognuna consuma risorse del dispositivo del visitatore. Riserva il preconnect ai pochi server i cui file determinano ciò che i visitatori vedono per primo.