Benissimo.

Ora che abbiamo visto quali sono i tre principali strumenti per l'analisi di un sito web, passiamo a quella che è un'analisi vera e propria.

Quindi un un'analisi pratica di un sito web è un'operazione che chiaramente tu puoi effettuare sia sul tuo sito web sia su un sito web, ad esempio della concorrenza o comunque un sito web di cui non hai non hai accesso.

In questo caso andremo a utilizzare una lista di controllo che è quella che utilizzo personalmente per effettuare analisi di questo tipo che va a raggruppare tutti quelle che sono le criticità più frequenti che possono emergere su un sito web relativamente alle prestazioni.

Quindi, come vedi, questo è il documento a cui anche tu puoi avere accesso a un foglio Google.

Puoi scansionare il codice Q R oppure digitare questo collegamento nella barra degli indirizzi del browser.

Importante premessa Questo è un è uno, quindi un collegamento corto che non ha alcun tipo di tracciamento avanzato come pixel di meta o altro.

Veniamo quindi a quello che è il documento.

In questo documento troviamo una struttura che ci permette di avere una panoramica generale di quelle che sono tutte le criticità del sito web e partiamo da quella che è la prima colonna, ovvero lo Stato.

Lo Stato va a indicare magari facciamo un pochino più di Zoom.

Così, perfetto.

Lo Stato va a indicare quello che è il eh lo stato del test che andremo a effettuare della potenziale criticità.

Quindi, nel momento in cui noi andremo a effettuare questo test, se il test dovesse essere superato, allora andremo a spuntare la casella e di conseguenza, grazie alla formattazione condizionale, il test verrà cancellato.

Quindi non non distoglierà la nostra attenzione? Sì, la seconda colonna è la colonna relativa alla categoria.

Quindi, dal momento in cui abbiamo molti test, molte criticità potenziali sono circa quaranta quarantacinque.

Um, ho pensato appunto di dividerli per categorie, in modo tale che noi possiamo innanzitutto avere una panoramica generale di tutte le aree di competenza e in secondo luogo, possiamo delegare le varie attività alle persone più indicate.

Quindi, ad esempio, se abbiamo dei problemi relativi al server, come vediamo qui in queste in questi test possiamo direttamente delegare queste attività, copiarle e delegarle al sistemista, alla persona che si occupa di questo a specifica area di competenza.

Dopodiché abbiamo il test.

Quindi il test di per sé è il test che andremo a effettuare, che in questo caso io ho inserito in forma negativa.

Quindi troveremo sempre la forma negativa, cioè la situazione in cui effettivamente il sito web ha questo problema, in modo tale che, qualora non dovesse avere questo problema, noi lo spunterebbe e comunque non sarà visibile perché sarà barrato e di conseguenza questo ci permetterà di supponendo di avere vari test effettuati.

Alcuni passati, altri no ci permette di avere solamente a primo impatto tutti quelli che sono i test non superati e quindi vediamo proprio all'interno del test la criticità emersa.

Poi abbiamo le note documentazione questo può servire a noi qualora utilizzassimo l'analisi e vogliamo avere degli approfondimenti su quello che è il tema.

Quindi io ho pensato di farlo sia per tutte le parole tutti i termini abbreviati o magari termini tecnici um che magari puoi avere difficoltà a comprendere sia per quelle che sono eventuali approfondimenti.

Quindi nel caso ad esempio del dopo ci arriveremo nel caso del degli algoritmi di compressione, quindi gzip brotto ho messo degli approfondimenti in modo tale che tu possa approfondire eventualmente il tema la stessa cosa.

Tu chiaramente puoi farla qualora facessi questa analisi per un tuo cliente per un tuo collaboratore e volessi dare lui più indicazioni, perché magari questa persona non ha le competenze per comprendere appieno l'analisi e di conseguenza potrai inserire degli approfondimenti in modo tale che possa comprendere al meglio.

Poi abbiamo le due colonne più importanti che ci permettono di dare una priorità a quello che stiamo facendo, che sono la l'importanza e l'impatto.

L'importanza va a indicare l'importanza della criticità.

Quindi quando la criticità è importante, dopo vediamo su che su che metri che lo facciamo e poi c'è l'impatto l'impatto va a indicare semplicemente quello che è l'impatto di questa di questo test di questo di questa criticità rispetto alle prestazioni del sito web e quindi che impatto può avere rispetto alle prestazioni? Di conseguenza, rispetto all'esperienza utente all'interno della pagina web o del sito web, facciamo un esempio molto, molto semplice prendiamo il primo caso il primo test Il sito web non utilizza h t t PS per tutte le pagine in questo caso eh H T t PS è il protocollo che permette una connessione al sito web sicura crittografata, quindi in modo tale che i dati che passano all'interno del sito web non vengano non possano essere intercettati da malintenzionati o dal titolare del sito web.

E in questo caso L'importanza è alta perché chiaramente è un è un problema non solo di prestazioni ma anche di sicurezza e non avere h t t PS può far sì che un che una persona non voglia proprio navigare il sito web perché non si sente al sicuro.

L'impatto in questo caso è basso perché avere un sito web con protocollo h T t PS velocizza leggermente.

Parliamo di pochi centesimi di secondo la la la velocità del si può velocizzare leggermente la velocità del sito web, ma di fatto l'impatto sulle prestazioni è veramente minimo se non nullo.

Di conseguenza è più che altro un problema di sicurezza che impatta anche sulle in minima parte sulle prestazioni.

Quindi abbiamo un'importanza alta, quindi è un problema che va assolutamente risolto nel più breve tempo possibile, ma con un impatto basso sulle prestazioni.

Okay, adesso togliamo tutte le spunte e andiamo a effettuare questo tipo di analisi con un sito web.

In questo caso prendiamo ancora di riferimento l'rna e effettuiamo l'analisi utilizzando principalmente quindi la suite di strumenti di Google Chrome che abbiamo visto nella scorsa edizione e nella scorsa lezione.

Quindi andiamo sull' Erna.

Siamo sul sito web e in questo caso facciamo tasto destro e ispeziona o premiamo f dodici per far comparire la nostra suite strumenti e partiamo andando in network.

Chiaramente ora andremo a fare l'analisi completa del sito web.

Basandoci su questi punti, quindi un'analisi comunque piuttosto piuttosto completa, non va necessariamente in profondità su tutto.

Quindi se ci sono eventuali problemi specifici bisogna effettuare analisi ancora più specifiche, ma diciamo che va a coprire il novanta per cento delle delle potenziali problematiche di di prestazione.

Chiaramente la stessa analisi è possibile effettuarla utilizzando altri strumenti come Google Insis Test.

Possiamo diciamo però diciamo anche combinare tutti quelli che sono i vari strumenti al fine di avere un'analisi quanto più completa possibile.

Noi andremo a utilizzare Urs anche perché si eh, diciamo rappresenta appieno quello che è il nostro ambiente di test.

Quindi noi abbiamo il controllo completo sul su questo strumento e sul nostro ambiente, ovvero in questo caso un computer Windows con Google Chrome, con una connessione in fibra via cavo e eccetera eccetera.

Quindi partiamo con l'analisi.

Il primo test è relativo alla l'uso dell'h t t PS, quindi ho spiegato poco fa cosa cosa cosa riguarda e in questo caso dobbiamo appunto vedere se tutte le pagine del sito web fanno uso di H t t, PS o meno.

Allora in realtà in questo caso dovremmo testare tutte le singole pagine del sito web, che nel caso di possono essere centinaia.

In altri casi possono essere decine di migliaia o centinaia di migliaia.

Quindi è un po' complesso andare a testare tutto.

Bisognerebbe utilizzare altri strumenti, come ad esempio Screaming Frogs o che è uno spider, ovvero è un è un bot a simulare quello che è il comportamento di Google nel momento in cui scansiona un intero sito web.

Chiaramente in questo caso sarebbe un'analisi un po' troppo complessa, un po' troppo lunga da fare impegnativa.

Quindi noi ci limitiamo a scansionare la pagina iniziale, quindi vediamo se il problema si presenta sulla pagina iniziale, dando per scontato che se non si presenta sulla pagina iniziale non si presenterà anche sulle pagine interne.

Chiaramente non abbia la certezza in quel caso andrebbe verificato.

Però in questo caso, per una questione di di rapidità ci limitiamo alla pagina iniziale, quindi ricarichiamo la pagina con f cinque o premendo l'icona di ricarica.

Attendiamo che termini il completamento possiam vederlo qui in alto a sinistra perfetto.

Una volta terminato, quello che dobbiamo andare a fare è verificare che all'interno della scheda network tutte le risorse abbiano facciano uso di un dominio con h t t PS come facciamo a vederlo semplicemente facciamo tasso destro all'interno dell'intestazione di una delle colonne che vediamo all'interno della tabella e inseriamo, troviamo la voce corretta skim eccolo qui e in questo caso vediamo la tipologia di protocollo in uso.

Perché? Perché tra le tra le varie colonne che abbiamo che sono, cioè cioè al cento per cento personalizzabili, quindi noi possiamo toglierle e metterle a nostro piacimento.

C'è la colonna relativa allo skim che è la tipologia di protocollo in uso se h t t p o t t PS quindi cosa facciamo in questo caso stiamo vedendo se ogni singola risorsa sta facendo uso di h t t PS dato che abbiamo duecentoquarantotto risorse richieste lo vediamo qui in basso a sinistra dove sto portando il mouse dobbiamo verificare che effettivamente non possiamo fare uno scroll per tutte, quindi semplicemente le ordiniamo, quindi mettiamo un ordine crescente o decrescente e come vediamo, non c'è alcuna risorsa in H t t PS n in h t t p, altrimenti sarebbe apparsa come prima.

Quindi in questo caso questo test è passato.

Possiamo togliere la nostra colonna skin che in questo caso non ci servirà più e andare a inserire il test come passato e di conseguenza abbiamo il nostro test superato e non lo vedremo più.

Non ci darà più, um non ci distrarrà più rispetto agli altri.

Poi passiamo al secondo.

Il sito web non è ottimizzato per l'uso su dispositivi mobili, allora in questo caso faccio riferimento in linea generale a l'ottimizzazione su smartphone e tablet.

Quindi verificare che il sito web sia ottimizzato per l'uso su su smartphone e tablet, affinché chiaramente quei dispositivi possano navigare al meglio.

Navigare nel nella maniera ottimale.

Questo è fondamentale perché oggigiorno è sempre più in in crescita il traffico sui siti web proveniente proprio da dispositivi mobili.

