Dopo aver analizzato quello che è lo strumento ufficiale di Google per l'analisi delle prestazioni di un sito web, ovvero Google Page Insis, passiamo a un altro ottimo strumento a mio parere, ovvero test prima di iniziare, il primo consiglio che ti do è quello di registrare un account in modo tale che all'interno della tua area utente abbia tutto lo storico delle delle analisi effettuate nel corso del tempo.

Questo strumento, a differenza di gol, ci dà qualche possibilità di personalizzazione in più, in particolare su quello che è l'ambiente di test.

Quindi mentre gol effettua effettivamente dei test all'interno del suo ambiente, un ambiente che ha deciso lui con le caratteristiche che impone lui in questo caso l'ambiente di test possiam personalizzarlo e ora vediamo come la prima cosa che facciamo è inseriamo l'indirizzo del sito web che vogliamo analizzare.

In questo caso sempre learn selezioniamo la tipologia di test che vogliamo effettuare.

Possiamo in questo caso effettuare anche dei test un po' più approfonditi, un po' più specifici, ma in questo caso eh, rimaniamo sulla performance che comunque ci darà anche i test sottostanti e dopodiché selezioniamo la tipologia di configurazione che vogliamo adottare per il nostro ambiente di test, allora troviamo delle configurazioni personaliz- um preimpostate.

Quindi abbiamo ad esempio la prima configurazione che è un mobile, quindi uno smartphone.

In questo caso con Google Chrome browser Gole Chrome, una connessione quattro G con server situato in Virginia USA sotto ne abbiam delle altre, quindi desktop mobile desktop con vari server in varie parti del mondo e varie connessioni vari browser.

Quello che interessa fare a noi in questo caso è fare una persona, una, diciamo un un ambiente personalizzato, quindi andiamo su ad configuration.

Inseriamo come test lo location Milan, quindi in questo caso utilizza dei server a Milano che sono i più vicini probabilmente al nostro um al nostro pubblico tipo.

Quindi possiamo da qui selezionare vari server in varie parti del mondo, quindi ci permette di avere un'analisi quanto più simile a quello che sarà il nostro pubblico come browser.

In questo caso utilizziamo Chrome per il semplice fatto che il browser più utilizzato al mondo.

Ma, come vedi possiamo effettuare il test con moltissimi browser e dopodiché selezioniamo come impostazioni avanzate la tipologia di connessione.

Questo possiam farlo anche rispetto a quello che è, diciamo la connessione media del del luogo in cui sappiamo che dal luogo da cui sappiamo che gli utenti si connetteranno.

Quindi se sappiamo che in Italia c'è una connessione mega di una connessione media di cinque megabit in download e un megabit in upload, per esempio, selezioneremo la prima.

Se sappiamo che c'è una tipologia di connessione differente, allora ne selezioneremo delle altre.

Possiamo selezionare la la risoluzione di schermo, quindi quella di default in questo caso non è in in full h d, ma è in milletrecentosessanta sei per settecentosessantotto, che è diciamo la, la configurazione standard per pc portatili di fascia medio bassa e, cosa molto interessante, la quantità di test da da avviare perché la quantità di test avviare perché molto spesso avviare un solo test, quindi in una sola situazione, um può non rappresentare la realtà, nel senso che chiaramente fare un caricamento di pagina um può far sì che in quel in quel momento specifico, in quel momento specifico con quell'ambiente specifico, magari il serve sia un po' più lento sia un po' meno responsivo, eh? O magari in quel momento specifico sia un po' più um ci siano delle risorse che caricano in un po' più di tempo e quindi ci sono delle situazioni in cui um chiaramente andare a eseguire tre test invece che uno ci può dare diciamo un valore, un po' più attendibile perché abbiamo una media tra i tre risultati.

Quindi il consiglio che ti do è quello proprio di utilizzare almeno tre test.

Poi poi chiaramente puoi effettuarne cinque sei, sette otto nove in modo tale da avere un valore sempre più attendibile.

In questo caso possiamo personalizzare altre altre impostazioni, ma non ci servono particolarmente sulle avanzate ne abbiamo ulteriori, quindi possiamo disabilitare de delle speci- degli specifici supporti, ad esempio al ai formati d'immagine, cioè andare sostanzialmente a limitare un po', quello che è il nostro ambiente di test.

