C'è molti modi per migliorare le prestazioni web. Uno di essi è il pre-caricamento dei contenuti che saranno necessari in seguito. Prefetching di CSS, rendering preventivo di un'intera pagina o risoluzione di un nome di dominio. Facciamo tutto in anticipo e poi mostriamo il risultato in un attimo! Sembra fantastico.

È ancora più fantastico che sia molto semplice da implementare. Cinque tag <link rel> danno al browser l'ordine di eseguire azioni preliminari:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/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" />

In breve, parleremo di cosa fanno e quando usarli.

Vai a: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel="preload"> dice al browser di caricare e memorizzare nella cache la risorsa il prima possibile (ad esempio, uno script o un foglio di stile). Questo è utile quando la risorsa sarà necessaria dopo pochi secondi dal caricamento della pagina - e si desidera 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 fornita immediatamente su richiesta.

Sintassi

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

href indica la risorsa che si desidera scaricare.

as può essere qualsiasi cosa possa essere scaricata dal browser:

style per i fogli di stile,
script per gli script,
font per i font,
fetch per le risorse caricate tramite fetch() o XMLHttpRequest,
elenco completo vedi su MDN.

È importante specificare l'attributo as – aiuta il browser a prioritizzare correttamente e pianificare il caricamento.

Quando usare

Usa il pre-caricamento quando la risorsa sarà necessaria molto presto. Ad esempio:

Font non standard da un file esterno:
```

<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 essere caricato solo dopo il caricamento e l'analisi index.css. Per non aspettare così a lungo, si può caricare il font in anticipo usando <link rel="preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Se suddividi i tuoi stili secondo l'approccio CSS Critico in due parti, critico (per il rendering immediato) e non critico:
```
<style>
/* Stili critici in linea */
</style>