Perché chiaramente sempre meno più persone navigano nei siti web con computer o computer desktop o computer portatili e di conseguenza è fondamentale che siano ottimizzati.

Per fare questo diciamo ci sono vari test e a livello principalmente di usabilità.

La prima cosa che possiamo fare è andare a far click su questa icona per far sì che andiamo a simulare il sito web su una vista per smartphone.

Quindi in questo caso abbassiamo la nostra la nostra finestra di pes e andiamo a ingrandire un po', quella relativa quella relativa al dispositivo in uso.

Facciamo fit windows, anzi facciamo cento per cento e in questo caso stiamo andando a simulare un iphone quattordici pro max.

Possiamo farlo con altri dispositivi? Possiamo farlo con con dei tablet, ad esempio ipad, mini ipad air e possiamo andare a verificare un po' il funzionamento generale del sito web, cioè verificare che a livello di esperienza utente il sito web navighi si si navighi correttamente.

Tutti gli elementi siano, um siano disposti in ordine nell'ordine corretto, ma soprattutto possiamo andare a ricaricare la pagina, quindi premendo f cinque e verificare che effettivamente la pagina carichi in tempi accettabili.

In questo caso l'abbiamo già visto.

Il tempo di risposta al sito web è piuttosto lento.

Vediamo se si verifica ancora.

Adesso andiamo in ordine di water, quindi ordiniamo le risorse per l'ordine in cui vengono scaricate dal browser.

In questo caso vediamo il documento H t m l che lo vediamo già qui sotto.

La colonna time ha impiegato tre secondi e quarantotto a ca- tre secondi e quarantatré a caricare.

E se facciamo click andiamo sotto la voce timing, vediamo che il problema è relativo al tempo di risposta s r.

Quindi sappiamo che a priori il sito web um a un tempo disposto ad essere piuttosto lento.

Tuttavia abbiamo visto che gli elementi si sono caricati, mi è sembrato di vedere correttamente.

Non ci sono, quindi non sembrano esserci particolari problemi di prestazioni rispetto alla versione desktop.

Potremmo fare appunto lo stesso test con uno smartphone.

Simulare poi eventuali connessioni più lente da questa voce qui da questo menù a tendina e fare tanti vari test.

Quindi diciamo questo è un è un test più in linea generale.

Ora non mi soffermo troppo appunto per non rendere l'analisi troppo lunga, però diciamo che in linea generale il test è stato superato.

Poi il il sito web non utilizza alcun sistema di pre connessione a dominio di terze parti.

Allora questo è un è un aspetto molto interessante perché permette di pre riconnettere il sito web o meglio la pagina web a domini di terze parti per permettere poi a quel dominio di essere um di di caricare degli iscritti, ad esempio delle risorse all'interno del sito web durante il caricamento di pagina.

Perché serve? Perché se ad esempio nel nostro sito web utilizziamo Gos e sappiamo che Go Litis verrà avviato in tutte le pagine del sito web, è importante pre riconnettersi a quel dominio affinché poi la risorsa sia pronta per essere caricata all'interno del all'interno del browser.

Quindi, una volta effettuata questa pre connessione, il dominio la la connessione a quel dominio sarà già stata effettuata, quindi ci sarà sarà già stata svolta la risoluzione dei d n s, l S s l e altre altri processi per poi caricare semplicemente la risorsa necessaria.

Quindi è importante per preparare il browser a caricare quella risorsa, perché chiaramente i domini di terze parti molto spesso includono degli iscritti che rendono bloccante molto spesso il di pagina, quindi rallentano un po' quello che è il tempo oltre il quale poi l'utente può interagire con la pagina.

Quindi per effettuare questo test, eh, lo facciamo analizzando il codice sorgente della pagina, quindi facciamo semplicemente tasto destro all'interno della pagina web facciamo visualizza sorgente pagina o premiamo c t l p u di udine verrà caricato il codice sorgente.

Facciamo un ritorno a capo automatico, quindi semplifichiamo un po' la vista del codice okay, altrimenti avremo tutte le righe vanno troppo a destra e cerchiamo facendo tasto destro no, scusa eh facciamo contro più f c tre l più f oppure apriamo queste mutandine e facciamo trova Ecco qua trova ctre l più f e scriviamo preco.

Okay, in questo caso vediamo che non è in uso la funzione di, ovvero di pre connessione con dei domini, ad esempio esterni.

Allora in questo caso non è necessariamente un problema, nel senso che la funzione più connect è molto utile, ma va dosata correttamente.

Non è necessario connettersi a tutti i domini um che vengono utilizzati all'interno del sito web tutti i domini esterni, ma solamente a quelli che effettivamente sono sono necessari.

Quindi ad esempio guys, tutti quei quei domini che sappiamo che a priori attiveranno poi degli script o delle risorse all'interno del sito web.

In questo caso dovremmo appunto analizzare le le risorse che sappiamo che vengono utilizzate all'interno di tutto il sito web.

Prendiamo l'esempio non lo so di Google Analytics vediamo se è integrato? Ma presumo di sì.

Eccolo qui google analytics punto com e in questo caso quindi un'idea potrebbe essere quella di pre riconnettersi a questa risorsa, perché tanto sappiamo che verrà appunto attivata in tutte le parti del sito web.

Oltre a questa funzione, c'è la funzione di d n s.

Eccola qui in questo caso è presente, lo vediamo qui e questo in questo caso è la risoluzione dei d n s è solo una parte della preco a un dominio.

Quindi in questo caso stiamo andando a dire guarda preco, cioè effettua la risoluzione dei d n s di questi domini che io ti sto andando a indicare che sono questi qui per quindi poi prepararti a connetterti a loro.

Quindi diciamo che questo serve principalmente a preparare il browser, ma non del tutto.

Quindi è un po'.

Come dire guarda, risolvi i d n s poi e tienili lì se mai mi dovessi con mi dovessi connettere a questi domini.

Quindi è un po' la situazione in cui non siamo certi che la connessione a questi domini avvenga in tutte le pagine.

Quindi è è un passo, un po', eh? È un passo in meno rispetto alla preco.

La preco invece è qualcosa che comunque richiede un un minimo quantitativo di risorse, però permette al browser di essere già pronto per poi caricare quella risorsa.

Quindi è un passo in più.

In questo caso chiaramente dovremmo esaminare se il sito web nello specifico ha bisogno di pre connessioni a dei domini di terze parti, perché li riteniamo essenziali.

Supponendo che sia così, noi andiamo a mettere che il test effettivamente non è stato superato.

Quindi non non c'è un sistema di precossi ai domini di terze parti se non il d n s.

Quindi eventualmente possiamo specificare nella documentazione solamente la funzione delle note d n s perfetto.

Poi andiamo avanti.

Il sito web ha una priorità di di caricamento degli elementi errata.

In questo caso faccio riferimento a proprio la priorità con la quale si caricano i vari elementi della pagina web.

Quindi sempre sotto la voce network aggiorniamo ancora la pagina per f cinque e vediamo qual è l'ordine di caricamento degli elementi.

Allora anche qui chiaramente um spesso è necessaria un'analisi un po' più approfondita perché dobbiamo capire se effettivamente andiamo su se effettivamente l'ordine l'ordine di caricamento delle risorse sia quello ideale o meno bisogna capirlo anche analizzando un po' meglio la fase di rendering della pagina.

Però, prendendo la situazione più comune, la situazione più diciamo comune ideale è quella in cui, dopo aver caricato il documento H T M l il browser vada a elaborare innanzitutto quelli che sono dei fogli di stile e i font.

In realtà l'ideale sarebbe caricare ancor prima i font perché i font sono in genere il primo elemento che viene visualizzato all'utente che se noi prendiamo in questo caso, come vedi gran parte di questa di quest'area di pagina è riguarda i font, poi chiaramente lo stile, quindi tutto lo stile degli elementi.

In questo caso abbiamo lo stile che viola degli elementi abbiamo dopo gli script, quelli che vediamo in arancione sono gli script, quindi scritti interni o esterni al sito web poi abbiamo ancora dei fogli di stile, poi abbiamo uno script, poi ancora un foglio di stile, un degli script, un foglio di alcuni fogli di stile degli script.

Solo dopo abbiamo i font, quindi in questo caso la priorità di caricamento degli elementi non è quella.

Non è sicuramente quella ideale perché appunto i font a livello proprio di ordine visivo, eh? A livello di ordine cronologico con il quale l'utente si aspetta di vedere gli elementi, il phon dovrebbe essere il primo insieme allo stile della pagina.

Dopodiché tutti gli scritto che determinano ad esempio il funzionamento di alcuni elementi all'interno della pagina e immagini e tutto il resto.

Anzi prima ancora le immagini, quindi in questo caso i font vengono caricati troppo tardi.

Come vedi vengono caricati dopo tutti gli script.

Sono sicuramente più prioritari i font rispetto agli script, dopodiché troviamo i video che in questo caso credo si appaiono più in sotto.

Okay, appare più in più in basso.

E poi abbiamo ancora vari script, fogli e abbiamo un po', un mix di risorse.

Poi abbiamo ancora degli script.

In questo caso vediamo che son di terze parti e lo vediamo grazie a non tanto al nome dell'elemento, ma quanto al al dominio che appare sotto.

Quindi in questo caso è connect punto facebook punto net, quindi sappiamo che è un elemento relativo alla mia età Facebook e solo sotto troviamo dei delle immagini.

Allora in questo caso quale sarebbe la priorità ideale se avessimo avuto delle immagini in quest'area, quindi nell'area immediatamente visibile all'utente avremmo sicuramente dovuto caricare per prime le immagini insieme ai fogli di stile, immagini e font.

Dopodiché, appunto, tutti i fogli di stile e solo dopo gli eventuali script.

In questo caso chiaramente la priorità degli elementi di caricamento degli elementi non è corretta, perché l'elemento principale che vuole vedere l'utente in questo caso è il font.

Quindi è il testo e il fonte dovrebbe avere la priorità massima insieme allo stile della pagina, allo stile degli elementi.

Quindi font, stile degli elementi e dopo tutto il resto e tutto il resto.

Se abbiamo subito sotto un video l'ideale, diciamo che sarebbe il video subito dopo.

E poi tutti gli elementi di di interazione.

Quindi tutti i file JavaScript e infine tutti i fili esterni al sito web, quindi strumenti di tracciamento e quant'altro.

Quindi sicuramente in questo momento, quantomeno per questa pagina, non non abbiamo un ordine di caricamento degli elementi.

