Vediamo ora tre ulteriori funzioni di ottimizzazione del codice delle risorse all'interno di un sito web e le tre funzioni sono la funzione di la funzione di Connect e la funzione di D N S.

Allora, innanzitutto, la prima funzione, ovvero quella di, è una funzione grazie alla quale noi possiamo molto semplicemente nel momento in cui abbiamo un sito web con dei collegamenti interni, abbiamo la possibilità di far sì che mentre L'utente sta navigando il sito web, questi collegamenti interni vengano pre caricati.

Quindi sostanzialmente, se l'utente dovesse poi far click all'interno di uno di questi collegamenti l'apertura della pagina sarà immediata.

Quindi è un è un è una funzionalità molto utile, non tanto per il primo caricamento di pagine di per sé, quanto per la navigazione l'esperienza utente.

La seconda funzionalità è il pre Connect.

Il pre connect può essere molto utile nel momento in cui abbiamo un sito web o comunque delle pagine web che fanno accesso a molti domini di terze parti, quindi molti domini esterni.

Ad esempio, se nel tuo sito web è Go analytics o hai comunque degli strumenti di terze parti che sono fondamentali all'interno di tutte le pagine del tuo sito, web.

Quindi sai per certo che, um, ogni pagina di sul web dovrà scaricare delle risorse da quel dominio può effettuare una preco a quel dominio.

Ma a cosa serve la preco? Come vedi questa immagine? Abbiamo due situazioni.

La prima, quella che vedi qui con scritto Out pret, è la situazione in cui non non stai utilizzando preco.

Cosa succede? Che supponiamo di avere due scrip di terze parti che siano ad esempio analytics e il pixel di Facebook il pixel di meta.

Nel primo caso succede che durante la timeline, quindi durante la nostra sequenza temporale, nella fase di rendering della pagina, nel primo caso viene effettuata la connessione Analytics e il download dello script analytics.

Dopodiché viene effettuata la connessione A al pixel di a Facebook e poi viene effettuato il download del pixel di Facebook.

Perfetto.

Nel secondo caso con la funzione Connect cosa succede? Succede che il primo don la prima connessione, quella che avviene è quella relativa analytics.

Nel contempo, quindi allo stesso tempo, in modo sincrono, viene effettuata anche la connessione a, um al dominio di di meta di Facebook.

Subito dopo avviene il download e quindi il caricamento di go analytics e infine avviene il download del pixel di Facebook.

Come vedi abbiamo risparmiato del tempo perché cosa accade? Accade che effettuando una pre connessione noi non andremo a effettuare tutto il processo di scaricamento di una risorsa, ad esempio di terze parti, ma la pre connessione può effettuarla a vari domini, in modo tale che nel momento in cui poi ci sarà il bisogno di scaricare quella risorsa verrà scaricata direttamente, in quanto la connessione a quel dominio è già avvenuta.

Questo può essere molto utile, soprattutto nel momento in cui appunto abbiamo vari domini terze parti a cui ci colleghiamo, ma soprattutto nel momento in cui, ad esempio, un dominio di terze parti può avere dei rallentamenti, perché se noi abbiamo dei rallentamenti nella situazione iniziale, ovvero questa avremmo una una latenza, perché in questo caso si sta provando a connettere al dominio.

Magari nel frattempo sta caricando la pagina e e chiaramente questo implica un un rallentamento che noi non vogliamo.

Infine, la terza funzione è quella relativa al d n s.

Quindi il d n s è una fase soltanto della preco, quindi abbiamo visto la funzione del pret che appunto si connette completamente a un dominio pronto poi per scaricare una risorsa, il d n s ch invece fa solo una di queste tre attività, cioè l'attività di connect implica una risoluzione dei d n s, un una connessione t c p con il dominio e lo scambio la t l s.

Quindi lo scambio di chiavi c t l s il d n s p c.

Effettua solo la prima fase, cioè va solamente a risolvere il dominio di quel di quel nome dominio, quindi sostanzialmente va semplicemente a tradurre quel dominio in indirizzo p e viceversa.

Quindi va sostanzialmente a risolvere all'interno ad associare all'interno della sua rubrica quel dominio a un indirizzo p.

Questo è quello che fa, quindi è una fase molto preliminare solo fa uno un solo passaggio dei tre che effettua il pct, mentre la parte che vediamo in verde è quella poi di effettivo download della risorsa, ad esempio.

Quindi è molto importante dosare queste tre queste tre funzionalità, o meglio queste due per la fase di di connessione, ovvero il connect, il d n s.