A meno che tu non abbia delle esigenze specifiche e non stia diagnosticando un problema specifico, diciamo che questa configurazione va più che bene, almeno nel novanta per cento dei casi.

Quindi una volta fatto questo facciamo star test.

Ora attendiamo che vengano effettuati questi tre test.

In questo caso ci sta dicendo che il test lo sta effettuando appunto da Milano con i server di Milano utilizzando Chrome con una connessione via cavo con addirittura ci dice la latenza della connessione.

Quindi in questo caso ci da la latenza del del server di connessione.

Okay, siamo nella fase di test, quindi effettivamente sta caricando le pagine, sta facendo questi tre test e ora attendiamo che il test venga concluso.

Perfetto.

Lo strumento ha concluso il nostro test ha impiegato circa due minuti perché chiaramente ha effettuato tre test e ha fatto delle delle analisi piuttosto approfondite.

Ora, in particolare ci dice anche la versione di Chrome utilizzata e da qui, una volta esaminato il test, possiamo anche condividerlo.

Quindi far condivisione via mail o effettuare una schermata di quello che è il il nostro test effettuato.

Allora innanzitutto abbiamo rispetto a questo test varie varie schermate, vari test specifici che sono quelli che vedi qui dalla View abbiamo delle sorti di RD, quindi dei rapporti in funzione di quello che è la tipologia di test che vogliamo esaminare nello specifico.

Partiamo da performance summary, quindi dalle diciamo dal riepilogo delle prestazioni.

Qui abbiamo semplicemente un riepilogo, diciamo un punteggio di quello che è la velocità del sito l'usabilità e altro, ma in questo caso consiglio di prendere molto questi dati con le pinze, perché sono dati che vengono forniti in modo in modo abbastanza automatico sotto vediamo, iniziamo a vedere dei dati che ci possono interessare.

Ad esempio nello specifico vediamo il tempo di risposta del server in questo caso ci fa vedere la il test che ha preso di di riferimento e in questo caso è stato utilizzato come vedi tre cioè il, il terzo, il terzo tre test, il terzo diciamo tentativo perché come vedi questi tre che vediamo in questi tre grafici che sono i grafici a cascata di tutte le risorse scaricate per il sito web, mostrano tre situazioni differenti son tre caricamenti di pagine differenti, quindi nel secondo caso ho impiegato dieci secondi a caricare nel primo ventiquattro venticinque secondi e nel terzo ventiquattro lui ha preso quello che ritiene diciamo il test a suo parere più um più attendibile, quindi ci dà il tempo di risposta del server il tempo di risposta um il tempo di inizio scusami del del della pagina.

Quindi dopo quanti secondi ha iniziato a rendere della pagina il fisco full paint che abbiamo visto anche nello strumento Google Paget quindi che non ti spiego nuovamente lo x che anche qui è un valore che troviamo una che troviamo anche in Google pace, quindi il tempo di caricamento dell'elemento più impattante della pagina.

Anche qui valore che ritroviamo sempre in gol cumulative.

Anche questo sempre parte di quel Wes che troviamo nel goltz total blocking time.

Quindi il tempo, eh per quanto tempo è è stato è stato bloccante di pagina e il peso della pagina.

Quindi troviamo diciamo gran parte delle informazioni che ritroviamo anche all'interno del ma le troviamo subito a vista d'occhio.

Chiaramente queste sono informazioni basate sul test effettuato, quindi non sono i dati presi dal dalle esperienze degli utenti negli ultimi ventotto giorni, così come riporta gol nel nei suoi nei suoi test.

Nella sua prima schermata poi sotto vediamo proprio questo, ovvero i dati degli ultimi ventotto giorni rispetto a quelli che sono i dati acquisiti da Google um sulla base delle esperienze degli utenti all'interno di Google Chrome.

Quindi rispetto alle visite degli utenti sul sito web, Goole raccoglie questi dati e ce li riporta qui.

Quindi semplicemente in questo caso web test prende gli stessi dati presi da Google e li riporta qui, quindi non ci soffermiamo tanto su questi dati.

