Vediamo adesso come gestire e ottimizzare al meglio i file già scritto, ovvero i file che determinano vari tipi di interazione all'interno del sito web.

Allora, qui a riguardo all'interno di Mathers abbiamo principalmente due funzionalità che sono quelle effettivamente più utili per l'ottimizzazione di queste tipologie di scritte.

Innanzitutto, una cosa molto importante è differenziare tra script interne al sito web, quindi quelli che compongono in genere il tema e i plugin che fanno uso di varie funzionalità e script esterne al sito web e che molto spesso sono scrip di tracciamento.

Quindi ad esempio il pixel di meta oppure, um, vari sistemi di tracciamento che sono presenti all'interno del nostro sito web.

Qui abbiamo principalmente due due possibilità La prima è quella di The JavaScript, quindi di differire il caricamento del Jorit e la seconda è quella di ritardarlo, cioè quello di lei.

Vediamo le due differenze allora in questo in questo grafico.

In queste in queste tre soluzioni abbiamo il primo caso in cui il javascript viene caricato in modo sincrono, ovvero viene nel momento in cui viene rende realizzato l H T M l.

Non appena si presenta lo script viene scaricato, eseguito e nel frattempo va avanti il rendering della h m l.

Quindi in questo in questo caso il è bloccante per il della pagina, perché appunto si si pone nel mezzo.

Durante la fase di rendering abbiamo il secondo caso in cui c'è l'attributo a sincro, quindi viene caricato in modo asincrono.

Cosa significa? Che lo script viene scaricato in modo um nel momento in cui si presenta viene um ese- e viene eseguito e dopodiché continua a rendere h t m l.

In questo caso però, vedi la differenza avviene sul fatto che lo script intanto che viene scaricato, prosegue il renderli nella pagina, quindi non è propriamente bloccante il suo download, ma solo la sua esecuzione, la sua eventuale esecuzione e infine c'è la soluz- soluzione quindi col defa.

Cosa succede che in modo asincrono viene scaricato lo script nel momento in cui si presenta.

Nel frattempo rende nella pagina avanti solo quando il della pagina termina, allora lo script viene eseguito, quindi la soluzione ottimale nel momento in cui vogliamo andare a gestire uno script, far sì che questo script venga venga caricato solamente dopo che renderli nella pagina è stato completato.

Quindi se uno script non è di fondamentale importanza allora quindi torniamo su e proviamo ad attivare la funzionalità del.

In questo caso abbiamo la possibilità di escludere degli scritti dal dal Cosa significa che di base lui andrà a inserire a tutti i file e noi possiamo eventualmente specificare dei file che non vogliamo che vengano caricati in modo differito.

In questo caso, se andiamo nel nostro sito web, andiamo sotto la voce network all'interno del Ros e mettiamo un filtro per JavaScript.

Vediamo che sono presenti dei già scritti, in questo caso eh piuttosto essenziali in quanto fan parte del tema e fa parte di um in particolare di di elemento e di conseguenza quello che possiamo andare a fare è comunque farli caricare in modo differito in modo tale che all'interno di tutto il processo di rendering vengano caricati solo dopo.

Come vedi ora cosa succede ricarichiamo la pagina, vengono scaricati per primi i fogli di stile, come è giusto che sia.

Dopodiché c'è il acquiri, che è una tipologia di molto una tipologia di di di di javascript, di di codice javascript.

Dopodiché vengono caricate le immagini e altro.

Noi, per esempio, vogliamo che questi questi script vengano caricati solo alla fine perché supponiamo di non volerli ritenere importanti.

In questo caso il è quello che determina molto spesso il funzionamento di un menù, quindi può essere comunque fondamentale e utilizzare la modalità differita può far sì che questo non funzioni correttamente.

Quindi anche riguardo a questa ottimizzazione, una volta applicata, ti invito a verificare che tutto il funzionamento, soprattutto le parti di interazione all'interno del sito web, funzionino correttamente.

Spostiamoci quindi su Mathers attiviamo questa funzionalità, facciamo Changes okay, ricarichiamo il nostro sito web e vediamo quel quei due Jacqui se vengono scaricati solo dopo.

Allora come vedi solo solo uno dei due? In realtà probabilmente questo non è differibile o comunque fa parte di um fa parte del codice e all'interno del codice non riesce a effettuare quella modifica.

Però quello che è successo è che appunto uno dei due jscript viene caricato solamente dopo solo dopo il di pagina.

Quindi quando ha scaricato praticamente tutte le immagini e il motivo per cui non ha non ha differito anche questo, appunto è perché questo potrebbe avere delle dipendenze.

Potrebbe dipendenze intendo da altri, da magari altri elementi e altre risorse potrebbe far parte del codice, quindi per Mers magari non riesce a modificare quella specifica stringa.

Quindi chiaramente per mers, così come tutti gli strumenti di ottimizzazione delle prestazioni, vanno a intervenire laddove possono in questo caso solo uno dei due l'ha reso differito.