Corretto, quindi in questo caso lasciamo la criticità.

Poi alcune pagine del sito web hanno una dimensione del Dom eccessiva rispetto al contenuto.

Allora in questo caso il Dom è detto in modo molto, molto semplicistico, diciamo quest'area qui che vediamo sotto Clemens, che rappresenta sostanzialmente quello che è il codice sorgente della pagina web con l'aggiunta di tutti quelli che sono gli elementi che vengono aggiunti poi al codice sorgente.

Quindi, ad esempio uno strumento esterno che carica qualcosa all'interno della pagina, come ad esempio questa chat um, si aggiunge chiaramente e si fa parte poi del Dom oppure lo stile di alcuni elementi poi fa parte del Dom.

Ci sono, diciamo tutto ciò che va aggiunto al codice sorgente, poi fa parte.

Fa parte del Dom.

Ripeto, lo sto spiegando in modo molto semplice.

In realtà è tutta un'interfaccia qualcosa di un po' più complesso, ma eventualmente ti invito ad approfondirlo dal dal collegamento che ho inserito in questo caso.

Noi, um il dom ce l'abbiamo sostanzialmente qui, ma non possiamo andare ad analizzarlo in modo molto semplice servono degli strumenti.

In questo caso possiamo farlo utilizzando.

Quindi possiamo andare a inserire direttamente l'indirizzo di Lerna lerna punto com prendiamo a una pizza e lo strumento, oltre a darci tutte le analisi del caso, ci darà anche delle informazioni relative al dom, cioè quanto effettivamente è profondo il dom, cosa significa quanto codice contiene e il la quantità di codice contiene chiaramente è la quantità di codice che poi il browser va a elaborare.

Quindi più codice va a lavorare e presumibilmente più um più risorse impiegherà il browser per elaborarlo e di conseguenza noi il nostro obiettivo è quello di alleggerirlo.

Come si può alleggerire? Si può alleggerire, sia chiaramente rendendo il codice più snello, più ottimizzato, sia cercando di utilizzare meno risorse esterne possibili, cioè meno risorse che vanno a impattare su quello che è il peso poi totale della della pagina web e di tutte le risorse che ne fanno parte.

Ora attendiamo la diagnostica dei dei problemi di prestazione, quindi l'analisi sul suo ambiente di test sull'ambiente di test di Google.

Eccoci qua ha terminato il test e possiam vedere le criticità relative al Dom um spesso sotto questa voce, quindi indicate in rosso, altrimenti lo troviamo sotto, nei controlli superati in questo caso in rosso.

Perché appunto, Google reputa che il Dom in questo caso ha dimensioni eccessive, quindi ha cinquemila elementi per questa pagina e di conseguenza lo reputa, lo reputa eccessivo.

Reputa che ci siano troppi nodi al suo interno, troppo codice.

Questo come si può ottimizzare, come ho detto prima, principalmente ottimizzando il codice e chiaramente la quantità di elementi presenti nel D m non è necessariamente in termini assoluti un problema va chiaramente rapportato alla tipologia di sito web, alla tipologia di pagina web.

Quindi se non abbiamo una pagina web molto lunga, molto ricca, molto articolata, come anche in questo caso, cinquemila elementi potrebbero non essere un problema.

Invece cinquemila elementi potrebbero essere un problema, una pagina che magari ha solo al suo interno un'area una piccola area con un modulo.

In quel caso c'è sicuramente un problema.

Diciamo che in questo caso eh, praticamente si può ottimizzare, si può ottimizzare questo aspetto anche se non è così grave.

Noi comunque lo teniamo come criticità.

Poi il valore l c p, quindi l'argent dell'origine del sito web ha un valore superiore a due virgola cinque secondi.

In questo caso faccio riferimento all'as full, che è una metrica che fa parte del web, quindi di tre metri, che che Google utilizza per valutare le prestazioni e le esperienze utente all'interno del sito web.

E in questo caso noi dobbiamo andare a segnalare se la metrica non è stata superata.

Noi non andremo a fare il test direttamente sul nostro ambiente di lavoro, perché potrebbe essere potrebbe essere un dato non attendibile in quanto, come ho detto prima, io sto effettuando un test di caricamento del sito web sul mio ambiente.

Il mio ambiente è l'ambiente ideale, quindi un computer con una connessione, fibra via cavo, eccetera.

Ma andremo a fare il test.

O meglio, andremo a tenere il dato a prendere il dato da insis.

Perché? Perché, come abbiamo visto nella lezione relativa proprio a questo strumento, noi abbiamo i dati raccolti da Google utilizzando principalmente Google Chrome rispetto all'esperienza utente real de degli utenti reali che hanno navigato al sito web.

Quindi tutti gli utenti che hanno navigato il sito web negli ultimi ventotto giorni Google ha preso il loro da, ha preso le loro informazioni sulla navigazione e ce le riporta qui.

Qui infatti, con la suddivisione tra dispositivi mobili e computer vediamo come l'elemento l C P.

Quindi non è assolutamente idoneo perché dovrebbe restare sotto i due virgola cinque secondi.

In questo caso ha una media di cinque virgola sei secondi per essere idoneo di avere due virgola cinque se secondi, eh, come media rispetto al settantacinquesimo percentile.

Quindi diciamo che almeno il settantacinque percento delle sessioni deve deve essere deve avere un un valore l c P inferiore a due virgola cinque secondi.

In questo caso non è sicuramente idoneo, quindi segniamo il anche in questo caso il test come non superato senza mettere alcuna casella senza spuntare alcuna casella.

Poi passiamo al valore I n p il valore i n p sta per e anche in questo caso facciamo riferimento all'origine del sito web.

Anzi, vediamo se l'abbiamo fatto anche in questo caso no, in questo caso stiamo guardando questo u r l dovremmo guardare l'origine, ovvero la media tra tutte le pagine del sito web.

Quindi non solamente l'homepage, ma tutte le pagine del sito web.

In ogni caso il valore non lo supera e vediamo se lo fa anche con computer.

Mettiamo origine anche in questo caso non supera il valore um ritenuto idoneo da parte di Google.

Ora vediamo appunto l' i n p.

Anche in questo caso abbiamo qui il valore e l' i n p è una metrica che va a misurare in modo anche qui in modo lo spiego in modo piuttosto piuttosto semplice.

Eventualmente ti invito a approfondirla.

Va a misurare il tempo che intercorre tra il click, ad esempio su un pulsante e l'effettivo ris- responso visivo da parte del da parte del browser.

Quindi, ad esempio, se abbiamo un pulsante non che porta una pagina interna, ma ad esempio questo pulsante qui della chat um il d n p va a misurare il tempo che intercorre tra il click questo pulsante e l'effettivo responso visivo, ovvero il momento in cui si apre questa tendina questa finestra e in questo caso lui non va a fare una media tra tutte le interazioni all'interno di una pagina, ma va a prendere l'interazione peggiore tra tutte le interazioni effettuate all'interno della pagina.

Quindi, se l'utente entra all'interno della pagina di Lerna va fa varie interazioni perché magari fa click qui fa click qui fa click sulla chat, fa vari click.

All'interno della pagina fa varie interazioni.

L'interazione che ha avuto un responso visivo um con le tempistiche più lunghe verrà presa in considerazione e verrà le verrà attribuita come valore i n p, quindi cento in questo i n p è un valore che fa parte del core web da metà marzo e di conseguenza è fondamentale ottimizzarlo in questo caso prendendo il valore origine.

Quindi la media di tutte le pagine del sito web tutte le navigazioni di tutte le pagine del sito web.

Il valore di poco purtroppo non supera lo standard di Google, che sono duecento millisecondi sul computer vediamo sul computer vediamo che è al di sotto dei duecento millisecondi e di ben settantacinque milli secondi.

In questo caso andiamo a specificare che questo valore e in questo caso lo passa a metà.

Mettiamo che superio- è superiore ai duecento, milli secondi su dispositivi mobili mobili, quindi in questo caso comunque diciamo che il valore lo supera solo in parte, però lasciamo e e facciamo comunque evidenziamo comunque quella che è la criticità questo valore i n p poi lo vedremo comunque nelle lezioni, nelle lezioni teoriche del prossimo modulo è qualcosa che è ottimizza ottimizzando gli scritti, principalmente gli iscritti di terze parti che bloccando il rendering possono bloccare quello che è anche solo in minima parte l'interazione da parte dell'utente.

Poi il sito web non utilizza alcun sistema di pre caricamento dei collegamenti interni alle pagine.

Qui faccio riferimento a una funzione chiamata è una funzione grazie alla quale noi possiamo andare a precaricare un collegamento interno di una pagina.

Se prima ancora diciamo che l'utente la l'abbia cliccata Quindi cosa succede? Grazie a questa funzione, noi possiamo far sì che nel momento in cui l'utente carica la pagina di Learn Okay, termina tutta la fase di, quindi la pagina caricata completamente.

E a questo punto noi potremmo far sì che le pagine interne, cioè tutti i collegamenti interni a questa pagina, possa essere pre caricati, così che se all'utente dovessero servire, quindi dovesse far click sia già pronti.

Quindi abbia già pre caricato tutte le pagine interne.

E quindi a click si aprirebbero immediatamente per vedere se questa funzione è attiva o meno.

Facciamo un tasto destro di ispezione, andiamo sotto la voce network.

In questo caso abilitiamo la cash.

Quindi togliamo la spunta di Cash, ricarichiamo la pagina perché in questo caso è come se fosse una funzione della cash.

Cioè, effettivamente va a mettere in cash le pagine, eh? Le pagine, i collegamenti interni.

Quindi le pagine interne.

Ora facciamo click sul blog.

Okay.

No, in questo caso il blog lo apre un'altra scheda.

Vediamo.

Facciamo click sul prezzo.

Anche questo corsi, immagino.

Anche qui vediamo se c'è qualche collegamento interno che non apre una nuova scheda.

Ecco, tipo questo.

Andiamo a vedere la prima risorsa che ha scaricato, ovvero la um il documento H T M l e in questo caso, come vediamo sotto la voce size, è stata abilitata questa funzione, quindi c'è, il che si chiama.

In questo caso la funzione appunto, ha fatto sì che la pagina si aprisse immediatamente perché il peso reale della pagina non compresso sarebbe di seicento kilowatt e ci avrebbe messo un po' aprirla.

Quindi se noi riprendiamo sulla pagina iniziale, quindi non si fa lo stesso.

In questo caso sembra proprio di no.

Vediamo subito okay in questo caso è comunque, ma probabilmente la funzione non funziona correttamente, okay.