In particolare ci interessa però vedere quelli che sono i grafici a cascata, quindi qui abbiamo i le tre i tre test e infatti qui ci fa capire quanto è stato importante eh? Avviarne tre e non uno solo, perché nel primo caso il sito web è caricato in venticinque secondi in modo completo, quindi considerando anche tutti gli scritti esterni, nel secondo caso in dieci e questo ci può aiutare ad innescare eventuali problemi e ci può dare un dato molto più attendibile rispetto a quello che sono le le reali prestazioni del sito web.

Um poi troviamo water appunto quindi il grafico a cascata che facendo click possiamo espandere lo screenshot.

Quindi anteprima anche per vedere se da un test all'altro effettivamente c'è qualche differenza.

Quindi se capiamo che qualche elemento non è stato caricato e poi c'è la parte di video di rendering, apriamo quello che ci interessa maggiormente, ovvero il grafico a cascata waterfall facendo click noi abbiamo, come vedi ci siamo spostati sulla scheda di ts e in questo caso, al di là dei dati che abbiamo già visto, abbiamo un grafico a cascata.

Quindi questo è la cosa forse più importante in assoluto, seppure sia molto tecnica, perché ci fa vedere ogni singola risorsa della pagina web come è stata scaricata? In quale momento specifico quanto tempo ha impiegato e tanto altro.

Um in questo caso, ad esempio, vediamo il il tempo ricaricamento in questo caso della risorsa H T M l.

Cioè quindi faccia facendo click sul sulla prima risorsa per il documento H t m l possiamo vedere tanti dati um, tra cui ad esempio, la tipologia di richiesta.

Quindi gli hers della richiesta in questo caso sono dati che, um possia possiam vedere nella nella prossima nella prossima lezione relativamente a Chrome De Urs, quindi li vedremo direttamente dentro nel nostro browser e troviamo alcune informazioni che possono esserci utili, come il protocollo in uso del server l'indirizzo p del server.

Quindi l'indirizzo p associato al al dominio il tipo di codice di Stato, quindi il codice di stato.

Se la pagina risponde con un codice duecento, quindi significa che la pagina esiste e è un codice di stato corretto, oppure se è una pagina che è stata reindirizzata, se una pagina non esiste.

E allora diciamo che il codice di Stato varia la priorità del tipo di elemento.

Questo l'elemento h t m l la tipologia di stream h t t p due.

Questo non ci interessa particolarmente e e questi di anche questi sono dati troppo tecnici che non ci interessano sotto.

In particolare, ci può interessare questa sezione, cioè quella relativa al timing, ovvero il tempo di um scoperta della risorsa quando ho iniziato a caricare la risorsa, cioè quando è iniziata, quando è stata avviata la richiesta, il D N s.

Luca Up, cioè effettivamente quello che abbiamo visto nel nella parte nelle basi, nelle basi teoriche del delle prestazioni, ovvero il tempo di di risoluzione del D n s.

La connessione iniziale, la negoziazione S S, L, quindi la shake, il tempo totale di connessione, il ovvero il tempo ricaricamento del server, il tempo di risposta del server, il tempo di download della risorsa e il tempo di elaborazione da parte della C p u, ovvero dalla parte hardware, ovvero la parte di elaborazione per il dispositivo che abbiamo utilizzato nel nostro test, che in questo caso, se ricordo bene, era un moto, la moto G, che è lo stesso che utilizza Google per i suoi test.

Questo ci interessa.

Perché? Perché da qui, se abbiamo un tempo di risposta che serve, ad esempio un tempo di caricamento di questa risorsa di quattro secondi.

Possiam dire Okay, allora forse la risorsa è troppo pesante, oppure serve che ci mette troppo a lavorarla oppure è il dispositivo che ci mette troppo a caricare questa risorsa perché fa fatica.

Da questi dati possiamo diagnosticare il problema e in questo caso è abbastanza palese che il problema è relativo al tempo di risposta del server, che è molto molto eh, che è molto molto lento, mentre tutte le altre tempistiche vediamo che chiaramente si attestano a poche decine di millisecondi.

Poi andiamo sotto la voce di questo.

In questo caso troviamo dei dati tecnici che non ci interessano particolarmente se non, ad esempio, vedere il tipo di compressione che è stato utilizzato l'algoritmo di compressione che è stato utilizzato per comprimere questo documento H T M l il tipo, il tipo di richiesta H T, T P e tanti altri dati troppo tecnici.