<script>
/* JS personalizzato che inizia a scaricare stili non critici */
loadCSS('/app/non-critical.css');
</script>
```
Con questo approccio, gli stili non critici inizieranno a essere caricati solo all'avvio di JavaScript, il che può avvenire dopo alcuni secondi dal rendering. Invece di attendere JS, utilizza <link rel="preload">, per avviare il caricamento prima:
```
/* Stili critici in linea */
```

Non abusare del preload. Se carichi tutto indiscriminatamente, il sito non si velocizzerà magicamente; anzi, potrebbe impedire al browser di pianificare correttamente il lavoro.

Non confondere con il prefetching. Non utilizzare <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 per l'esecuzione del browser (se lo supporta), a differenza di tutti gli altri tag relativi al preload. Il browser è obbligato a caricare la risorsa indicata in <link rel="preload">. In altri casi, potrebbe ignorare il preload, ad esempio se è collegato a una rete lenta.

Priorità. Ai vari tipi di risorse (stili, script, font, ecc.), i browser di solito assegnano priorità diverse per caricare prima le risorse più importanti. In questo caso, il browser determina la priorità in base all'attributo as. Per il browser Chrome puoi consultare l'intera tabella delle priorità.

prefetch

<link rel= "prefetch"> richiede al browser di caricare e memorizzare nella cache una risorsa (ad esempio, uno script o un foglio di stile) in background. Il caricamento avviene con bassa priorità, quindi non ostacola le risorse più importanti. Questo è utile se la risorsa sarà necessaria nella pagina successiva e si desidera 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 immediatamente fornita su richiesta.

Sintassi

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

href indica la risorsa che si desidera scaricare.

as può essere qualsiasi cosa possa essere scaricata dal browser:

style per i fogli di stile,
script per gli script,
font per i font,
fetch per le risorse caricate tramite fetch() o XMLHttpRequest,
elenco completo vedi su MDN.

È importante specificare l'attributo as — aiuta il browser a gestire correttamente le priorità e pianificare il caricamento.

Quando usare

Per caricare risorse da altre pagine, se hai bisogno di una risorsa da un'altra pagina, e desideri pre-caricarla per accelerare il rendering di quella pagina in seguito. Ad esempio:

Hai un negozio online e il 40% degli utenti abbandona la pagina principale per andare alla pagina del prodotto. Utilizza <link rel= "prefetch">, caricando file CSS e JS per il rendering delle pagine con i prodotti.
Hai un'applicazione a pagina singola e pagine diverse caricano pacchetti diversi. Quando un utente visita una pagina, puoi caricare in anticipo i pacchetti per tutte le pagine a cui questa si riferisce.

Probabilmente questo tag può essere utilizzato in qualsiasi quantità. I browser di solito pianificano il prefetch con la priorità più bassa, quindi non disturba nessuno. Tieni solo presente che si utilizza il traffico dell'utente, che può costare denaro.

Non per richieste urgenti. Non utilizzare <link rel= "prefetch">, quando la risorsa sarà necessaria tra pochi secondi. In questo caso, utilizza <link rel="preload">.

Dettagli

Tag facoltativo. Il browser non è obbligato a seguire questa istruzione, può ignorarla, ad esempio, su una connessione lenta.

Priorità in Chrome. In Chrome <link rel= "prefetch"> di solito viene eseguito con priorità minima (vedi l'intera tabella delle priorità), dopo il caricamento di tutto il resto.

preconnect

<link rel= "preconnect"> chiede al browser di connettersi in anticipo a un dominio, quando desideri accelerare la connessione in futuro.

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

Stabilire una nuova connessione di solito richiede alcune centinaia di millisecondi. Viene effettuata una sola volta, ma richiede comunque tempo. Se hai stabilito la connessione in anticipo, risparmierai tempo e caricherai più rapidamente le risorse da questo dominio.

Sintassi

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

href indica il nome del dominio per il quale deve essere determinato l'indirizzo IP. Puoi indicarlo con il prefisso (https://domain.com) o senza (//domain.com).

Quando usare

Utilizza per i domini che potrebbero essere necessari presto per caricare uno stile, uno script o un'immagine importanti da lì, ma non conosci ancora l'URL della risorsa. Ad esempio:

La tua applicazione è ospitata su my-app.com e fa richieste AJAX a api.my-app.com: non conosci in anticipo le richieste specifiche, perché vengono effettuate dinamicamente da JS. Qui è del tutto appropriato utilizzare il tag per la connessione anticipata a un dominio.
La tua applicazione è ospitata su my-app.com e utilizza i font Google Fonts. Vengono caricati in due fasi: prima viene caricato il file CSS dal dominio fonts.googleapis.com, quindi questo file richiede i font da fonts.gstatic.com. Non puoi sapere quali file di font specifici ti serviranno finché non carichi il file CSS, quindi in anticipo possiamo solo stabilire una connessione preliminare. fonts.gstatic.com Usa questo tag per accelerare un po' qualche script o stile di terze parti

grazie alla connessione preliminare. Non abusare

. Stabilire e mantenere una connessione è un'operazione costosa sia per il client che per il server. Usa questo tag al massimo per 4-6 domini.. Il browser non è obbligato a seguire questa istruzione e può ignorarla, ad esempio, se sono già state stabilite molte connessioni o in qualche altro caso.

Dettagli

Tag facoltativoCosa include il processo di connessione

. Per connettersi a ogni sito, il browser deve eseguire le seguenti azioni:Risoluzione DNS

. Trovare l'indirizzo IP del server () per il nome di dominio specificato (216.58.215.78google.comRiconnessione TCP).
. Scambio di pacchetti (client → server → client), per iniziare una connessione TCP con il server.Riconnessione TLS (solo per siti HTTPS)
. Due round di scambio di pacchetti (client → server → client → server → client), per avviare una sessione TLS sicura.Nota: HTTP/3 migliorerà e accelererà il meccanismo di riconnessione, ma è ancora lontano.

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

dns-prefetch

chiede al browser di eseguire in anticipo la risoluzione DNS per il dominio, nel caso in cui prevedi di connetterti a esso e voglia accelerare la connessione iniziale. Il browser deve determinare l'indirizzo IP del dominio se deve estrarre alcune risorse da un nuovo dominio di terze parti. Ad esempio, caricare i font di Google Fonts, React da CDN o richiedere una risposta JSON da un server API.

Per ogni nuovo dominio, la risoluzione del record DNS richiede generalmente circa 20−120 ms. Questo influisce solo sul caricamento della prima risorsa da questo dominio, ma rappresenta comunque un ritardo. Se si esegue in anticipo la risoluzione DNS, risparmieremo tempo e caricheremo la risorsa più velocemente.

Per ogni nuovo dominio, la risoluzione del record DNS richiede solitamente circa 20−120 ms. Questo influisce solo sul caricamento della prima risorsa da questo dominio, ma rappresenta comunque un ritardo. Se eseguiamo la risoluzione DNS in anticipo, risparmieremo tempo e caricheremo la risorsa più rapidamente.

Sintassi

indica il nome di dominio per il quale si deve stabilire l'indirizzo IP. Può essere specificato con un prefisso (

href per caricare risorse da lì, di cui il browser non conosce in anticipo. Ad esempio:https://domain.com) o senza (//domain.com).

Quando usare

Utilizza per i domini che potrebbero essere necessari presto , e utilizza i font di Google Fonts. Vengono caricati in due fasi: prima viene caricato il file CSS dal dominio

La tua applicazione è ospitata su my-app.com e fa richieste AJAX a api.my-app.com: non conosci in anticipo le richieste specifiche, perché vengono effettuate dinamicamente da JS. Qui è del tutto appropriato utilizzare il tag per la connessione anticipata a un dominio.
La tua applicazione è ospitata su my-app.comti servirà finché non carichi il file CSS, quindi in anticipo possiamo solo stabilire una connessione preliminare. fonts.googleapis.com, quindi questo file richiede i font da fonts.gstatic.com. Non puoi sapere quali file di font specifici ti serviranno finché non carichi il file CSS, quindi in anticipo possiamo solo stabilire una connessione preliminare. fonts.gstatic.com .

grazie alla connessione preliminare. Non abusare

Si prega di notare caratteristiche simili su <link rel= "dns-prefetch"/> e <link rel= "preconnect">. Usarli insieme per un unico dominio di solito non ha senso: <link rel= "preconnect"> già include <link rel= "dns-prefetch"/> e molto altro. Questo è giustificabile in due casi:

Si desidera supportare browser obsoleti. <link rel= "dns-prefetch" /> è supportato a partire da IE10 e Safari 5. <link rel= "preconnect"> è stato supportato per un certo tempo in Chrome e Firefox, ma è stato aggiunto in Safari solo nella versione 11.1 e non è ancora supportato in IE/Edge. Se è necessario supportare questi browser, utilizzare <link rel= "dns-prefetch" /> come opzione di backup per <link rel= "preconnect">.

Si desidera accelerare la connessione a più di 4−6 domini. Il tag <link rel= "preconnect"> non è consigliato per essere usato con più di 4−6 domini, poiché stabilire e mantenere una connessione è un'operazione costosa. <link rel= "dns-prefetch" /> consuma meno risorse, quindi, se necessario, utilizzarlo.

Dettagli

Tag facoltativo. Il browser non è obbligato a seguire questa istruzione, quindi potrebbe non eseguire la risoluzione DNS, ad esempio, se sulla pagina ci sono molti di questi tag o in qualche altro caso.

Che cos'è il DNS. A ciascun server su Internet è associato un indirizzo IP unico, che appare come 216.58.215.78. Nella barra degli indirizzi del browser di solito viene inserito il nome del sito (ad esempio, Riconnessione TCP), e i server DNS (Domain Name System) lo associano all'indirizzo IP del server (216.58.215.78).

Per determinare l'indirizzo IP, il browser deve effettuare una richiesta al server DNS. Ciò richiede 20−120 ms quando ci si connette a un nuovo dominio esterno.

Il DNS viene memorizzato nella cache, anche se non in modo molto affidabile. Alcuni sistemi operativi e browser memorizzano nella cache le richieste DNS: questo fa risparmiare tempo per le richieste ripetute, ma non si può fare affidamento sulla cache. In Linux di solito non funziona affatto. Chrome ha una cache DNS, ma dura solo un minuto. Windows memorizza le risposte DNS nella cache per cinque giorni.

prerender

<link rel= "prerender"> chiede al browser di caricare un URL e mostrarlo in una scheda invisibile. Quando l'utente clicca sul link, la pagina deve essere visualizzata immediatamente. Questo è utile se sei sicuro che l'utente visiterà una certa pagina e desideri accelerarne il caricamento.

Nonostante l'eccezionale efficacia di questo tag (o a causa di essa), nel 2019 <link rel= "prerender"> è poco supportato dai principali browser. Maggiori dettagli su di seguito.

Sintassi

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

href indica l'URL per il quale desideri avviare il rendering in background.

Quando usare

Quando sei davvero sicuro che l'utente passerà a una certa pagina. Se hai un "tunnel" dove il 70% dei visitatori della pagina A passa alla pagina B, allora <link rel= "prerender"> nella pagina A aiuterà a visualizzare molto rapidamente la pagina B.

. Stabilire e mantenere una connessione è un'operazione costosa sia per il client che per il server. Usa questo tag al massimo per 4-6 domini.. Il rendering preliminare è estremamente costoso in termini di traffico e memoria. Non usare <link rel= "prerender"> più di una pagina.

Dettagli

Tag facoltativo. Il browser non è obbligato a seguire questa istruzione e può ignorarla, ad esempio, su una connessione lenta o con poca memoria disponibile.

Per risparmiare memoria Chrome non esegue il rendering completo, ma solo il pre-caricamento NoState. Questo significa che Chrome carica la pagina e tutte le sue risorse, ma non esegue il rendering e non esegue JavaScript.

Firefox e Safari non supportano affatto questo tag. Questo non viola la specifica, poiché i browser non sono obbligati a seguire questa istruzione; ma è comunque deludente. Un bug di implementazione in Firefox è stato presente per sette anni. Ci sono segnalazioni che Safari non supporta nemmeno questo tag.

Riepilogo

Usa:

<link rel="preload"> — quando hai bisogno di una risorsa tra pochi secondi
<link rel= "prefetch"> — quando hai bisogno di una risorsa nella pagina successiva
<link rel= "preconnect"> — quando sai che presto ti servirà una risorsa, ma non conosci ancora il suo URL completo
chiede al browser di eseguire in anticipo la risoluzione DNS per il dominio, nel caso in cui prevedi di connetterti a esso e voglia accelerare la connessione iniziale. — similmente, quando sai che presto ti servirà una risorsa, ma non conosci ancora il suo URL completo (per browser obsoleti)
<link rel= "prerender"> — quando sei sicuro che gli utenti passeranno a una certa pagina e vuoi accelerarne la visualizzazione

Fonte: habr.com