E quello che succede in questo caso è che probabilmente la funzione non precaricare completamente la pagina, ma solo in parte, o comunque è stata implementata, magari in modo non corretto e quindi non non inserendola correttamente in cash fa sì che attenda la risposta del server.

Infatti, come vedi ha dovuto attendere quattro secondi, cioè il tempo effettivo di eh di risposta del server e di conseguenza la funzione non sta diciamo, um non sta lavorando al meglio per verificare che questa questa funzione stia funzionando correttamente.

Um nonostante appunto ci sia il e in questo caso non verifichiamo dei tempi di risposta ideali, perché in questo caso dovrebbe impiegarci pochi millesimi di secondi a caricarla.

Possiamo provare a mettere la pagina offline, quindi fare click su questo su questa finestra.

Mettere come presepe offline, quindi simulare una situazione in cui non abbiamo rete e provare a navigare una pagina.

Quindi, ad esempio, la pagina interna forma il tuo team e in questo caso vediamo che la pagina non funziona.

Ciò significa che la pagina non viene pre caricata correttamente.

Di conseguenza questa funzione possiamo ora rimettiamo la connessione, segnarla come anche in questo caso, un test non superato.

Poi passiamo all'ultimo aspetto relativo alla categoria generali, dopodiché arriveremo a categorie un po' più diciamo un po' più specifiche.

Il sito web non utilizza il pre caricamento delle risorse basato sulla loro priorità.

Anche qui ho messo un approfondimento.

Faccio riferimento ai che sono una funzionalità grazie grazie alla quale possiamo determinare la ca- ca- la priorità di caricamento degli elementi all'interno della pagina come abbiamo visto prima, la priorità del caricamento degli elementi è fondamentale perché significa mostrare agli utenti eh le risorse, gli elementi nell'ordine in cui gli utenti se li aspettano e per verificare che questa funzione sia stata implementata o meno, basta fare tasto destro all'interno della pagina fare ispezione, anzi visualizza sorgente pagina e cercare con contro più f la funzione okay in questo caso non ha trovato niente di conseguenza significa che questa risorsa questa tipologia di funzionalità non è implementata nel sito web, quindi anche questo è una criticità che lasciamo poi relativamente al server.

Ora andremo un po' più veloci perché sono test più specifici e di conseguenza è molto facile diagnosticarli il si il server del sito web non utilizza h t t p due qui molto semplicemente l'avevamo già visto andiamo sul tasto destro e ispeziona e sottovoce network dovremmo appunto ricaricare ancora la pagina, ma l'avevamo già precari ricaricata prima e guardiamo la voce protocol.

Quindi sotto la voce protocol vediamo che in questo caso tutte le risorse hanno almeno protocollo h t t p due cioè sta per due s che sta per h t t p due.

Alcune risorse hanno addirittura h t t p tre in questo caso facciamo riferimento a risorse esterne, quindi in questo caso è gp di mais, quindi sono dei server di google oppure ancora manager analytics quindi alcune risorse esterne fanno addirittura uso di h t t p tre.

Però le risorse, diciamo interne del sito fanno uso solo di h t, t p due.

Ci sono tuttavia alcune risorse esterne, in questo caso clarity, che fanno uso di h t t p uno punto uno.

Però diciamo che su questo non abbiamo il controllo, quindi noi facciamo riferimento principalmente alle risorse interne al sito web.

In questo caso, quindi, il sito web non utilizza h t p due, non è vero, quindi il test è stato superato.

Tuttavia non utilizza ancora h t t p tre per le risorse interne.

Questo protocollo um questi due protocolli, eh? Diciamo che apportano molti molti miglioramenti in termini di velocità sul caricamento di una di una pagina web in particolare, diciamo il la differenza più notevole c'è col passaggio dal protocollo h t t p uno punto uno all' t t p due perché mentre l'h t t p uno punto uno metteva tutte le richieste in coda, quindi scaricava una richiesta, una risorsa per volta tra quelle che vediamo qui l' h t t p due può gestirle simultaneamente.

Quindi scaricarle tutte insieme chiaramente con la priorità che noi siamo andati a a dargli, quindi è fondamentale che l'h t p due sia integrato.

Tuttavia l' h t t l'h t t tre l'h t t p l'h t t p tre.

Nonostante integri molte migliori rispetto all' h t t p due non è ancora diciamo uno standard, quindi per ora è un è una criticità, ma ha un impatto un'importanza basso.

Poi il tempo di risposta a s r è superiore a ottocento secondi andando su google page insis.

Anche in questo caso facciamo riferimento non tanto al tempo di risposta del server rispetto al nostro ambiente di test, quindi qui ma prendiamo il valore da parte di che ha monitorato google negli ultimi ventotto giorni, quindi anche qui valore all'origine vediamo che rispetto al computer è di tre virgola sette secondi, che è molto molto alto rispetto ai dispositivi mobili e anche qui di tre virgola sette secondi, quindi decisamente non passa il test.

Poi il server del sito web non fa uso di compressione per risorse testuali gzip bley questi sono due algoritmi di compressione.

Anche qui non entro troppo nel merito, ti invito eventualmente ad approfondire che permettono di comprimere quello che è principalmente il documento H T m l della pagina.

Quindi torniamo ancora alla pagina iniziale.

La prima risorsa che viene scaricata è il documento H T M L, che è questo qui il primo che vediamo e in questo ritogliamo disabilitiamo la cash ricarichiamo okay, e questo documento può essere compresso o non compresso.

Diciamo che questo lo vediamo abbastanza a primo impatto sotto la voce Z, perché sotto la voce size vediamo il peso dell'elemento per come è stato scaricato, quindi nella versione compressa e il peso elemento non compresso.

Quindi la versione compressa è di cento chilobyte.

La versione non compressa è di novecento.

Per vedere ulteriormente se è stato compresso, possiamo fare click e vediamo la tipologia di sotto la tipologia di codifica.

In questo caso il G zip quindi è stato utilizzato l'algoritmo di compressione G zip, quindi il test è stato superato.

Poi il server del sito web non distribuisce le proprie risorse tramite alcuna su alcuna C D N I C D n sono delle delle reti che fanno da ponte tra il server e l'utente, quindi il browser e possono aiutare nel momento in cui ad esempio L'utente si trova al di fuori del um dell'area in cui si trova il pubblico comune.

Faccio un esempio se l e n si rivolge principalmente a utenti in Italia, è possibile chiaramente che un utente in un momento perché in viaggio o altro, si trovi ad esempio negli Stati uniti.

E in quel caso cosa succede? Che per raggiungere il server in italia, supponendo appunto che learn abbia i server i data center in italia impiegherebbe un po' di tempo perché geograficamente è troppo distante.

Quindi ci sarebbe un po' di latenza.

Si parla di decimi, secondi o di qualche secondo al massimo.

In questo caso la c d n.

Tra le tante funzionalità tra le tante um tra le tante caratteristiche che ha, tra i tanti benefici che ha, può servire quella risorsa direttamente in uno dei suoi server che ad esempio si possono trovare negli stati uniti e quindi di conseguenza fornire in modo molto più rapido.

Per vedere se effettivamente learn fa uso di una c d n possiamo andare sul sito d n s check punto org è un sito che ci permette di risolvere quelli che sono i d n s.

Quindi vedere qual è l'associazione tra un d n s e ad esempio, e un indirizzo p e nel nostro caso dobbiamo andare a verificare quello che è il record n s che sta per server.

Perché? Perché nel momento in cui noi utilizziamo la c d n, nella gran parte delle volte andiamo a delegare quello che è la gestione dei server.

Quindi ad esempio a Claud va delegata la la gestione dei server affinché lui possa gestire internamente tutti i d n s.

In questo caso digitiamo il dominio di riferimento e facciamo search in questo caso andrà a effettuare un test di tutte le località di varie server nella parte del mondo, perché chiaramente i server possono comportarsi, possono essere letti diversamente in varie parti in varie parti del mondo, anche in funzione della cache o meno, e in questo caso vediamo che c'è la voce cloudflare.

Quindi in questo caso vediamo che learn fa uso di una c d n, ovvero cloudflare.

In questo caso mettiamo quindi un test superato.

Attenzione però l'uso della c d n non è essenziale nel senso che non utilizzare una c d n non significa avere un problema di criticità, ma va chiaramente la c d n va adoperata in funzione della tipologia di pubblico che abbiamo e delle tipologie di necessità che abbiamo.

Poi, passando alla voce cash, il sito web non sembra fare uso di alcun sistema di caching per le risorse statiche.

Allora il sistema di cash, così come abbiamo spiegato nel nel nelle lezioni teoriche, quindi nei moduli precedenti, in questo caso fa riferimento alle risorse statiche e in particolare alla pagina, quindi alla crash di pagina.

In questo caso è un po' difficile effettivamente diagnosticarlo se non abbiamo accesso al sito web, la cosa che possiamo fare è ricaricando la pagina web.

Okay, è vedere prendendo il doc sempre il documento h t m l facendoci click se vediamo qualche voce all'interno dei che fanno riferimento alla cash.

In questo caso vediamo se troviamo qualcosa relativo ad esempio a Claud perché molto spesso Claud, nel momento in cui si fa uso di cash specifica all'interno del per questi e se effettivamente la cassa in uso o meno Okay, non vedo nulla.

Um, non vedo nulla a riguardo perché questi no cash non necessariamente fanno riferimento alle politiche di cash relative relative al server.

Però comunque utilizzando CDF vediamo se c'è qua qualcosa no, utilizzando CDF.

In genere si dà per scontato che utilizzi un sistema di cash perché Claud lo offre come come soluzione.

Quindi io presumo utilizzi un sistema di cash.

Tuttavia non è appunto facile diagnosticarlo senza avere accesso al sito web, quindi presupponiamo che lo stia utilizza- lo stia utilizzando e di conseguenza mettiamo il tic sulla casella di di controllo.

Poi passiamo ai controlli relativi al iPhone.

Questi li faremo in modo molto più più rapido e li faremo un po' tutti insieme perché riguardano la stessa area.

E il primo è che i fanta siti web sono troppo pesanti rispetto al contenuto qui.

Molto semplicemente andiamo stando sulla voce network, mettiamo un filtro per font e vediamo qui dove sta passando il mouse, quanto i phone occupano rispetto al peso totale della pagina.

In realtà anche un po' in termini assoluti, nel senso che sei cento kilowatt di font in questo caso sono veramente troppo è veramente, veramente troppo.