Quindi come vi come vedi, cambia il suo posizionamento all'interno del del percorso di rendering la stessa cosa o meglio una cosa simile possiam farla con il d.

Il d però opera in modo completamente diverso da queste tre soluzioni.

Ovvero cosa fa il dla rispetto alla versione quello che va a fare è attende il completamento del di pagina, quindi non scarica nemmeno lo script, attende il completamento totale, dopodiché solo alla prima interazione dell'utente.

Quindi nel momento in cui l'utente fa il primo movimento del mouse o fa il primo il primo tocco con il dito all'interno di uno smartphone o di un tablet.

A quel punto scarica ed esegue lo script.

Quindi cosa succede? Che il caricamento di pagina è veramente immediato perché non include nemmeno il download con la script e dopodiché, um al pri- alla prima interazione scarica esegue lo script, quindi abbiamo tanti pro il fatto che comunque questo script non venga scaricato il contro pro quale può essere? Innanzitutto che se lo script fa parte del delle funzionalità essenziali della pagina, come ad esempio la funzionalità di un menù o di qualche elemento, che comunque è fondamentale all'interno della pagina.

Questo potrebbe non venir caricato correttamente e di conseguenza potrebbe generare un malfunzionamento di quel di quella tipologia di interazione.

Il secondo il secondo contro qual è è il fatto che se ad esempio stiamo parlando di un sistema di di un sistema di tracciamento, quindi supponiamo che sia analytics che noi stiamo ritardando, a cui stiamo applicando il D la um se chiaramente un utente entra all'interno del sito web sta fermo, sta fermo dieci secondi e poi esce senza effettuare alcuna interazione.

Go analytics non è mai stato caricato all'interno di quella pagina e di conseguenza quella sessione è come se non fosse mai esistita per analytics.

In realtà c'è stata quindi può avere dei piccoli contro in termini di tracciamento.

Qui sta a te capire in quale in quale contesto utilizzarlo facciamo facciamo un test, prendiamo un un javascript.

Vediamo, magari prendiamo proprio quello che stiamo ritardando.

Okay, prendiamo migrate.

In questo caso facciamo tasto destro Copy R l.

Quindi copiamo l' r l attiviamo di javascript in questo caso noi di base non va a ritardare tutti i file JavaScript perché sarebbe follia, ma ci fa specificare quale voler ritardare specificando semplicemente il nome.

Ora incolliamo l' r l e manteniamo solamente il nome del file.

Se è presente una versione in genere dovrebbe riconoscere automaticamente al altrimenti lo specificheremo.

In questo caso, come ti dicevo, va a ritardare solamente gli script che tu specifichi.

In alternativa può ritardare tutti a priori e quindi andare ad escludere quelli che non vuoi che vengano ritardati.

Noi chiaramente facciamo sì che ritardi solamente questo script e infine possiamo impostare un time out, cioè far sì che ad esempio nel caso che ti ho fatto prima dell'esempio di analytics.

Se l'utente per dire non dovesse interagire con la pagina entro dieci secondi, lo script comunque verrà eseguito perché sappiamo che l'utente è lì in questo caso lui lui lo determina da solo.

Il tempo è indicativamente di dieci secondi, comunque in modo tale che anche se l'utente non dovesse fare alcuna interazione con la pagina, se entro dieci secondi non interagisce lo glielo facciamo scaricare comunque tanto sappiamo per certo che dopo dieci secondi la pagina sarà già stata scaricata e renderizzare completamente.

Ora facciamo Changes.

Il nostro fine in questione era appunto jQuery migrate.

Quindi lo scriviamo proprio nel Filter.

Qui jQuery meno migrate, così lo troviamo facilmente.

Aggiorniamo la pagina.

E come potrei vedere? Lo script non verrà scaricato.

Vediamo se è così perfetto.

Come vedi, lo scritto non viene scaricato nel momento in cui ora fa farò la prima interazione col mouse.

Verrà scaricato.

Eccolo qui.

Come vedi, è stato scaricato.

Se noi facciamo Hall, togliamo questo filtro e andiamo a vedere chiaramente rispetto a tutta la coda di richieste che sono state scaricate per questa pagina che qui L'emigrato è scaricato.

È stato scaricato solo alla fine.

Se guardiamo sulla destra Waterford c'è il grafico a cascata.

Vediamo che rispetto a dove sono stati scaricati le altre risorse, questa è scari-.

È stata scaricata ben dopo.

Infatti, diversi secondi dopo facciamo un altro test.

Ricarichiamo la pagina.

Mettiamo sempre nel filtro jQuery meno mite.

In questo caso siam fermi.

Quindi simuliamo un utente che non fa alcun tipo di interazione, avendo specificato un out dopo circa appunto dieci secondi, il file verrà scaricato comunque.

Eccolo.

Infatti, come vedi, io non ho fatto alcun tipo di interazione il mio mouse è ancora lì fermo.

Eppure lo è stato scaricato comunque in modo tale appunto di qualora tu avessi degli degli di tracciamento, di farli avviare comunque dopo un tot di tempo all'interno del quale l'utente comunque non non ha interagito.