ProHoster > blog > amministrazione > Precaricamento, precaricamento e altri tag

Precaricamento, precaricamento e altri tag

C'è molti modi per migliorare le prestazioni web. Uno di questi è precaricare i contenuti che saranno necessari in seguito. Pre-elaborazione CSS, pre-rendering della pagina intera o risoluzione del nome di dominio. Facciamo tutto in anticipo e quindi visualizziamo immediatamente il risultato! Figo.

Ciò che è ancora più interessante è che è implementato in modo molto semplice. Cinque tag dare al browser un comando per eseguire azioni preliminari:

<link rel="prefetch" href="/it/style.css" as="style" />
<link rel="preload" href="/it/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />


Spieghiamo brevemente a cosa servono e quando utilizzarli.

Salta a: precarico · prefetch · preconnettersi · precaricamento DNS · prerendering

precarico

<link rel= "preload"> dice al browser di caricare e memorizzare nella cache una risorsa (come uno script o un foglio di stile) il prima possibile. Ciò è utile quando è necessaria una risorsa pochi secondi dopo il caricamento della pagina e desideri accelerare il processo.

Il browser non fa nulla con la risorsa dopo il caricamento. Gli script non vengono eseguiti, i fogli di stile non vengono applicati. La risorsa viene semplicemente memorizzata nella cache e resa immediatamente disponibile su richiesta.

sintassi

<link rel="preload" href="/it/style.css" as="style" />

href punta alla risorsa che desideri scaricare.

as può essere qualsiasi cosa che possa essere scaricata nel browser:

  • style per i fogli di stile,
  • script per gli script,
  • font per i caratteri,
  • fetch per le risorse caricate utilizzando fetch() o XMLHttpRequest,
  • vedere l'elenco completo su MDN.

È importante specificare l'attributo as – questo aiuta il browser a stabilire le priorità e pianificare correttamente i download.

Quando usare

Utilizzare il precaricamento quando la risorsa è necessaria in un futuro molto prossimo. Per esempio:

  • Caratteri non standard da un file esterno: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Per impostazione predefinita comic-sans.woff2 inizierà a caricarsi solo dopo il download e l'analisi index.css. Per evitare di aspettare così a lungo, puoi scaricare il carattere prima utilizzando <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Se separi i tuoi stili in base all'approccio CSS critico in due parti, critica (per il rendering immediato) e non critica: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Con questo approccio, gli stili non critici inizieranno a caricarsi solo quando viene eseguito JavaScript, cosa che può accadere pochi secondi dopo il rendering. Invece di aspettare l'uso di JS <link rel= "preload">per iniziare il download prima:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/it/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Non abusare del precarico. Se carichi tutto di seguito, il sito non accelererà magicamente, anzi, impedirà al browser di pianificare correttamente il suo lavoro.

Da non confondere con il precaricamento. Non usare <link rel= "preload">, se non hai bisogno della risorsa immediatamente dopo il caricamento della pagina. Se ne hai bisogno in seguito, ad esempio per la pagina successiva, utilizza <link rel= "prefetch">.

dettagli

Questo è un tag obbligatorio essere eseguito dal browser (se lo supporta), a differenza di tutti gli altri tag relativo al precarico. Il browser deve scaricare la risorsa specificata in <link rel="preload">. In altri casi potrebbe ignorare il precaricamento, ad esempio se è in esecuzione con una connessione lenta.

priorità. I browser solitamente assegnano priorità diverse alle diverse risorse (stili, script, caratteri, ecc.) per caricare per prime le risorse più importanti. In questo caso, il browser determina la priorità in base all'attributo as. Per il browser Chrome puoi guardare tabella delle priorità completa.

Precaricamento, precaricamento e altri tag

prefetch

<link rel= "prefetch"> chiede al browser di scaricare e memorizzare nella cache una risorsa (come uno script o un foglio di stile) in background. Il caricamento avviene con priorità bassa in modo da non interferire con risorse più importanti. Ciò è utile se la risorsa è necessaria nella pagina successiva e desideri memorizzarla nella cache in anticipo.