Idealmente diciamo i font all'interno della pagina dovrebbero pesare intorno ai cento kilowatt al ma- cento kilowatt al massimo, eh? Presupponendo di avere magari tre o quattro varianti di font in questo caso seicento sono veramente troppi, quindi sicuramente questo test non è passato.

Poi il sito web fa uso di pacchetti di cone isola.

In questo caso faccio riferimento a quei pacchetti di icone che ad esempio magari rappresentano portano con sé quelle che sono le icone social.

Vediamo se ne ha, non le vedo.

A primo impatto però possono essere semplicemente anche queste icone qui quella che sto evidenziando come la stella o altro o ad esempio questa icona qui di LinkedIn e questi pacchetti di icone molto spesso cosa fanno? Ti danno la possibilità di integrare all'interno del sito web delle icone molto carine, molto belle esteticamente, ma portando con sé eh tutta la libreria di icone e magari una libreria che contiene decine di migliaia di icone, quindi porta con sé integra per ogni caricamento di pagina decine di migliaia di icone per poi fartene utilizzare magari una o due in tutta la pagina.

Vediamo subito innanzitutto vediamo c'è il font Messina Sas in questo caso sono quattro varianti F a.

Eccolo qua è proprio una libreria di icone phon.

La riconosco subito perché viene spesso utilizzata nei siti web e addirittura è presente in tre varianti, forse in quattro varianti sì, in quattro varianti, quindi la versione la versione solid light bras.

La versione brands, ad esempio, è quella indicata ai brand, quindi ad esempio alle icone relative ai social network, quindi link di Facebook e altro.

E poi ci sono appunto diverse varianti.

In questo caso queste quattro libri di icone sottovoce z, come vediamo, occupano circa quanto duecento quattrocento, circa cinquecento kilowatt dei seicento kilobyte totali del dei font e magari nel nel nella pagina web.

Adesso non le ho contate, ma probabilmente vengono utilizzate adesso.

Non so se queste connessioni sono verranno utilizzate sì e no.

Dieci varianti di icone.

Sì, probabilmente sarà una decina al massimo e in questo caso le librerie andranno a scaricare decine di migliaia, se non centinaia di migliaia, quindi appesantendo tantissimo il sito web.

Quindi anche questo test non è passato.

Queste icone sono isola, quindi possono essere scaricate singolarmente le icone che ci servono e integrate direttamente dove ci servono.

Nel sito web, poi i font e il sito web non sono caricati localmente.

Questo non è necessariamente un grande problema, in quanto diciamo che ci aiuta a diff-, differenziare, diciamo, il rischio che ci siano degli elementi esterni che possano rallentare il nostro sito web, Perché se noi andiamo a scaricare i font, per esempio, o da i font di Google, se i loro server hanno problemi, chiaramente la risorsa non verrà scaricata neanche sul nostro e di conseguenza creerà un disagio per il nostro utente.

Questo è il primo punto.

Il secondo punto è che molto spesso caricare un fonte direttamente dal nostro server è più veloce rispetto a caricarlo dal server di qualcun altro.

In questo caso vediamo che la provenienza di fonte per Messina sans è interno.

Quindi vediamo che il dominio interno il sito web passando il mouse te tenendolo un attimo fermo, vediamo che fa parte del dominio Learn.

Tuttavia, per le Phonse, quindi per i libri di icone no.

Quindi queste icone vengono scaricate da server esterni, quindi dai loro server.

In questo caso, quindi, il test non è passato.

Poi il sito web non utilizza alcun sistema di ricaricamento di fonti essenziali.

Qui faccio riferimento ai font che effettivamente servono immediatamente al caricamento di pagina.

Quindi presumo che questo anzi sono quasi certo che questo sia Messina sans e messo una SAS, quindi è fondamentale che venga pre caricato.

Come facciamo a capire che se è pre caricato o meno, lo possiamo vedere dal codice, quindi facendo tasto destro visualizza sorgente pagina e cercando la funzione.

Quindi contro l' F e vediamo se sono stati pre caricati degli elementi.

In questo caso non è il font di certo.

Vediamo se c'è il font, ma in questo caso sono dei video.

No? In questo caso non sembra No, esatto.

Non non viene pre caricato alcun tipo di font, quindi anche in questo caso il test non è passato.

Un altro modo per vederlo è andando su tutte le risorse che vengono scaricate, vedere l'ordine di caricamento degli elementi e vedere se i font vengono caricati per primi con una priorità sotto la voce qui su cui sto passando il mouse che deve essere RS o i, quindi alta o molto alta.

E in questo caso vediamo che i font vengono caricati solo dopo tutto dopo gli script, dopo i fogli di stile e altro.

Quindi sicuramente il testo non è passato.

Poi uno o più fonti del sito web sono bloccanti per il rendering della pagina, allora bloccanti per della pagina.

Significa che durante la fase di rendering di una pagina web, i font vanno a bloccare quello che rendere quindi a A a essere, diciamo essere un peso tra virgolette o essere un problema per il rendering della pagina, quindi renderlo bloccante e di conseguenza poter causare delle criticità nella fase di rendering.

Questo è un problema, un bel po' difficile da da analizzare, quindi ti invito a farlo direttamente dal quindi vedere se effettivamente la criticità rispetto al test nel suo ambiente che Google svolge indica che il font è bloccante per rendere di pagina.

Ora cerchiamo vediamo se lo troviamo in modo molto rapido cercando proprio font.

No, non è questo il problema.

Okay, eccole qua.

Elimina le risorse di blocco della visualizzazione.

In questo caso parliamo di font.

In questo caso, quindi è bloccante.

Alcuni font sono bloccanti per renderli di pagina, quindi anche questo problema non è non è passato.

I font del sito web non vengono visualizzati immediatamente durante il rendering.

In questo caso faccio riferimento a una funzione che si chiama app.

In realtà è più un attributo che una funzione che permette al fonte di essere visualizzato immediatamente durante il caricamento di pagina.

Non il font che abbiamo scelto noi, ma un fonte di CK, un fonte di anteprima che è un font che magari il nostro browser era già integrato um all'interno dei suoi file.

Quindi non non c'è bisogno che lo scarichi da alcun server e poi questo font di anteprima venga sostituito col nostro font durante il caricamento di pagina.

Cosa significa? Significa che noi magari mentre la pagina carica vediamo un font provvisorio che poi viene sostituito dal nostro fonte nel momento in cui la pagina ha caricato completamente.

Questo permette all'utente di vedere subito il contenuto e quindi di dargli in un certo senso, um una soddisfazione nel veder subito ciò che ciò che gli serve l'alternativa è avere per anche qualche decimo di secondo tutto bianco tutto trasparente, quindi in questo caso lo sfondo nero e poi caricare il font che abbiamo scelto noi solo nel momento in cui è pronto e crea in un certo senso un po' di disagio, perché se il font si va a impiegare uno due secondi a caricare l'utente per uno o due secondi non vede niente.

In questo caso per vedere se è implementata o meno la funzione, potremmo farlo andando a s- a limitare la connessione e quant'altro è un po', un po' complesso, altrimenti facciamo il tasto destro visualizza sorgente di pagina e cerchiamo proprio la l'attributo font meno display swap che come vedi non troviamo in realtà noi potremmo cercarlo anche all'interno dei file c S s perché potrebbe essere presente all'interno dei file c s s che controllano il font.

Io ora comunque non mi sembra non entro troppo nel nel dettaglio, quindi non faccio il testo.

Nello specifico però non mi sembra di aver visto questa funzionalità per il semplice fatto che ricaricando la pagina non si vede neanche per un microsecondo un font alternativo, ma si vede direttamente il font.

Forse si è visto per poco, quindi forse effettivamente era implementata.

Quindi dai diamo per diamo per scontato che la funzione sia sia presente, no, forse semplicemente è cambiata la scritta vediamo ancora sì, no, effettivamente sembra essere implementata perché ho visto un font di un font provvisorio che poi è stato sostituito per qualche millisecondo.

Quindi diamo per scontato che la funzione sia stata implementata.

Passiamo al prossimo punto relativo ai fogli di stile, ovvero che i fogli di stile sono ospitati su su domini di terze parti.

Ciò significa che abbiamo dei fogli di stile ospitati su domini di terze parti e così come nel caso dei dei font, nel caso in cui appunto, non venissero caricati localmente.

Chiaramente stiamo andando a delegare una parte di rischio, o meglio, non non gestire una parte di rischio che può dipendere da domini di terze parti, perché se abbiamo dei fogli di stile su domini di terze parti, quei domini dovessero impiegare molto tempo a rispondere o dovessero avere problemi di qualsiasi tipo e poi ne risentirà lo stile del nostro, del nostro sito web o meglio della nostra pagina web.

Quindi torniamo sulla nostra pagina iniziale, andiamo su Tours sotto voce network, andiamo sotto c S s filtro per c S s e vediamo um che abbiamo trentaquattro fogli di stile, in questo caso per filtrare solamente quelli gestiti esternamente.

Mettiamo la spunta su di questo.

In questo caso abbiamo un filtro e vediamo solamente i fogli di stile su presenti su domini di terzo livello, quindi, o meglio su domini di terze parti.

In questo caso vediamo che ci sono dei fogli di stile relativi a Towson, ma Claud fr a G s.

Liver, Geb e altri e altri domini.

Di conseguenza in questo caso il test non è passato.

Poi i fogli di stile e il sito web sono troppo pesanti rispetto al contenuto.

Eh allora questo è un aspetto, un po', un po' soggettivo dipende molto dal sito web, da quanto il sito web è complesso a livello visivo e altro.

In linea generale, però, andando su c s s togliamo la spunta di questo vediamo che abbiamo trentaquattro fogli di stile con un peso totale complesso di centottanta kilowatt circa.

In questo caso, eh vediamo che il foglio di stile più pesante in assoluto, andando sotto la voce z e mettendola in ordine decrescente è di trentadue kilowatt, quindi non è così pesante.

Sicuramente qualcosa si può ottimizzare perché questo appunto questo foglio di stile di toson probabilmente potrebbe essere tolto appunto perché potrebbe essere gestito internamente.

Tuttavia, diciamo che il test a livello generale è stato superato perché non hanno un peso così elevato.

Poi i fogli di stile del sito web non sono mini indicati.

Allora qui faccio riferimento alla funzione, ovvero la mini modificazione che è ciò che permette di alleggerire il peso di alcuni documenti di codice principalmente rimuovendo ad esempio, gli spazi o i ritorni a capo.

