Sì molti modi per migliorare le prestazioni web. Uno di questi è il pre-caricamento del contenuto necessario in seguito. Prefetching CSS, rendering preventivo di un'intera pagina o risoluzione del nome di dominio. Facciamo tutto in anticipo e poi mostriamo il risultato istantaneamente! Sembra fantastico.

Ancor più interessante, è che è molto semplice da implementare. Cinque tag danno istruzioni al browser per le azioni preventive:

Un breve riepilogo di cosa fanno e quando usarli.

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

preload

<link rel= "preload"> informa il browser di caricare e memorizzare nella cache il più presto possibile una risorsa (come uno script o un foglio di stile). Questo è utile quando la risorsa sarà necessaria pochi secondi dopo il caricamento della pagina e si desidera accelerare il processo.

Il browser non agisce sulla 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 vuoi scaricare.

come può essere qualsiasi cosa che può essere scaricata nel browser:

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

È importante specificare l'attributo come — questo aiuta il browser a stabilire correttamente le priorità e pianificare il caricamento.

Quando utilizzare

Usa il preload quando la risorsa sarà necessaria a breve. Ad esempio:

Caratteri personalizzati da un file esterno:
```
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Di default comic-sans.woff2 inizierà a essere caricato solo dopo il caricamento e l'analisi index.css. Per non aspettare così a lungo, puoi caricare il carattere in anticipo utilizzando <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Se dividi i tuoi stili secondo l'approccio Critical CSS in due parti, critica (per il rendering immediato) e non critica:
```
/* Inlined critical styles */
```
Con questo approccio, gli stili non critici inizieranno a essere scaricati solo quando il JavaScript verrà eseguito, il che può avvenire alcuni secondi dopo il rendering. Invece di aspettare il JS, usa <link rel= "preload">, per iniziare il caricamento in anticipo:
```
/* Inlined critical styles */
```

Non abusare del preload. Se carichi tutto senza criterio, il sito non si snellirà magicamente; al contrario, questo impedirà al browser di pianificare correttamente il lavoro.

Non confondere con il prefetching. Non usare <link rel= "preload">, se non hai bisogno di quella risorsa subito dopo il caricamento della pagina. Se sarà necessaria più tardi, ad esempio, per la pagina successiva, utilizza <link rel= "prefetch">.

Dettagli

Questo è un tag obbligatorio per l'esecuzione da parte del browser (se supportato), a differenza di tutti gli altri tag correlati al caricamento preventivo. Il browser è obbligato a caricare la risorsa specificata in <link rel="preload">. In altri casi può ignorare il preload, ad esempio se è su una connessione lenta.

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

prefetch

<link rel= "prefetch"> chiede 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 priorità bassa, quindi non interferisce con le risorse più importanti. Questo è utile se la risorsa sarà necessaria nella pagina successiva e si desidera memorizzarla in anticipo.

Anche qui, 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="prefetch" href="/style.css" as="style" />

href indica la risorsa che vuoi scaricare.

come può essere qualsiasi cosa che può essere scaricata nel browser:

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

È importante specificare l'attributo come — questo aiuta il browser a stabilire correttamente le priorità e pianificare il caricamento.

Quando utilizzare

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

Hai un negozio online e il 40% degli utenti passa dalla homepage alla pagina del prodotto. Usa <link rel= "prefetch">, caricando i file CSS e JS per il rendering delle pagine con il prodotto.
Hai un'applicazione a pagina singola e diverse pagine caricano pacchetti differenti. Quando un utente visita una pagina, è possibile pre-caricare i pacchetti per tutte le pagine a cui essa fa riferimento.

Probabilmente questo tag può essere utilizzato in modo sicuro in qualsiasi quantità. I browser di solito pianificano il prefetch con la priorità più bassa, quindi non infastidisce nessuno. Tieni solo presente che si consuma traffico dell'utente, che potrebbe avere un costo.

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

Dettagli

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

Priorità in Chrome. In Chrome <link rel= "prefetch"> di solito viene eseguito con priorità minima (vedi la tabella completa delle priorità), cioè dopo aver caricato tutto il resto.

preconnect

<link rel= "preconnect"> richiede al browser di connettersi in anticipo a un dominio, quando si desidera velocizzare l'instaurazione della connessione in futuro.

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

Stabilire una nuova connessione richiede di solito qualche centinaio 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 un nome di dominio per cui è necessario risolvere l'indirizzo IP. Può essere specificato con un prefisso (https://domain.com) o senza (//domain.com).

Quando utilizzare

Usa per i domini che verranno presto utilizzati per caricare stili, script o immagini 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, poiché vengono eseguite dinamicamente da JS. Qui è assolutamente pertinente utilizzare il tag per il pre-connessione al dominio.
La tua applicazione è ospitata su my-app.com e utilizza i font di Google Fonts. Vengono caricati in due fasi: prima viene caricato il file CSS dal dominio fonts.googleapis.com, poi questo file richiede i font da fonts.gstatic.com.Non puoi sapere quali file font specifici di fonts.gstatic.com. ti serviranno finché non carichi il file CSS, quindi in anticipo possiamo solo stabilire una connessione preliminare.

Utilizza questo tag per velocizzare un po' uno script o uno stile di terze parti grazie alla pre-impostazione della connessione.

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

Dettagli

Un tag facoltativo. Il browser non è obbligato a seguire questa istruzione e può ignorarla, ad esempio, se sono già state stabilite molte connessioni o in un altro caso.

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

Risoluzione DNS. Trovare l'indirizzo IP del server (216.58.215.78) per il nome di dominio specificato (google.com).
Handshake TCP. Scambio di pacchetti (client → server → client) per iniziare una connessione TCP con il server.
Handshake TLS (solo per siti HTTPS). Due round di scambio pacchetti (client → server → client → server → client) per avviare una sessione TLS sicura.

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

dns-prefetch

<link rel= "dns-prefetch"> chiede al browser di eseguire in anticipo la risoluzione DNS per un dominio, se stai per connetterti e desideri velocizzare la connessione iniziale.

Il browser deve determinare l'indirizzo IP del dominio se estrarrà risorse da un nuovo dominio esterno. Ad esempio, caricare 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 di solito circa 20-120 ms. Questo influisce solo sul caricamento della prima risorsa da quel dominio, ma rappresenta comunque un ritardo. Se esegui 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 un nome di dominio per cui è necessario stabilire l'indirizzo IP. Può essere specificato con un prefisso (https://domain.com) o senza (//domain.com).

Quando utilizzare

Usa per i domini che verranno presto utilizzati per caricare risorse da lì di cui il browser non è a conoscenza in anticipo. 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, poiché vengono eseguite dinamicamente da JS. Qui è assolutamente pertinente utilizzare il tag per il pre-connessione al dominio.
La tua applicazione è ospitata su my-app.com, e utilizza i font di Google Fonts. Viene caricato in due fasi: prima viene caricato un file CSS dal dominio fonts.googleapis.com, poi questo file richiede i font da fonts.gstatic.com.Non puoi sapere quali file font specifici di fonts.gstatic.com. ti serviranno, finché non carichi il file CSS, quindi in anticipo possiamo solo stabilire una connessione preliminare.

Utilizza questo tag per velocizzare un po' uno script o uno stile di terze parti grazie alla pre-impostazione della connessione.

Nota le caratteristiche simili a <link rel= "dns-prefetch"/> e <link rel= "preconnect">. Utilizzarli insieme per un dominio di solito non ha senso: <link rel= "preconnect"> già include <link rel= "dns-prefetch"/> e altro ancora. Questo può essere giustificato in due casi:

Desideri supportare vecchi browser. <link rel= "dns-prefetch" /> supportata a partire da IE10 e Safari 5. <link rel= "preconnect"> è stato supportato per un certo periodo 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, utilizza <link rel= "dns-prefetch" /> come alternativa per <link rel= "preconnect">.

Desideri accelerare la connessione a più di 4-6 domini. Questo tag <link rel= "preconnect"> non è consigliato per più di 4-6 domini, poiché stabilire e mantenere una connessione è un'operazione costosa. <link rel= "dns-prefetch" /> richiede meno risorse, quindi in caso di necessità utilizzalo.

Dettagli

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

Che cos'è il DNS. Ogni server su internet ha un indirizzo IP unico, che appare come 216.58.215.78. Nella barra degli indirizzi del browser si inserisce generalmente il nome del sito (ad esempio, google.com), e i server DNS (Domain Name System) lo abbinano all'indirizzo IP del server (216.58.215.78).

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

Il DNS è 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 nelle richieste successive, ma non ci si può fare affidamento sulla cache. In Linux, generalmente non funziona affatto. Chrome ha una cache DNS, ma dura solo un minuto. Windows memorizza nella cache le risposte DNS per cinque giorni.

prerender

<link rel= "prerender"> chiede al browser di caricare un URL e visualizzarlo in una scheda invisibile. Quando l'utente fa clic sul link, la pagina dovrebbe apparire immediatamente. Questo è utile se sei sicuro che l'utente visiterà una certa pagina e desideri accelerarne la visualizzazione.

Nonostante l'eccezionale efficienza di questo tag (o proprio a causa di essa), nel 2019 <link rel= "prerender"> è supportato male dai principali browser. Maggiori dettagli su. più in basso.

Sintassi

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

href indica l'URL che desideri pre-renderizzare in background.

Quando utilizzare

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

Non abusarne. Il pre-rendering ha un costo molto elevato in termini di traffico e memoria. Non utilizzare <link rel= "prerender"> per più di una pagina.

Dettagli

Un tag facoltativo. Il browser non è obbligato a seguire questa istruzione e può ignorarla, ad esempio, su una connessione lenta o in caso di insufficiente memoria libera.

Per risparmiare memoria Chrome non esegue il rendering completo, e 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 triste. Un bug di implementazione in Firefox è rimasto aperto per sette anni. Ci sono segnalazioni che anche Safari non supporta questo tag..

Riepilogo

Usa:

<link rel= "preload"> — quando hai bisogno di una risorsa entro pochi secondi
<link rel= "prefetch"> — quando hai bisogno di una risorsa sulla pagina successiva
<link rel= "preconnect"> — quando sai che avrai bisogno di una risorsa a breve, ma non conosci ancora il suo URL completo
<link rel= "dns-prefetch"> — in modo simile, quando sai che avrai bisogno di una risorsa a breve, ma non conosci ancora il suo URL completo (per i vecchi browser)
<link rel= "prerender"> — quando sei sicuro che gli utenti passeranno a una certa pagina e desideri accelerarne la visualizzazione

Fonte: habr.com