Anche in questo caso il browser non fa nulla con la risorsa dopo il caricamento. Gli script non vengono eseguiti, i fogli di stile non vengono applicati. La risorsa viene semplicemente memorizzata nella cache e resa immediatamente disponibile su richiesta.

sintassi

<link rel="prefetch" href="/it/style.css" as="style" />

href punta alla risorsa che desideri scaricare.

as può essere qualsiasi cosa che possa essere scaricata nel browser:

  • style per i fogli di stile,
  • script per gli script,
  • font per i caratteri,
  • fetch per le risorse caricate utilizzando fetch() o XMLHttpRequest,
  • vedere l'elenco completo su MDN.

È importante specificare l'attributo as - questo aiuta il browser a stabilire correttamente le priorità e a pianificare i download.

Quando usare

Per caricare risorse da altre pagine, se hai bisogno di una risorsa da un'altra pagina e vuoi precaricarla per velocizzare il rendering di quella pagina. Per esempio:

  • Hai un negozio online e il 40% degli utenti lascia la home page per la pagina del prodotto. Utilizzo <link rel= "prefetch">, caricamento di file CSS e JS per eseguire il rendering delle pagine dei prodotti.
  • Hai un'applicazione a pagina singola e pagine diverse caricano pacchetti diversi. Quando un utente visita una pagina, è possibile precaricare i pacchetti per tutte le pagine a cui si collega.

È probabile che questo tag possa essere utilizzato in sicurezza in qualsiasi misura.. I browser solitamente pianificano il precaricamento con la priorità più bassa, quindi non disturba nessuno. Tieni presente che consuma traffico di utenti, il che può costare denaro.

Non per richieste urgenti. Non usare <link rel= "prefetch">, quando la risorsa è necessaria in pochi secondi. In questo caso, utilizzare <link rel= "preload">.

dettagli

Etichetta opzionale. Il browser non è obbligato a seguire queste istruzioni; potrebbe ignorarle, ad esempio, in caso di connessione lenta.

Priorità in Chrome. Nel cromo <link rel= "prefetch"> solitamente eseguito con priorità minima (vedi tabella delle priorità completa), cioè dopo aver caricato tutto il resto.

preconnettersi

<link rel= "preconnect"> chiede al browser di connettersi anticipatamente al dominio quando si desidera velocizzare la configurazione della connessione in futuro.

Il browser deve stabilire una connessione se recupera risorse da un nuovo dominio di terze parti. Ad esempio, se carica Google Fonts, React font da un CDN o richiede una risposta JSON da un server API.

Per stabilire una nuova connessione occorrono solitamente alcune centinaia di millisecondi. Viene fatto una volta, ma richiede ancora tempo. Se hai stabilito una connessione in anticipo, risparmierai tempo e scaricherai le risorse da questo dominio più velocemente.

sintassi

<link rel= "preconnect" href="https://api.my-app.com" />

href indica il nome a dominio di cui si vuole determinare l'indirizzo IP. Può essere specificato con un prefisso (https://domain.com) o senza di essa (//domain.com).

Quando usare

Utilizzalo per i domini che saranno necessari a breve per scaricare uno stile, uno script o un'immagine importante da lì, ma non conosci ancora l'URL della risorsa. Per esempio:

  • La tua applicazione è ospitata su my-app.com e invia richieste AJAX a api.my-app.com: Non conosci in anticipo le query specifiche perché vengono eseguite dinamicamente da JS. Qui è abbastanza appropriato utilizzare un tag per preconnettersi al dominio.
  • La tua applicazione è ospitata su my-app.com e utilizza Google Fonts. Vengono scaricati in due passaggi: innanzitutto viene scaricato il file CSS dal dominio fonts.googleapis.com, questo file richiede i caratteri con fonts.gstatic.com. Non è possibile sapere da quale file di caratteri specifici provengono fonts.gstatic.com ti servirà finché non caricherai il file CSS, quindi possiamo solo effettuare una connessione preliminare in anticipo.