Quindi alcuni elementi all'interno del foglio che sono ricorrenti e possono essere rimossi.

In questo caso vediamo subito se i fogli di stile son stato sono stati minniti o meno.

Se al loro interno è presente l'attributo min, allora in realtà non necessariamente nel senso che un foglio c s s un foglio di stile può essere mini verificato anche senza per questo attributo.

Tuttavia per verificarlo dovremmo aprire ogni singolo foglio di stile.

Chiaramente è un una una cosa, un po' impegnativa e adesso per una questione di di rapidità mostriamo e andiamo a identificare se appunto i fogli di stile sono modificati o meno semplicemente vedendo se hanno l'attributo min.

Quindi nei filtri su trentaquattro fogli di stile mettiamo la scritta min e vediamo che ben diciannove hanno l'attributo mini di conseguenza sono sicuramente minniti gli altri probabilmente lo sono magari qualcuno no.

Però diciamo che in linea generale il test è stato superato, quindi i fogli di stile sono minniti, poi i fogli di stile del sito web sono accorpati.

Allora questo perché può essere un problema? Perché eh, perché questa è un'ottimizzazione che viene utilizzata molto spesso in alcuni prati e sistemi di ottimizzazione dei siti web perché era una funzione effettivamente comoda nel momento in cui un sito web utilizza il protocollo h t d p uno punto uno perché come abbiamo visto prima, il protocollo h t t p uno punto uno accodava le richieste, quindi le metteva tutte in coda una dopo l'altra.

Quindi immaginiamoci la situazione in cui ci sono trentaquattro falli di stile.

Avere una sola richiesta invece che trentaquattro chiaramente poteva aiutare, potrebbe aiutare molto.

Tuttavia, col protocollo h t t p due che in questo caso abbiamo, lo vediamo la voce protocollo um, non è necessario che siano accorpati perché le richieste vengono gestite in modo simultaneo, quindi non importa quante siano, anzi, può essere un problema.

Perché perché accorpare trentaquattro fogli in uno solo va a centrare il rischio su un unico elemento, perché se quell'elemento non dovesse caricarsi correttamente dovre- dovesse impiegare troppo a caricarsi da quell' elemento poi dipenderebbe tutto lo stile del sito web o meglio della pagina web e questo non vogliamo che accada.

Quindi in questo caso abbiamo tanti fogli di stile e di conseguenza non sono stati accorpati.

Quindi il test è stato superato.

Poi uno o più fogli di stile del sito web sono bloccanti per renderli nella pagina.

Questo è un testo, una verifica piuttosto complessa da fare di conseguenza.

Eh, perché chiaramente andrebbe analizzato nel dettaglio il il processo di della pagina.

Di conseguenza ti consiglio di verificarlo direttamente in, quindi prendiamo il dominio Learn ancora una volta la incolliamo, attendiamo la diagnostica e vediamo se effettivamente Google ci riporta che ci sono degli elementi bloccanti per la visualizzazione della pagina.

Ora attendiamo la diagnostica e la stessa operazione, poi la potremo fare anche con gli script.

Lo vedremo sotto.

Ora attendiamo il termine della diagnostica dei problemi.

Ecco qui ha terminato e ora andiamo a cercare se ci sono delle risorse di blocco della visualizzazione.

Eccolo qua il primo elemento ci segnala proprio che c'è un problema di blocco della visualizzazione e ci fa vedere le risorse che effettivamente sono bloccanti per il rendering.

Tra queste vediamo se ci sono dei fogli di stile nel nostro caso, quindi mettiamo appunto c s s okay e vediamo come con facendo contro l'effe, quindi facendo una ricerca nella pagina e vediamo che ci sono molti fogli di stile che sono bloccanti, quindi effettivamente il test non è superato.

Poi è presente il codice C s s inutilizzato in alcune pagine del sito web.

Questa è una funzione, è è qualcosa che non abbia visto come diagnosticare nel nella presentazione dello strumento, ma lo vedremo ora il c s s utilizzato innanzitutto co- cos'è è del codice del codice di stile che magari non viene utilizzato in alcune aree della pagina e quindi non è necessario che venga scaricato.

Ti faccio un esempio se io sono qui io carico la pagina loro punto com e sono in quest'area e magari non necessariamente voglio scrollare e vedere tutta la pagina e non è necessario che mi venga scaricato che il mio browser vada a caricare tutto quello che è il codice c s s di tutta la pagina, perché magari io da qui poi prendo me ne vado una pagina interna e mai vedrò il resto della pagina e quindi noi possiamo andare a identificare se c'è del codice che effettivamente viene scaricato sin da subito, ma non viene utilizzato in quell'area per farlo andiamo sotto la voce network, ma in realtà potremmo stare ovunque perché è uno strumento in più.

Apriamo questo menù in alto a destra ai tre puntini e facciamo in questo caso premiamo se si apre questa finestra, premiamo l'icona per ricaricare la pagina.

Sì, attendiamo che ricarichi la pagina.

Ecco qui e andiamo a filtrare questa tendina per c C S s Okay, qui vediamo solo i fogli di stile e vediamo qui sul grafico a destra, ma anche sotto la voce a news bite se ci ci sono dei fogli di stile che effettivamente sono stati caricati, ma non sono necessari in quest'area visibile all'utente e infatti vediamo come sotto la voce a news bites in rosso vediamo che la gran parte oltre il novanta percento di quasi tutti i fogli di stile stanno caricando del codice che poi non viene utilizzato in quest'area.

Adesso il caricamento di pagina tra l'altro è ancora in corso.

Okay, vediamo che ad esempio, il primo foglio di stile è quello più pesante, um al suo interno il novantanove virgola cinque percento del codice che ha al suo interno non viene utilizzato in quest'area di pagina, quindi è inutile che venga scaricato la stessa cosa per tutti gli altri.

Nel complesso, in un riepilogo vediamo in basso a sinistra sottovoce filtra vediamo che centosessantasei kilobyte su un megabyte quattro totali rispetto a quelli compressi vengono utilizzati gli altri uno virgola due megabyte di punto di fogli di stile? No.

Quindi sostanzialmente l'ottantotto percento del codice che viene scaricato in quest'area di pagina non viene utilizzato.

Faccio riferimento solo al codice c s s e qui sulla destra ci fa ci dà anche la versione non compressa, quindi la versione del codice non compresso.

Quindi ci fa capire in questo caso che gran parte del del del codice s s s viene scaricato subito all'utente e poi um nonostante appunto l'utente, non nonostante possa non averne bisogno, quindi non è detto che l'utente poi continui a navigare la pagina e quindi ha bisogno di tutto quel codice che è stato scaricato, ma potrebbe fermarsi qui aure una pagina interna facendo click su uno di questi pulsanti e quindi a quel punto avremmo fatto scaricare all'utente del codice non necessario, quindi appesantito e reso più lungo il tempo di caricamento della pagina.

Quindi in questo caso il testo ovviamente non è passato e ci colleghiamo a questo.

Parlando del c s s.

Critico il c s s.

Critico è proprio la funzione grazie alla quale andiamo a risolvere questo problema.

Perché? Perché il c s s.

critico ci permette di andare a caricare solamente il C S S.

Critico quindi quello essenziale all'interno di di un'area della pagina e caricare secondariamente o comunque ritardare, gestire in modo differente tutto il restante codice.

Quindi cosa succede? Noi all'interno di questa pagina andremo a caricare solamente quel dodici per cento di codice immediatamente necessario alla corretta visualizzazione di quest'area di pagina e poi il restante ottantotto percento.

Magari possiamo farlo scaricare a browser nel momento in cui L'utente fa la prima interazione, oppure quando il della pagina è terminato in questo.

In questo modo andremo a velocizzare il tempo del caricamento della pagina e andremo a ridurre tutto il codice C S S bloccante.

Anche in questo caso chiaramente non viene adoperato e passiamo ora a um all' relativa alle immagini.

La prima è relativa al fatto che le immagini del sito web non sono compresse.

Allora questi problemi in realtà li vedremo un po' tutti insieme perché riguardano riguarda sempre le immagini.

Quindi per diagnosticarli semplicemente torniamo sul nostro sito web.

Facciamo tasto destro ispeziona andiamo sotto la voce network, chiudiamo il nostro strumento e ricarichiamo la pagina.

In questo caso portiamoci sul filtro i M G che sta reges.

Quindi immagini okay intanto che la pagina carica vediamo il primo la prima criticità, ovvero che le immagini del sito web non sono compresse, allora la compressione è qualcosa di un po', di un po' soggettivo, nel senso che il livello di compressione dell'immagine um può essere differente a seconda di quanto vogliamo che l'immagine si veda um venga percepita di alta qualità, quindi non necessariamente tutte le immagini vanno compresse al massimo quanto più quanto più possibile, ma chiaramente bisogna trovare diciamo il giusto, il giusto equilibrio tra qualità visiva e compressione, quindi peso dell'immagine per identificare se sono compresse o meno.

Comunque eh lo possiam vedere abbastanza facilmente, quindi ora andiamo andiamo qui ecco, queste sono le immagini che ci ho scaricato per questa pagina web filtriamo le per side mettiamole in ordine per side qui dalla più grande alla più piccola e vediamo già che la prima immagine pesa cinquecentocinquanta kilobyte è tantissimo.

Facciamo tasso destro open in youtube e vediamo che l'immagine in questione è un'immagine che sicuramente e questo è qualcosa che poi capirai sicuramente con l'esperienza è un'immagine che sicuramente non è necessario che pesi così tanto.

Perché perché vediamo innanzitutto che dietro uno sfondo neutro, un colore con non troppe sfumature e davanti abbiamo tre volti.

Ma se noi andiamo a ingrandire l'immagine premendo c t r l e usando la rotella del mouse vediamo che la qualità non è così elevata, quindi non abbiamo risoluzioni molto elevate.

Di conseguenza questa immagine non ha motivo di pesare così tanto se compressa, pur mantenendo la stessa qualità visiva percepita.

Questa immagine può tranquillamente pesare dieci quindici volte meno, quindi andare a pesare trenta quaranta kilowatt perché appunto ha una risoluzione d'immagine molto piccola, non molto grande e non ha tanti dettagli.

Ma soprattutto non stiamo parlando di un'immagine um ad esempio di una di una fotografia che di un foto, magari di un sito web, di un fotografo che comunque deve mantenere un livello di dettagli estremo, ma un'immagine dove semplicemente si vedono tre volti.

