Come accelerare il sito web con il tag

"prevedendo"I browser sono il futuro della navigazione Internet ad alta velocità, portandoci le risorse che vogliamo anche prima sappiamo che li vogliamo. I browser di oggi già rendere alcuni predizioni di tanto in tanto per accelerare il recupero e il rendering dei documenti. Per portare questo al prossimo passo, non cerchiamo altro che gli sviluppatori web.

Gli sviluppatori hanno un buona idea di come navigano i loro siti web, e che le risorse sono richieste più spesso e quindi, possono prevedere alcune operazioni future che i browser dovrebbero fare per i siti. Tutto ciò che serve ora è che gli sviluppatori trovino un modo per farlo trasmetteteli predizioni ai browser e metterli a frutto. È qui che arrivano alcuni "link HTML" speciali.

Un aggiornamento sulle richieste HTTP

Prima di dare un'occhiata a questi collegamenti, è il momento di aggiornare la memoria su come avviene una tipica operazione di recupero file richiesta da HTTP. Diciamo che qualcuno di nome Joe vuole visitare un sito web.

Ecco cosa succede dopo:

1. Joe digita l'indirizzo recuperabile dal sito Web nella barra degli indirizzi del browser e preme "Invio".
2. Una volta ricevuto quell'indirizzo, il browser chiede a un server DNS (complimenti dell'ISP) l'indirizzo IP dell'indirizzo fornito da Joe.
3. Il server DNS è obbligato.
4. Ora che il browser conosce l'indirizzo IP, invia un messaggio (in dialetto TCP) al server del sito Web, chiedendo una connessione.
5. Se il server è vivo e vegeto, invia una risposta riconoscendo la richiesta del browser e il browser risponde e riconosce il messaggio del server. (Nota: Sì, questa è una versione estremamente ridotta di un handshake TCP tra un client e un server.)
6. Quando le strette di mano sono finite, viene stabilita una connessione tra i due.
7. Ora, il browser cambia il suo stile dialettale in HTTP e chiede al server il sito web.
8. Il server, conoscendo la home page del sito web, restituisce proprio questo, che viene ricevuto dal browser e mostrato a Joe che sta aspettando pazientemente davanti al computer.

Passa una tipica richiesta HTTP tutti questo (e altro) per recuperare un documento attraverso Internet. Quindi se qualcuno di questi processi può essere avviato quando possibile, noi possiamo ridurre il tempo che dobbiamo aspettare per la consegna delle risorse che vogliamo.

Relazioni di collegamento HTML

W3C specifica 4 relazioni di link HTML (rel per relazione) nominato dns-prefetch, preconnect, prefetch, e PreRender. Insieme sono chiamati (dal W3C) il "Suggerimenti per le risorse". Ora, vedremo cosa possono fare e dove possono essere usati.

1. Prefetch DNS

Nel prefetch DNS, il risoluzione del nome di dominio (ovvero ottenere l'indirizzo IP corrispondente dal server DNS) viene fatto prima del tempo.

Diciamo che c'è una pagina di riferimento in un sito web con molti link di riferimento al suo sito gemello. Quando un utente visita la pagina di riferimento, c'è a alta probabilità che l'utente navigherà sul sito gemello. Quindi, un prima ricerca DNS per il sito gemello può ridurre il tempo necessario per aprire il sito (migliorando così l'esperienza utente).

Questo riduzione della latenza tramite prefetching DNS può essere fatto aggiungendo questo codice alla pagina di riferimento.

Quando un browser elabora questo codice nella pagina di riferimento, aggiungerà la ricerca DNS del sito affiliato alle sue code di attività e, quando sarà libero da altre attività con priorità elevata nella coda, avvierà la risoluzione DNS del sito gemello.

Quindi, quando un utente fa clic su uno dei collegamenti che li porta al sito affiliato, la risoluzione DNS di quel sito potrebbe essere già stata completata e il browser può immediatamente iniziare a stabilire la connessione TCP client-server con il sito gemello server, aumentando la velocità di caricamento della pagina.