In funzione di quello che di quello che dobbiamo andare a scaricare per le pagine e della quantità di dominio a cui ci dobbiamo collegare il d n S p.

Fet è un'operazione che richiede pochissimo carico al server, mentre chiaramente il pret è una funzione che ne richiede un po' di più.

Quindi utilizzare troppi preco può far sì che il rallentamento di cioè ci c'è, diciamo un rallentamento generalizzato di tutte le pagine del sito web, in quanto chiaramente precotte a tanti domini.

Um può comportare un impegno in termini di risorse da parte del server, quindi bisogna anche questo.

Um anche questa funzionalità bisogna dosarla.

Il mio consiglio è quello di utilizzare chiaramente il connect laddove ci sono dei dei domini di terze parti um ai quali siamo certi che ci colleghiamo per una pagina web in tutte le pagine del nostro sito web e di utilizzare ad esempio il D n s ch solamente per domini su cui magari non necessariamente ci colleghiamo all'interno della pagina web, magari solo sono necessari solo a scaricare alcune risorse e via attraverso la loro C D n e magari sono in determinate condizioni, quindi solo se l'utente loggato se sono in determinate condizioni, allora in quel caso può bastare il D n s per i ch.

Negli altri casi, quindi, casi in cui appunto, hai banalmente lo strumento di Analytics all'interno del tuo sito web Econnect può essere utile perché ti pre riconnette direttamente al dominio di Goal Analytics per poi scaricare lo script di gol quattro che sai per certo che verrà scaricato in tutte le pagine del sito web.

Passiamo quindi a Meers andiamo sotto la voce loading e la funzio-.

La prima funzionalità che andremo a utilizzare è in stage in stage è proprio la funzionalità di che abbiamo che abbiamo detto inizialmente.

Quindi la funzionalità grazie alla quale tutte le pagine interne al sito web verranno caricate immediatamente in quanto verranno pre caricate mentre l'utente sta navigando alla nostra pagina web.

Attiviamo quindi questa funzione e vediamo il risultato, quindi ci basta fare un click automaticamente.

Lo strumento in realtà andrà a precaricare le pagine tutti i collegamenti interni che trova durante la navigazione di un utente all'interno del sito web e in qualche secondo chiaramente appena l'utente entra all'interno della pagina non immedia- non è immediatamente tutto pronto, ma è qualcosa che fa al termine del quindi quando effettivamente il browser non sta più elaborando alcuna risorsa all'interno della pagina, allora inizia a precaricare tutti i collegamenti interni ora facciamo un test e lo facciamo in incognito perché chiaramente, non essendo legati questa funzionalità spesso non funziona o comunque non è.

Non è verificabile come lo è in in modalità in incognito.

Quindi apriamo una nuova scheda in incognito.

Copriamo l'u R l.

Eccoci qua.

Premiamo f dodici.

Apriamo il nostro tour, ricarichiamo la pagina.

In questo caso è importante che disabilitiamo la cash, altrimenti questa funzionalità non funzionerà e quello che possiam fare è semplicemente io ho messo un collegamento alla pagina contatti all'interno di questo pulsante al click, come vedi l'apertura immediata e per immediata intendo proprio immediata, nel senso che se andiamo nella nostra sequenza temporale di di risorse scaricate, vediamo che il tempo di download cioè il tempo di download di questa risorsa, è stato di tre millisecondi, quindi è veramente pressoché pressoché nullo.

E se andiamo sotto la voce, quindi il peso di questa pagina appare chiaramente sotto il peso, eh, il peso non compresso e sopra il che esce.

Cioè dice proprio che la pagina ha sfruttato la funzionalità di la stessa cosa.

Se noi andiamo, ritorniamo alla pagina iniziale.

Lo vedi la stessa cosa in questo caso? Tredici Milli secondi è stato relativamente lungo.

Però come vedi se io passo, ora ti faccio vedere da una pagina all'altra è immediato e questo immaginano chiaramente con un menù di navigazione molto ampio, molto complesso, con vari collegamenti interni alla pagina.

È molto, molto comodo.

Immaginano soprattutto per un e-commerce nel momento in cui sei in una, in una pagina di categoria e vuoi navigare all'interno di vari prodotti per confrontarli, entri, entrano in un prodotto, torni indietro, è tutto istantaneo e sembra quasi che sia offline e in realtà è così, perché se noi facciamo tasto destro ispezione, apriamo sempre la nostra, andiamo sotto network e andiamo a tramite questa questa mi tendina metterci offline, cioè quindi proprio simulare la situazione in cui siamo offline e così lo siamo realmente.