Utilizza questo tag per velocizzare un po' alcuni script o stili di terze parti grazie alla connessione prestabilita.

Non abusarne. Stabilire e mantenere una connessione è un'operazione costosa sia per il client che per il server. Utilizza questo tag per un massimo di 4-6 domini.

dettagli

Etichetta opzionale. Il browser non è tenuto a seguire queste istruzioni e può ignorarle, ad esempio, se sono già state stabilite molte connessioni o in altri casi.

Cosa include il processo di connessione?. Per connettersi a ciascun sito, il browser deve effettuare le seguenti operazioni:

  • Risoluzione DNS. Trova l'indirizzo IP del server (216.58.215.78) per il nome di dominio specificato (google.com).
  • Stretta di mano TCP. Scambiare pacchetti (client → server → client) per avviare una connessione TCP con il server.
  • Handshake TLS (solo siti HTTPS). Due cicli di scambio di pacchetti (client → server → client → server → client) per avviare una sessione TLS sicura.

Nota: HTTP/3 migliorerà e accelererà il meccanismo di handshake, ma è ancora molto lontano.

precaricamento DNS

<link rel= "dns-prefetch"> chiede al browser di eseguire in anticipo la risoluzione DNS del dominio se ti connetterai presto e desideri velocizzare la connessione iniziale.

Il browser deve determinare l'indirizzo IP del dominio se recupererà risorse da un nuovo dominio di terze parti. Ad esempio, caricando Google Fonts, React font da una CDN o richiedendo una risposta JSON da un server API.

Per ogni nuovo dominio, la risoluzione dei record DNS richiede in genere circa 20-120 ms. Ciò influisce solo sul caricamento della prima risorsa da un determinato dominio, ma introduce comunque un ritardo. Se eseguiamo la risoluzione DNS in anticipo, risparmieremo tempo e caricheremo la risorsa più velocemente.

sintassi

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href indica il nome di dominio per il quale si desidera impostare l'indirizzo IP. Può essere specificato con un prefisso (https://domain.com) o senza di essa (//domain.com).

Quando usare

Utilizzalo per i domini che saranno necessari a breve per scaricare da lì risorse di cui il browser non è a conoscenza in anticipo. Per esempio:

  • La tua applicazione è ospitata su my-app.com e invia richieste AJAX a api.my-app.com: Non conosci in anticipo le query specifiche perché vengono eseguite dinamicamente da JS. Qui è abbastanza appropriato utilizzare un tag per preconnettersi al dominio.
  • La tua applicazione è ospitata su my-app.come utilizza Google Fonts. Vengono scaricati in due passaggi: innanzitutto viene scaricato il file CSS dal dominio fonts.googleapis.com, questo file richiede i caratteri con fonts.gstatic.com. Non è possibile sapere da quale file di caratteri specifici provengono fonts.gstatic.com ne avrai bisogno finché non caricherai il file CSS, quindi possiamo solo effettuare una connessione preliminare in anticipo.

Utilizza questo tag per velocizzare un po' alcuni script o stili di terze parti grazie alla connessione prestabilita.

Si prega di notare caratteristiche simili a <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Di solito non ha senso usarli insieme per un dominio: <link rel= "preconnect"> include già <link rel= "dns-prefetch"/> e altro ancora. Ciò può essere giustificato in due casi:

  • Vuoi supportare i browser più vecchi?. <link rel= "dns-prefetch" /> supportato da IE10 e Safari 5. <link rel= "preconnect"> è stato supportato per un po' in Chrome e Firefox, ma è stato aggiunto a Safari solo nella versione 11.1 e ancora non supportato in IE/Edge. Se è necessario supportare questi browser, utilizzare <link rel= "dns-prefetch" /> come opzione di backup per <link rel= "preconnect">.
  • Vuoi velocizzare le connessioni a più di 4-6 domini. Etichetta <link rel= "preconnect"> Non è consigliabile l'utilizzo con più di 4-6 domini, poiché stabilire e mantenere una connessione è un'operazione costosa. <link rel= "dns-prefetch" /> consuma meno risorse, quindi usalo se necessario.