Passiamo ora alla voce Response qui troviamo informazioni ad esempio sul server, quindi la tipologia di web server in uso e poi troviamo sempre altre informazioni che nel nostro caso non ci interessano.

La stessa cosa che abbiamo fatto con la prima risorsa possia possiamo farla con tutte le altre, quindi prendere ad esempio la risorsa.

La prima risorsa C S S.

Quindi determina lo stile degli elementi all'interno della pagina e vedere la stessa cosa.

Qui, ad esempio, troviamo alcune informazioni in più, come il fatto che la risorsa sia bloccante o meno.

Ad esempio, vediamo la scritta block status block Cosa significa? Che significa? Che questa questo foglio C S s.

Questo foglio di stile è bloccante per i della pagina significa che appunto, se non è ritenuto essenziale, è consigliabile ritardarlo in modo tale che appunto non blocchi la fase di renderli.

Quindi diciamo che possiamo vedere facendo click su ogni singola risorsa, tutti i dettagli che um che possono interessarci a diagnosticare eventuali problemi di prestazioni.

In particolare poi altre cose che possiam vedere riguardano, ad esempio, come viene elaborata con la richiesta la tipologia.

Quindi sopra abbiamo qui delle una leggenda, okay, non riesco a evidenziarlo che ci permette di capire a vista d'occhio quali sono le risorse che magari ci cattura ci danno un segnale che può essere interpretato come negativo.

Ovvero abbiamo questa X sopra con scritto che ci fa capire a vis a vista d'occhio se la risorsa è bloccante per il rendering oppure no, e noi vediamo che le prime ventisei risorse sono tutte bloccanti per il rendering e ci sono tra tra di esse anche dei file JavaScript e questi possono essere molto impattanti.

Ad esempio per per um perché bloccano l'intera attività con la pagina anche sotto vediamo che ce ne sono altri.

In questo caso sono risorse esterne.

Cloudflare adesso non so cosa sia nello specifico, però qualche risorsa appunto proveniente da cloud, che potrebbe essere l'esterna, potrebbe non essere essenziale per per la visualizza la corretta visualizzazione della pagina.

Altre informazioni che ci possono interessare.

Ad esempio, è il tipo di risposta, quindi abbiamo evidenziato in giallo quando una richiesta um riceve una risposta di tipo tre x x, ovvero ad esempio tre zero uno, che è un codice di risposta che indica che quella risorsa è stata viene poi reindirizzata a un'altra a un altro u R l.

Quindi facciamo facciamo un esempio molto semplice se questa risorsa che in giallo viene caricata e esce in giallo, significa che non esiste più questa risorsa, ma viene reindirizzata un'altra risorsa.

Magari è stato sostituito l' u r l è stata aggiornata.

La versione può essere qualsiasi cosa in questo caso fa riferimento a un un tipo di reindirizzamento tre zero due.

Come puoi vedere qui, e di conseguenza significa che è un indirizzamento di tipo temporaneo, significa che questa risorsa viene temporaneamente reindirizzata a un'altra e anche qui si può indagare e capire come mai viene reindirizzata un'altra effettivamente essenziale che che accada poi insecure.

Questo in questo caso fa riferimento a tutte le richieste che avvengono sotto protocollo h t t p invece di h t t PS facciamo magari un po' di zoom.

Okay, poi troviamo quattro XX response, quindi codici di stato quattro con ad esempio errore quattrocentoquattro, quindi pagine che effettivamente non esistono più.

In questo caso l'analisi ci permette rapidamente di individuare eventuali risorse che vengono caricate per la pagina, ma non esistono più.

In questo caso non ne abbiamo, quindi meglio così.

Insomma, questa leggenda ci permette di eh di individuare tantissimi aspetti e diagnosticare tantissimi, tantissimi, tantissime, potenziali criticità.

Nel sito web possiamo anche individuare il content, quindi qual è stato il il primo elemento che è stato mostrato a livello visivo? Il full nt se c'è stato delle quindi se c'è stata una variazione dell'impaginazione e possiamo vedere veramente tutte le fasi del rendering in modo molto dettagliato e molto preciso.

E questo tutto all'interno di una sola, di fatto una sola immagine con tutti gli eventuali approfondimenti.

Quindi questo strumento ci permette di fare un'analisi molto tecnica e sotto ci permette anche di vedere l'utilizzo della C p u, quindi il processore da parte del dispositivo.