Di conseguenza chiaramente è molto in piccolo, anche perché all'interno della pagina andiamo, lo vediamo e occupa circa quanto un un decimo, un quindicesimo rispetto a tutta l'area della pagina.

Quindi sicuramente è troppo pesante quell'immagine così come quell'immagine adesso ricarichiamo ancora la pagina? Um si vedeva si si intravedeva già che altre immagini avevano lo stesso problema.

Quindi andiamo ancora a ordinarle per dimensione e vedi anche tutte le immagini sotto circa lo stesso peso.

Quindi quattrocento cinquecento kilobyte che è veramente tantissimo e son tutte uguali.

Quindi tutte immagini dei formatori e di conseguenza queste immagini sicuramente non sono compresse.

Il totale, addirittura il peso totale di queste immagini.

Come vediamo qui dove sto passando il mouse è di otto megabyte, quindi è veramente veramente tanto perché otto megabyte è ben oltre il peso totale di tutta il peso totale ideale che dovrebbe avere la pagina.

Poi le immagini del sito web non utilizzano formati moderni.

In questo caso faccio riferimento principalmente web B, che è un formato immagine ideato da Google, ma ce ne sono altri come AVI F che sono formati immagine adatti all'uso per web.

Quindi formati immagini come P N C o G P G sono formati che non sono non sono ottimali per il web.

Per il web ci sono appunto formati più indicati che pur mantenendo la stessa qualità percepita all'interno di un monitor su un monitor, um ci danno la possibilità di avere un peso dell'immagine molto inferiore.

In questo caso, sotto la la la colonna Type vediamo la tipologia, il formato d'immagine.

In questo caso vediamo che abbiamo delle GIF g p g p n g s v g ma non abbiamo dei u b b, quindi e nemmeno degli avi f.

Quindi abbiamo formati d'immagine piuttosto obsoleti, quindi non passa il test.

Poi le immagini del sito web non non vengono caricate selettivamente.

In questo caso faccio riferimento alla funzione lodi che letteralmente può essere tradotta come caricamento pigro ed è una funzione grazie alla quale noi andiamo a caricare un'immagine solamente nel momento in cui sta per entrare nell'area visibile all'utente.

Mi spiego meglio nel momento in cui un utente va a caricare questa pagina, um prima ancora che fa alcuna interazione, quindi non vediamo alcuna immagine, quindi non è necessario che scarichi alcuna immagine se andiamo sotto, se facciamo lo scroll, vediamo che a questo punto qui ci sono tre immagini.

Quindi idealmente utilizzando la funzione della load, noi possiamo andare a far scaricare quelle tre immagini solo nel momento in cui l'utente sta per entrare in quell'area in cui sono presenti.

Quindi quando si sta avvicinando alla loro alla loro presenza.

Perché? Perché chiaramente se l'utente aggiornando la pagina non ha bisogno di vedere alcuna immagine, è inutile che non gliela facciamo scaricare perché appesantiamo inutilmente il peso della pagina e faccia sì che venga caricata in un tempo di caricamento più lungo.

Per verificare se effettivamente la pagina web sta facendo uso di Rodi, um, la cosa più semplice da fare è appunto andare su ispeziona su network, ricaricare la pagina appunto, stando sempre sul nostro filtro, e vedere se effettivamente vengono scaricate solamente le immagini necessarie a quest'area immediatamente visibile all'utente.

Quindi in questo caso non abbiamo immagini, abbiamo solamente un video sottostante, ma non abbiamo immagini.

Nonostante ciò vediamo che sono presenti Okay, torniamo su.

Sono presenti molte immagini, vengono scaricate molte immagini che effettivamente poi vengono mostrate solamente sotto ne avremo alcune.

Sono immagini che vengono mostrate solamente sotto in fondo alla pagina, quindi di conseguenza non è necessario che vengano scaricate.

Ora mettiamo in ordine di peso.

Troviamo anche tutte le immagini che sta analizzando prima sono immagini presenti circa a metà pagina, quindi non è necessario che vengano scaricate, quindi sappiamo per certo che non viene utilizzata la funzione di lodi.

Potremmo diagnosticare il problema, cioè l'effettiva presenza o meno di questo YY Rodi, anche grazie al codice perché l'as lodi può essere può essere inserito nativamente all'interno del codice h t m l con con l'apposito attributo.

Tuttavia non è l'unico modo di implementazione.

Esistono sistemi di implementazione che fanno uso di, quindi in quel caso non l'avremmo potuto diagnosticare.

Di conseguenza il metodo migliore è proprio questo e quindi il test non è passato.

L'ultimo punto relativo alle immagini è che non vengono caricate la risoluzione massima per il dispositivo in uso.

Cosa significa? Significa che se noi stessimo navigando il sito web con un iPhone, ad esempio.

Quindi andiamo a simulare um un dispositivo da qui con l'icona su cui sto passando il mouse andiamo a simulare ad esempio un iPhone S che è un dispositivo relativamente piccolo con uno schermo piuttosto piccolo e aggiorniamo la pagina.

In questo caso abbiamo un un dispositivo con una risoluzione, una larghezza di trecentosettantacinque pixel.

Ciò significa che un'immagine presumibilmente dovrà essere larga al massimo trecentosettantacinque pixel e non avrebbe senso scaricare un'immagine far scaricare chi sta utilizzando questo dispositivo un'immagine più grande di quella risoluzione perché altrimenti staremmo facendo scaricare un'immagine um inutilmente più pesante.

Se noi prendiamo ad esempio di riferimento queste immagini utilizziamo questo um andiamo sotto la voce e utilizziamo questo strumento qui su cui sto passando il mouse.

Questa icona c'è un selettore di elementi h t m l passiamo al mouse come vedi si evidenzia l'area che vogliamo l'area interessata.

Facciamo click su questa immagine e vediamo che l'immagine passando il mouse su sul collegamento dell'immagine.

Eccola qui è di settecentocinquanta per quattrocentoventi pixel.

Come facciamo a vederlo? Perché è indicata come ciò significa che è la è è la risoluzione intrinseca dell'immagine quella con cui la stiamo scaricando.

In realtà però la cioè l'immagine, così come viene rende realizzata è di centonovantuno per cinquantadue pixel, quindi circa tre volte più um più piccola in termini di risoluzione.

Quindi a questo punto noi stiamo facendo caricare all'utente un'immagine tre volte più pesante di quello che realmente serve e chiaramente di conseguenza avrà un peso maggiore l'immagine.

Di conseguenza l'immagine um chiaramente impiegherà più tempo a essere caricata.

Di conseguenza non stiamo caricando le immagini a risoluzione massima in rapporto al dispositivo in uso.

Ci sono degli strumenti che poi vedremo nel prossimo modulo, che ci permettono di avere di caricare ogni immagine, cioè di identificare nel momento in cui viene caricata una pagina, il dispositivo in uso, quindi la risoluzione massima e il caricare tutte le immagini a quella risoluzione massima.

Quindi non caricarle alla risoluzione reale a cui sono state um come per per come sono state caricate sul sito web.

Così facendo ottimizziamo spazio e ottimizziamo tempo.

Passiamo ora all'aspetto relativo ai video che anche in questo caso è molto simile a quello relativo alle immagini.

Innanzitutto torniamo sulla visualizzazione computer normale, andiamo sotto la voce network e andiamo sotto media.

Quindi i video alziamo un po' la finestra e vediamo che abbiamo tre quattro video.

Okay, in questo caso abbiamo dei video di novecentocinquanta kilobyte di centocinquanta.

Ora andiamo al primo punto, ovvero i video del sito web non sono compressi.

Anche in questo caso è difficile identificare se un video è stato compresso o meno, ma se proviamo ad aprire per esempio il primo video o per il YouTube è un video di otto secondi, ha una risoluzione comunque piuttosto grande e quindi presumo che questo video sia stato compresso perché potrebbe tranquillamente pesare diverse decine di megabyte.

Quindi in questo caso è un po', una valutazione che si fa per esperienza e anche in rapporto a quanto effettivamente il titolare sito web voglia ottimizzarlo e sappiamo diciamo in questo caso che il video è è stato ottimizzato, è stato compresso, quindi il test è passato la stessa cosa chiaramente per i video sottostanti che pesano ancora meno.

Poi i video del sito web sono ospitati su domini di terze parti.

Questo può essere un problema per lo stesso motivo che dicevamo relativamente ai fogli di stile e fonte, ovvero al fatto che noi risp, chiaramente ospitando i domini dei siti dei dei video su domini di terze parti, corriamo il rischio che se quel dominio di terze parti non dovesse funzionare in uno specifico momento, poi non non si visualizzerà correttamente il video sul nostro sito web.

In questo caso, passando il mouse su su quattro elementi, vediamo che l'u r L che appare è all'interno del dominio di Lerna, quindi di conseguenza in tutti i video presenti quantomeno in questa pagina sono ospitati sul dominio sul dominio interno, poi i video e il sito web non vengono compressi in caso di connessione lente, allora questo è un aspetto interessante ed è quello che fa molto bene.

YouTube, Vimeo e altre piattaforme di visualizzazione dei video.

Perché? Perché immagina la situazione in cui magari sei in metro sei in un punto in cui il tuo smartphone non prende bene, non ha un'ottima connessione di rete.

Cosa accade? Che se tu provi a riprodurre un video, quel video comunque molto presumibilmente ti verrà riprodotto, ma con una qualità inferiore.

Perché? Perché youtube e altri altre piattaforme di visualizzazione video vanno a comprimere il video in funzione della della connessione in uso.

Quindi se c'è se l'utente sta utilizzando la connessione lenta, youtube ti farà comunque vedere il video, ma con una qualità molto bassa.

Comunque per per comunque offrirti un servizio, la stessa cosa dovremmo farla all'interno del nostro sito web.

Quindi se abbiamo un video molto pesante non dobbiamo far vedere il video molto pesante anche a chi ha una connessione molto lenta, altrimenti non li caricherà più.

Ma dobbiamo adattarlo in funzione della connessione del dell'utente.

Come facciamo a vedere se ciò accade? Andiamo a inserire in questo selettore una connessione lenta, quindi slow tre g ad esempio una connessione tre g lenta.

Ricarichiamo la pagina e teniamo conto di quello che è il di quello che è il peso di questi video.

Quindi principalmente abbiamo un video che è ripetuto tre volte in questo caso perché probabilmente è stato ricaricato.

Però semplicemente abbiamo un video di novecentocinquanta kilowatt che è questo e un altro da centocinquanta kilowatt che è questo.