dettagli

Etichetta opzionale. Il browser non è tenuto a seguire queste istruzioni, quindi potrebbe non eseguire la risoluzione DNS, ad esempio, se nella pagina sono presenti molti tag di questo tipo o in altri casi.

Che cos'è il DNS. Ogni server su Internet ha un indirizzo IP univoco, a cui assomiglia 216.58.215.78. Il nome del sito viene solitamente inserito nella barra degli indirizzi del browser (ad esempio, google.com) e i server DNS (Domain Name System) lo abbinano all'indirizzo IP del server (216.58.215.78).

Per determinare un indirizzo IP, il browser deve interrogare il server DNS. Sono necessari 20-120 ms per la connessione a un nuovo dominio di terze parti.

Il DNS viene memorizzato nella cache, anche se non in modo molto affidabile. Alcuni sistemi operativi e browser memorizzano nella cache le query DNS: ciò farà risparmiare tempo su query ripetute, ma non è possibile fare affidamento sulla memorizzazione nella cache. Su Linux di solito non funziona affatto. Chrome ha una cache DNS, ma dura solo un minuto. Windows memorizza nella cache le risposte DNS per cinque giorni.

prerendering

<link rel= "prerender"> chiede al browser di scaricare l'URL e visualizzarlo in una scheda invisibile. Quando l'utente fa clic sul collegamento, la pagina dovrebbe essere visualizzata immediatamente. Questo è utile se sei sicuro che l'utente visiterà una determinata pagina e vuoi velocizzarne la visualizzazione.

Nonostante (o a causa) dell’eccezionale efficacia di questo tag, nel 2019 <link rel= "prerender"> scarsamente supportato nei principali browser. Vedi maggiori dettagli. sotto.

sintassi

<link rel="prerender" href="https://my-app.com/pricing" />

href punta all'URL di cui desideri avviare il rendering in background.

Quando usare

Quando sei veramente sicuro che l'utente andrà su una determinata pagina. Se disponi di un “tunnel” attraverso il quale il 70% dei visitatori della pagina A va alla pagina B, allora <link rel= "prerender"> sulla pagina A aiuterà a visualizzare la pagina B molto rapidamente.

Non abusarne. Il pre-rendering è estremamente costoso in termini di larghezza di banda e memoria. Non usare <link rel= "prerender"> per più di una pagina.

dettagli

Etichetta opzionale. Il browser non è tenuto a seguire queste istruzioni e potrebbe ignorarle, ad esempio, in caso di connessione lenta o quando la memoria libera non è sufficiente.

Per risparmiare memoria Chrome non esegue il rendering completoE precaricare solo NoState. Ciò significa che Chrome carica la pagina e tutte le sue risorse, ma non esegue il rendering o l'esecuzione di JavaScript.

Firefox e Safari non supportano affatto questo tag. Ciò non viola le specifiche, poiché i browser non sono tenuti a seguire queste istruzioni; ma ancora triste. Bug di implementazione Firefox è aperto da sette anni. Ci sono rapporti secondo cui Safari non supporta neanche questo tag.

Riassunto

Utilizzo:

  • <link rel= "preload"> - quando ti serve una risorsa in pochi secondi
  • <link rel= "prefetch"> - quando hai bisogno della risorsa nella pagina successiva
  • <link rel= "preconnect"> - quando sai che presto avrai bisogno di una risorsa, ma non ne conosci ancora l'URL completo
  • <link rel= "dns-prefetch"> - allo stesso modo, quando sai che presto avrai bisogno di una risorsa, ma non ne conosci ancora l'URL completo (per i browser più vecchi)
  • <link rel= "prerender"> — quando sei sicuro che gli utenti andranno su una determinata pagina e vuoi velocizzarne la visualizzazione

Fonte: habr.com

Aggiungi un commento