it.hideout-lastation.com
Come accelerare il sito web con Etichetta
" Predisporre " i browser sono il futuro della navigazione Internet ad alta velocità, portandoci le risorse che vogliamo anche prima che sappiamo che li vogliamo . I browser di oggi già fanno alcune previsioni di tanto in tanto per accelerare il recupero e il rendering dei documenti. Per portare questo al prossimo passo, non cerchiamo nient'altro che gli sviluppatori web.
Gli sviluppatori hanno una buona idea di come vengono navigati i loro siti web e quali sono le risorse 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 trasmettere queste previsioni ai browser e metterle 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:
- Joe digita l'indirizzo recuperabile dal sito Web nella barra degli indirizzi del browser e preme "Invio".
- Una volta ricevuto questo indirizzo, il browser richiede un server DNS (complimenti dell'ISP) per l'indirizzo IP dell'indirizzo fornito da Joe.
- Il server DNS è obbligato.
- Ora che il browser conosce l'indirizzo IP, invia un messaggio (in dialetto TCP) al server del sito Web, chiedendo una connessione.
- 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 annacquata di un handshake TCP tra un client e un server.)
- Quando le strette di mano sono finite, viene stabilita una connessione tra i due.
- Ora, il browser cambia il suo stile dialettale in HTTP e chiede al server il sito web.
- 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.
Una tipica richiesta HTTP passa attraverso tutto questo (e altro) per recuperare un documento attraverso Internet. Quindi, se uno qualsiasi di questi processi può essere avviato quando possibile, possiamo ridurre il tempo che dobbiamo attendere per la consegna delle risorse che vogliamo .
Relazioni di collegamento HTML
W3C specifica 4 relazioni di collegamento HTML ( rel per relazione) denominate dns-prefetch, preconnect, prefetch e prerender . Insieme sono chiamati (dal W3C) i " Suggerimenti per le risorse ". Ora vedremo cosa possono fare e dove possono essere utilizzati .
1. Prefetch DNS
Nel prefetch DNS, la risoluzione del nome di dominio (ovvero l'ottenimento dell'indirizzo IP corrispondente dal server DNS) viene anticipata.
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'è un'alta probabilità che l'utente possa navigare verso il sito gemello. Pertanto, una ricerca DNS iniziale per il sito affiliato può ridurre il tempo necessario per aprire il sito (migliorando in tal modo l'esperienza dell'utente).
Questa riduzione della latenza tramite il prefetching DNS può essere eseguita 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 della 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 a 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 preconnect: reindirizzamenti . Gli sviluppatori utilizzano i reindirizzamenti per una serie di motivi.
In questo caso, la successiva richiesta di un browser (sito reindirizzato) è prevedibile al 100% e può essere preconnessa a, per ridurre la latenza di navigazione .
Immagina che ci sia una pagina del sito intermediario che reindirizza a " xyzsite ", il seguente link HTML renderà il browser precollegamento con il server xyzsite, quando arriva 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, quindi 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 in anticipo; qui sta la presa. Il prefetching richiede congetture e, se si indovina a torto, si potrebbe effettivamente rallentare anziché accelerare il sito.
Per libri, gallerie o portfolio online, se l'utente è più propenso a passare alla pagina successiva, il precaricamento delle risorse come le immagini può accelerare notevolmente le cose. 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 prerender viene resa offline e viene dipinta sullo schermo quando è effettivamente necessaria all'utente. Il 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 richieste più frequenti da parte del browser.
Quindi, il 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 è fatto perché, quando il browser è già impegnato nell'elaborazione delle richieste necessarie per le operazioni della pagina corrente in cui si trova l'utente, l'esecuzione di tali ottimizzazioni può ostacolare le attività correnti dell'utente .
Quindi, tutto viene messo 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 aggiunti in seguito da JavaScript e i suggerimenti sulle risorse svolgeranno il loro lavoro come al solito.
(2) W3C specifica un attributo link HTML chiamato hint probability, pr (con valore 0 a 1) per questi hint di risorse, che può essere usato per fornire la probabilità di richieste che verranno fatte in futuro. Non ho ancora visto questo attributo essere 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 about.
Possiamo inoltre aggiungere l'attributo crossorigin facoltativo ai suggerimenti risorsa per informare il browser delle credenziali CORS della richiesta collegata.
Guida di base per creare una migliore esperienza di e-commerce
La progettazione di siti Web di e-Commerce implica molto più della semplice creazione di pagine che attirano visitatori. Questo è importante, ovviamente, ma il modo in cui il tuo sito web tratta i clienti una volta arrivati su una pagina è di uguale importanza.Desideri gli strumenti giusti per il lavoro e devi sapere come applicarli al meglio cercando di proteggere non solo i loro acquisti, ma anche la loro appartenenza e la fedeltà al marchio. Ciò ai
20 capi indossabili di ultima generazione che puoi acquistare
Il concetto di usare i wearable per aiutarti a monitorare e monitorare meglio la tua forma fisica non è una novità. Infatti, nel 2014, i wearable per il fitness stanno diventando mainstream. Possiamo finalmente vedere molti di questi dispositivi indossabili intelligenti disponibili per uso commerciale.