Quindi in quali casi è stato più intenso e in quali no? Quindi abbiamo un'analisi veramente molto, molto dettagliata sotto nel dettaglio abbiamo anche la parte di connection, ovvero le fasi di connessione ai domini esterni del sito web.

Quindi vediamo tutti i domini esterni a cui il sito web sia connesso e questo ci permette anche di capire a quali noi possiamo precotte utilizzando una una una funzione di pret tramite il codice che vedremo sempre nelle nelle prossime elezioni, in quelle in quelle più pratiche e vedere anche quali domini hanno una latenza maggiore e quindi magari quali possiamo um possiam ritardare o possiamo magari valutare di rimuovere, quindi vediamo i tempi di risposta di ogni singolo dominio esterno a a cui si collega il sito web.

Poi vediamo le risorse nel dettaglio.

Qui vediamo sostanzialmente un po' la stessa cosa che vediamo qui in questo grafico a cascata, ma a tabella.

Quindi vediamo le sostanzialmente le stesse informazioni qui le abbiamo viste prima il tempo di risposta del del server rispetto al primo documento H T M l tutti tutti gli altri dati per ogni risorsa, però a tabella, quindi mostrati in modo in modo un po' più analitico diciamo sotto vediamo di di richiesta.

In questo caso non ci interessano particolarmente.

Vediamo di ogni singola di ogni singola richiesta, anche perché comunque li ritroviamo all'interno del nostro grafico a cascata, facendo click sulla richiesta che ci interessa.

E poi finisce qui il test Qui diciamo qui abbiamo tutti i dettagli, appunto la la pagina, i dettagli rispetto al caricamento di questa pagina, poi andiamo su e in questo caso semplicemente abbiamo gli stessi dati che visualizziamo all'interno di.

Quindi abbiamo quelli che sono quelle che sono le criticità emerse e quelle che sono le opportunità, ovvero le opportunità di miglioramento rispetto a queste criticità che ci consiglia lo strumento.

In questo caso ne abbiamo parecchie, come è stato nel caso di di goltz.

Alcune di queste non le mostra in particolare perché richiede l'utilizzo di una versione pro poi abbiamo il film Streep.

Okay? In questo caso abbiamo nello specifico riusciamo a vedere rispetto a quello che è sempre il nostro grafico a cascata le varie fasi di della pagina.

Quindi vediamo come si caricano gli elementi nel corso dei vari decimi di secondo e che percentuale di caricamento della pagina rispetto a quella schermata.

Quindi anche questo ci aiuta molto a diagnosticare eventuali problemi di rendering, o magari elementi che non si caricano correttamente o che si caricano troppo tardi, quindi capire il perché e chiaramente man mano che noi scorriamo questo film.

Streep quindi questa diciamo sequenza di immagini.

Abbiamo il corrispettivo all'interno di questa linea rossa, quindi man mano che io scorro la linea rossa ci fa vedere in che punto siamo, cioè quindi a questo punto che elementi stiamo caricando? Quindi è veramente tanto dettagliato? Questo strumento ci permette di analizzare molti aspetti che Spades non ci permette di analizzare.

Possiamo andare sotto la scheda core Weta, quindi analizzare quelli che sono i core Wes a riguardo ci dà qualche informazione in più.

O meglio, ci dà diciamo, delle informazioni in modo un po' più chiaro magari di quello che di quello che fa ad esempio gole pages ci dice qual è l', ma dobbiamo andare a trovarlo all'interno delle criticità emerse diciamo o dei test passati e andare poi a trovare in piccolo l'immagine qui ce lo dice subito, ci fa vedere subito l'immagine ci evidenzia subito qual è l'elemento più impattante della pagina, che viene quindi considerato come l' e in particolare in quale in quale istante è stato caricato e di conseguenza il frame relativo a quel momento.

Quindi abbiamo veramente tantissimi dati sotto ancora il nostro il nostro grafico a cascata.

Andiamo poi nella scheda um nella scheda optimization.

Qui abbiamo sempre un una sorta di riepilogo di quelle che sono tutte le risorse con eventuali diciamo con delle caratteristiche relative a queste risorse.

Quindi, ad esempio se l'immagine è compressa, se se è presente, se la singola risorsa è presente in cash, se se è presente una C D n per quella risorsa e via dicendo.