Facciamo click come vedi le pagine funzionano comunque perché vengono pre caricate, essendo pre caricate rimanendo in cash.

Noi non abbiamo più bisogno della connessione, quindi due vantaggi sostanzialmente l'utente sarà molto contento perché navigherà le pagine come se fosse un'app come se fosse offline e il nostro server avrà meno carico, o meglio meno carico in contemporanea.

Perché in realtà nel momento in cui l'utente entra, inizia a navigare la pagina il server inizia a recapitarle quelle che sono le pagine interne, quindi in un certo senso può essere più carico visto sul lungo termine, ma una volta che l'utente le ha caricate, poi non ci sarà più alcun tipo di carico del server.

Come vedi se io faccio click ad esempio su un collegamento esterno non funziona perché siamo offline.

Abbiamo simulato la situazione offline, ma nonostante ciò le pagine funzionano tranquillamente, appunto perché vengono pre caricate e questo è molto, molto interessante, molto utile in da integrare appunto in tutti i siti web.

Passiamo ora alla funzione connect nella funzione connect.

In questo caso noi andiamo a specificare un u r l um in particolare è un dominio che noi vogliamo che l'utente vada a precotte in cui l'utente vada a precotte e possiamo specificare cross in questo caso, a meno che tu non sappia di cosa si tratta, ti consiglio di non spuntare questa opzione perché non è necessaria nella gran parte dei casi.

Quindi ora inventiamo un dominio c d n punto luca punto com e facciamo save changes.

Quindi salviamo ora non ti mostrerò come avviene la pre connessione perché è un concetto anche eh, comunque come ti ho fatto.

Ti ho mostrato prima, ma è un concetto, un po' difficile da contestualizzare all'interno del rendering se non conosci tutto, tutta la fase del processo di rendering è anche difficile da diagnosticare, in quanto non si utilizza la funzione di network, ma si utilizza con la performance ed è un po' più complessa e racchiude informazioni un po' troppo complesse, non non necessarie, diciamo in questo.

In questo contesto, quindi, il modo per vedere se effettivamente la funzione è stata implementata è quello di far tasso destro all'interno della pagina fare visualizza sorgente pagina e semplicemente cercare connect.

Ecco qua come vedi c'è la pre riconnessione a c d n punto luca punto com, anche se in realtà è un dominio che nemmeno esiste.

Però noi possiamo farlo in funzione di quelli che sono gli strumenti esterni e i vari domini a cui loro si connettono.

Quindi, una volta identificati i domini a cui si connettono sempre tramite il nostro nella sezione network, perché noi ricaricando la pagina e mettendo la spunta su tre parti di questo abbiamo la possibilità di vedere i domini di terze parti a cui ci stiamo? Um ci stiamo connettendo una volta fatto questo si possono inserire all'interno del connect.

Chiaramente possiamo aggiungere quanti ne vogliamo, ma come ti ho raccomandato prima fai attenzione a non metterne troppi e soprattutto inserisci solamente i domini a cui sai che aprire.

Ogni pagina del tuo sito web dovrà connettersi per scaricare delle risorse.

Infine c'è l'ultima l'ultima funzionalità che è la d n s n s.

Anche qui possiamo specificare il dominio in questo caso lo facciamo con slash invece di di mettere h t t PS, ma in realtà è pressoché è pressoché identico.

Anche in questo caso facciamo c d n punto luca ow punto com facciamo changes in questo caso se vogliamo aggiungerne di più semplicemente li separiamo uno per riga.

Torniamo qui, aggiorniamo la pagina c'è un tasto destro visualizza sorgente pagina e cerchiamo la funzionalità di n s meno.

Eccolo qui in realtà ne troviamo due.

Il primo è quello che ho aggiunto io um d n s p c d n punto luca punto com e il secondo è quello che aggiunge in automatico shore pixel perché appunto abbiamo utilizzato shore pixel per l'ottimizzazione delle immagini dal momento in cui la c d n s shore pixel si conne- si connette um praticamente per tutte le pagine del sito web.

Ovunque ci sono delle immagini loro han pensato bene di effettuare un un, cioè una risoluzione dei d n s prima della connessione completa alla c alla loro c d n.

Quindi questo è quanto abbiamo visto tre funzionalità che sono molto interessanti e che veramente con con pochi click e un po' di un po' di testa si possono implementare facilmente, dando però un un grande impatto in positivo in termini di prestazioni.