Questa funzionalità è disponibile in quasi tutti i browser moderni ad eccezione di Safari a partire da marzo 2016.

2. Preconnect

Preconnect è un passo avanti rispetto al prefetch DNS, stabilisce una connessione al server a cui potrebbe essere inviata una richiesta più avanti in futuro.

W3C elenca un caso d'uso ideale per la preconnessione: redirect. Gli sviluppatori utilizzano i reindirizzamenti per una serie di motivi.

In questo caso, la richiesta successiva di un browser (sito reindirizzato) è 100% prevedibile, e può essere precollegati a, a ridurre la latenza di navigazione.

Immagina che ci sia una pagina del sito intermediario che reindirizza a "xyzsite", il seguente collegamento HTML renderà il browser precollegamento con il server xyzsite, quando arriverà a quella pagina intermedia.

A partire da marzo 2016, questo è disponibile in Chrome, Opera e Firefox.

3. Prefetch

Con prefetch, per una risorsa, il browser inizia ad implementare la risoluzione DNS del nome di dominio della risorsa, poi esegue una connessione TCP con il server della risorsa, effettua la richiesta HTTP e infine recupera e memorizza la risorsa prefetch nella cache del browser.

Se sei sicuro di quali risorse saranno necessarie in seguito, questa è la risorsa da precedere preventivamente; qui sta la presa. Il prefetching richiede congetture, e se indovini erroneamente, potresti effettivamente rallentare invece di accelerare il tuo sito.

Per libri, gallerie o portfolio online, se è più probabile che l'utente sfiori la pagina successiva, è possibile selezionare le risorse come immagini, può velocizzare le cose in modo significativo. Ecco il codice per farlo.

Prefetch è supportato in Chrome, Firefox e Opera.

4. Prerender

Solo per le pagine HTML è possibile eseguire il prerendering. Una pagina HTML prerenderata è reso offline, ed è dipinto sullo schermo quando è effettivamente necessario dall'utente. Rendering costa un lavoro di calcolo e una risorsa di memoria più elevati; inoltre, per rendere una pagina, il browser potrebbe aver bisogno di risorse aggiuntive (come le immagini aggiunte alla pagina) che porteranno a più richieste conseguenti dal browser.

Così, PreRender deve essere usato con cautela, e non abusato. Aggiungendo il codice seguente prerenderà anticipatamente la pagina "Informazioni".

Il prerender è già disponibile in Chrome, IE e Opera a marzo 2016.

Alcune cose da notare

(1) Nessuno dei summenzionati suggerimenti sulle risorse garantisce l'esecuzione e il completamento delle diverse fasi della richiesta per cui è stato realizzato poiché, quando il browser è già occupato, elabora le richieste necessarie per le operazioni della pagina corrente in cui si trova l'utente, eseguendo queste ottimizzazioni può ostacolare le attività correnti dell'utente.

Quindi, tutto è in coda ed eseguito quando il browser si sente abbastanza libero da farlo.

Questi suggerimenti sulle risorse non devono necessariamente essere presenti nella pagina anche prima del caricamento della pagina. Possono essere aggiunto successivamente da JavaScript, e i suggerimenti sulle risorse faranno il loro lavoro come al solito.

(2) W3C specifica a Attributo link HTML chiamato probabilità di suggerimento, pr (con valore 0 a 1) per questi suggerimenti risorsa, che possono essere utilizzati per fornire la probabilità di richieste che verranno fatte in futuro. Non ho ancora visto questo attributo implementato da nessun browser. Ad esempio, il seguente codice afferma che c'è un 80% di probabilità che xyzsite venga richiesto in futuro e il 30% per la pagina relativa.

Possiamo inoltre aggiungere l'attributo crossorigin facoltativo ai suggerimenti risorsa per informare il browser delle credenziali CORS della richiesta collegata.