Quindi tantissime informazioni relative a ogni singola risorsa e poi abbiamo content.

Qui abbiamo sostanzialmente dei grafici, dei rapporti su quelli che sono i i formati più utilizzati all'interno del del si della pagina web.

Scansionata, quindi la tipologia di risorsa e abbiamo un grafico a torta che ci fa vedere quanto quella tipologia di risorsa occupa rispetto a tutte le risorse del sito web.

Quindi vediamo che ad esempio, in termini di quantitativo di richieste, le immagini occupano il trenta percento di tutte le richieste di pagina di script, quindi già la script occupano il trentacinque percento delle richieste di pagina, in termini però assoluti, quindi in termini di um di spazio occupato di spazio richiesto da scaricare per l'utente vediamo che le immagini sono ammontano a otto megabyte, quindi sono il settanta per cento del peso totale della pagina.

Questo già ci accende un importante campione di allarme perché ci fa capire che, um le immagini occupano cioè per questa pagina le immagini occupano il settanta per cento del del peso totale della pagina e questo è molto significa che sono molto impattanti e possono probabilmente essere compresse sempre.

Poi, rispetto a questo troviamo sempre il nostro um diciamo il nostro grafico a cascata, il nostro grafico, in questo caso delle delle connessioni ai ai domini esterni.

Poi andiamo sotto sotto la voce, ma in questo caso troviamo tutti i domini esterni a cui si collega questa pagina web e abbiamo anche qui dei dettagli rispetto a quanto questi domini esterni impattano sia in termini di quantitativo di richieste, sia in termini di quindi di peso di queste richieste.

All'interno della pagina.

Quindi vediamo ad esempio che um L' production in questo caso è il dominio relativo al alla fornitura dei video per per le R N, quindi di Amazon V S occupa il sessantasette per cento del peso totale della pagina.

Quindi questo dominio tra virgolette occupa il sessa-, il sessantasette percento della pagina in termini di spazio e poi vediamo tutti gli altri le punto com, quindi il dominio in essere il ventun percento e poi tutta la suddivisione di tutti gli altri domini a cui si connette la pagina web.

Vediamo quello che è la console log.

Questo è sostanzialmente un rapporto di tutto quello che sono i log del del browser per questa pagina.

Quindi quello che è un rapporto su eventuali um su eventuali avvertimenti o errori critici che vengono riportati all'interno del browser ci serve principalmente per diagnosticare eventuali problemi, eventuali proprio problematiche in termini di caricamento della pagina.

Dopodiché abbiamo detective Technologies.

In questo caso abbiamo, um quello che alcuni alcune estensioni di Chrome alcuni siti web fanno per aiutare a aiutare, diciamo chi è esterno al sito web, a identificare come è stato costruito questo sito web.

Quindi, se per curiosità vogliamo sapere com'è stato costruito il sito web, possiamo vederla le tecnologie che sono state utilizzate all'interno di esso.

Questa analisi che West fa tra attraverso il codice del sito web attraverso la struttura del sito web e ci permette di vedere gli strumenti utilizzati per il sito l'architettura e via dicendo, quindi tutti gli strumenti utilizzati e infine abbiam la parte di di processing.

In questo caso vediamo come la parte di elaborazione delle richieste avviene quindi la tipologia di eventi che avvengono e le tipologie di categorie.

Questo è un aspetto molto avanzato che non riguarda solo le prestazioni, ma anche tutto in generale tutta la fase di di di connessione alla alla pagina web.

Questo è quanto abbiamo visto che lo strumento appunto è, è molto più completo rispetto a quello, ma allo stesso tempo può essere fin troppo specifico, fin troppo dettagliato per un uso comune e di conseguenza il mio consiglio è principalmente di basarsi sulla performance summary, Quindi la prima la prima sezione e in particolare entrare in quello che è il grafico cascata per vedere effettivamente quali sono le risorse che stanno impattando maggiormente sul sito web.

Altro altro aspetto molto interessante di questo strumento è è chiaramente la possibilità di personalizzare l'ambiente di test.

Quindi, mentre e altri strumenti si basano sull'ambiente di test che stabiliscono loro in questo strumento, noi possiamo andare a dare delle specifiche molto precise e diagnosticare problemi molto specifici su appunto, um tipologie di dispositivi o di computer che vogliamo esaminare.