Quindi ricarichiamo la pagina e vediamo se effettivamente il peso di questi video cambia e quindi viene adattato in funzione di alla connessione in uso, che è appunto una connessione molto lenta.

Ora la pagina impiegherà molto più tempo a caricare perché appunto stiamo simulando una connessione molto lenta e vediamo i video come verranno scaricati.

Eccoli qua sono apparsi okay, come vedi um nonostante appunto non siano ancora stati caricati completamente, ci metterà molto.

Siamo già intorno ai dieci secondi, i video sono alla risoluzione completa la risoluzione massima, quindi a novecentocinquanta chilobyte centocinquanta.

Quindi effettivamente questa funzione non è in uso.

Infatti come stai notando i video impiegheranno anche più di un minuto a essere scaricati perché chiaramente su una connessione così lenta novecentocinquanta kilobyte sono veramente tanti e impiega tanto a scaricarli e di conseguenza questa questa funzionalità non è stata adoperata.

Poi i video del sito web non vengono caricati selettivamente stesso discorso delle sedi per immagini, quindi anche in questo caso cosa accade? Che noi abbiamo questo video che è un podcast che sicuramente non abbiamo in quest'area di pagina, ma ce l'abbiamo molto più in fondo.

Vediamo dove si trova.

Eccolo qua.

Questo è il video.

Come vedi si trova a oltre metà pagina, quindi verso fondo pagina e nonostante ciò noi ce l'ha sempre scaricato anche stando qui, pur stando qui.

Quindi togliamo la connessione lenta, ricarichiamo la pagina, non effettuiamo alcuna interazione, quindi andiamo a simulare un utente che da qui potrebbe tranquillamente andarsene in una pagina interna o comunque non voler effettuare la scuola di pagina.

E nonostante ciò gli abbiamo fatto scaricare questo video che appunto non è necessario che lui vada a scaricare e di conseguenza andiamo a andiamo ad appesantire inutilmente la pagina um facendo sì che si carichi in tempi più lunghi, quindi anche in questo caso non è stato adoperato questo questa ottimizzazione.

Poi i video del sito web non fanno uso di immagine in anteprima per il caricamento.

Allora questa è un'altra è un po', una soluzione alternativa al discorso della compressione in funzione della connessione in uso.

Ovvero se noi ci troviamo qui, eccoci qui invece di far vedere direttamente un video che con autoplay, quindi che automaticamente viene avviato.

Noi potremmo fare un'altra cosa molto interessante, ovvero sostituire questo video con un'immagine di anteprima che può essere proprio il primo frame del video, quindi ci può dare l'idea che effettivamente sia un video, ma quest'immagine um potrebbe pesare dieci kilobyte tranquillamente.

Quindi cosa succede che l'utente carica la pagina invece di um scaricare novecentocinquanta chilometri di video ne scarica solo dieci kilobyte di immagine, quindi soprattutto su connessioni lente l'immagine e la la la pagina comunque verrebbe scaricata in tempi molto brevi e una volta fatto questo, magari se l'utente passa il mouse sul video passa il dito quello che vogliamo allora il video viene caricato e parte, ma solo se l'utente passa il mouse o magari si fa click altrimenti non lo facciamo scaricare.

Così facendo ottimizziamo anche qui andiamo a recuperare molto spazio, quindi andiamo a velocizzare di molto il tempo di caricamento della pagina perché comunque questo è un video di un megabyte e quindi è un peso comunque abbastanza sostenuto, quindi anche in questo caso non fa uso di immagine in anteprima perché altrimenti qui avremmo un'immagine statica che si trasformerebbe in un video solo e magari in determinate condizioni.

Poi gli del sito web non sono unificati di script.

In questo caso qui faccio faccio riferimento a tutti i file script, quindi a file che determinano alcune tipologie di interazione all'interno del sito web e la mini mini modificazione, come nel caso del del dei fogli di stile la andiamo a identificare cercando l'attributo min, quindi andiamo sotto la voce network ricarichiamo ancora la pagina? Sì eh mettiamo un filtro per j s, quindi javascript e cerchiamo abbiamo ottantadue elementi come vedi qui dal dove sto passando il mouse e cerchiamo il tributo min rispetto agli ottantadue elementi trentotto hanno l'attributo mini, quindi siamo certi che sono stati mini modificati in questo caso, come ho detto prima, non non vado ad aprire ogni singolo file perché chiaramente per una questione di tempistiche è una questione di di rapidità, eh, ma diamo per scontato diciamo che anche gli altri file già scritti siano stati minniti, quindi diciamo che il test è stato superato.

Poi gli del sito web sono accorpati come nel caso dei fogli di stile accorparli significa accentrare il rischio che chiaramente il singolo file non venga eseguito correttamente, quindi salti tutto, eh? Salti tutto tutte le tipologie di interazione all'interno del sito web.

In questo caso sicuramente non avviene perché abbiamo ben ottantadue file SCP, quindi il test è superato.

Poi gli iscritti del sito web sono bloccanti per renderli nella pagina.

Anche qui, come per il caso dei fogli di stile, non andiamo a effettuare il test manuale, che sarebbe troppo lungo e complesso, ma andiamo a vedere direttamente dalle indicazioni di Gold Insis, quindi andiamo a vedere se ci sono degli script bloccanti per la visualizzazione di pagina.

In questo caso cerchiamo abbiamo abbiamo la ricerca di prima, cerchiamo appunto J S, quindi sempre script e come vedi, ci sono dei file che sono bloccanti per la visualizzazione, quindi per il di conseguenza anche questo test non è superato.

Siamo al penultimo ed è che il sito web fa uso eccessivo di sct per funzionalità non essenziali.

Allora questo è un aspetto molto importante ma anche difficile da valutare.

Perché? Perché l'ideale in questo caso sarebbe interfacciarci con lo sviluppatore o comunque chi ha realizzato il sito web al fine di comprendere eh? Chiaramente il motivo per cui ogni file script venga caricato, quindi capire se effettivamente ogni file, ogni script venga caricato per una funzione che è essenziale nel sito web.

In questo caso abbiamo ben ottantadue script, quindi sono veramente tanti e è possibile in parte identificare attribuire a ogni script una funzionalità.

Però chiaramente è un lavoro molto impegnativo che richiede molto tempo.

Quindi, per semplicità, io presumo che tutti gli scritti abbiano un senso all'interno della pagina e di conseguenza, do per scontato che il test sia stato superato.

Veniamo all'ultimo, ovvero che gli script non essenziali del sito web non vengono caricati in modo differito o asincrono.

Gli script non essenziali sono sostanzialmente tutti gli script esterni, principalmente cioè tutti gli script che non determinano le funzionalità essenziali del sito web.

Ad esempio, se noi non avessimo non avessimo all'interno del des- della pagina web, non avessimo altri strumenti esterni, la pagina web comunque, avrebbe senso di esistere.

Funzionerebbe comunque non creerebbe alcun tipo di problema di di in termini di funzionalità.

Per fare questo, per identificare questo, dobbiamo fare tasto destro.

Visualizza sorgente pagina.

Quindi torniamo al nostro codice sorgente e andiamo a cercare quelli che sono con contro l'effe gli attributi.

Non so se carica.

Okay, okay, che è una funzione che appunto indica che quel quel java deve deve essere caricato in modo differito, che in questo caso non abbiamo oppure asic che sta per caricamento asincrono.

Okay, in questo caso abbiamo quattrocentosessantuno occorrenze sono un po' troppe e tra l'altro la prima fa riferimento il codice javascript, quindi non è da prendere riferimento.

Vediamo se ne troviamo delle altre.

Ecco qua qua ne troviamo una qua ne troviamo un'altra perfetto.

In questo caso ecco qua proprio ube.

In questo caso abbiamo uno script che è quello appunto di ube della funzionalità di ube che viene caricato in modo asincrono.

Ciò significa che appunto viene caricato successivamente a quelli che sono gli elementi ritenuti assenti nel sito web.

Quindi un caricamento asincrono fa sì che si dà priorità agli elementi interni alla pagina.

Così facendo appunto, noi andiamo a dare una priorità minore a quelli che sono ad esempio degli esterni, come il caso di ube.

Quindi è corretto che venga caricato in modo asincrono una funzione simile al eventualmente ti invito ad approfondire perché le differenze sono sono minime, ma variano in funzione delle necessità della tipologia di scrip che viene integrato nel sito web.

In questo caso chiaramente non faccio il controllo per tutti le occorrenze di assic che troviamo nella nella pagina web perché? Per una questione di tempistiche e quindi diamo per scontato che il test sia stato superato benissimo.

Qui abbiamo il nostro documento con tutte le criticità emerse con tutti i testi invece che sono stati superati.

Guarda qui cosa possiam fare? Selezioniamo solamente le intestazioni e i test, applichiamo un filtro e da qui noi possiamo andare a filtrare.

Innanzitutto, la cosa che potremmo fare è eliminare tutti i test superati.

Qualora non ci dovessero più servire, andiamo a selezionarli tutti e li eliminiamo semplicemente okay e abbiamo tutti i test che non sono stati superati.

Chiaramente noi dobbiamo avere un punto di partenza per ottimizzare questo sito web, quindi partiamo da dalle due colonne più importanti per importanza e impatto.

Quindi possiamo, ad esempio, creare un filtro su importanza e selezionare solamente le criticità che hanno un'importanza media o alta.

Okay e facciamo la stessa cosa con un impatto, quindi selezionare solamente gli aspetti che hanno un impatto medio alto sulle prestazioni del sito web.

Okay? Così facendo abbiamo le criticità più importanti e più impattanti per il sito web, quindi da cui partire per ottimizzare il sito web.

Una volta fatto questo, chiaramente andiamo a dare una priorità, quindi agli elementi andiamo a creare una sorta di road map, un un processo di ottimizzazione del sito web.

Una volta fatto questo, potremo concentrarci solo sugli elementi a bassa importanza e basso impatto.

Quindi possiam tenerli per um per un momento un momento secondario.

In realtà in questo caso abbiamo anche non abbiamo incluso le situazioni in cui c'è una bassa importanza un impatto medio alto okay anche queste situazioni e viceversa.

Quindi andiamo in funzione dell'importanza, dell'impatto e anche di quella che è l'importanza che diamo noi a creare una sorta di road map.

Quindi una um, una sequenza temporale nella quale andare a effettuare tutte le ottimizzazioni in in funzione di quello che sono le criticità emerse benissimo.

Abbiamo abbiamo concluso e nel prossimo modo lo vedremo come applicare tutte le seguenti ottimizzazioni a livello pratico