DevTools

Performance

Stampa WhatsApp Email

Performance: timeline e rendering: Record, Main thread, network track, FPS, long tasks, flame chart, layout shift e Web Vitals.

Prestazioni | Performance
Competenze: riconoscere gli strumenti trattati, interpretarli correttamente e applicarli durante un’analisi del browser.

Performance: timeline e rendering

Durata: 50 minuti · Chrome o browser Chromium compatibile

Record, Main thread, network track, FPS, long tasks, flame chart, layout shift e Web Vitals. Gli strumenti di sviluppo permettono di osservare ciò che accade nel browser. Le opzioni possono variare tra versioni: se una scheda non compare, cercala nel menu » oppure More tools.

Che cosa osservare e perché

Usa gli strumenti solo su pagine che sei autorizzato a esaminare. La modifica di HTML, CSS o JavaScript in DevTools è in genere locale e temporanea: non equivale a modificare i file del sito. Una richiesta o un dato non presente non è necessariamente un errore.

LABORATORIO

Analizzare performance: timeline e rendering con Chrome DevTools

Procedura guidata, circa 20 minuti

Obiettivo: applicare le funzioni studiate su una pagina già disponibile nel browser. Occorrente: Chrome, DevTools e una pagina dimostrativa o del corso.

  1. Apri Performance e individua Record.
  2. Avvia una registrazione e scorri la pagina per alcuni secondi.
  3. Interrompi la registrazione e osserva la timeline.
  4. Individua le tracce di rete e Main, se disponibili.
  5. Ingrandisci un intervallo con lo zoom e cerca attività lunghe.
  6. Esamina le informazioni di Summary o Bottom-up quando disponibili.
  7. Confronta due registrazioni effettuate con azioni diverse.
Output atteso: Compare una timeline con attività del browser; il dettaglio dipende dalla pagina e dalla versione di Chrome.
Se non trovi il comando: verifica il nome della scheda e usa », More tools o il Command Menu. Se un risultato non compare, annota ciò che osservi e confrontalo con il docente; non modificare impostazioni del server.

Esercizio autonomo: ripeti l’analisi su una seconda pagina e produci una tabella con azione, scheda usata, dato osservato e interpretazione.

Verifica dei concetti

Che cosa consente di osservare questa lezione?
Record, Main thread, network track, FPS, long tasks, flame chart, layout shift e Web Vitals.
Le modifiche effettuate in DevTools vengono pubblicate sul sito?
No: salvo strumenti e procedure specifiche di sviluppo locale, le modifiche al DOM o agli stili sono temporanee e riguardano il browser.
Perché un pannello può apparire vuoto?
Perché la pagina non utilizza la funzione, non ci sono eventi o risorse pertinenti oppure la registrazione non era attiva.
Come si recupera una scheda non visibile?
Dal menu » della barra delle schede, More tools o Command Menu; le etichette dipendono dalla versione.
Che cosa va annotato nel rapporto finale?
Azione effettuata, strumento utilizzato, evidenza osservata e interpretazione, distinguendo fatti e ipotesi.

Core Web Vitals: LCP, INP e CLS

Interpretare le metriche che descrivono caricamento, reattività e stabilità visiva.

Concetti e strumenti

  • LCP (Largest Contentful Paint): misura quando diventa visibile il contenuto principale più grande; riferimento “buono” fino a 2,5 s.
  • INP (Interaction to Next Paint): misura la latenza delle interazioni osservate; riferimento “buono” fino a 200 ms.
  • CLS (Cumulative Layout Shift): quantifica gli spostamenti visivi inattesi; riferimento “buono” fino a 0,1.
  • Misurazione: distingue dati di laboratorio e dati raccolti da utenti reali; una singola registrazione non rappresenta tutti i dispositivi.
  • Performance: la timeline aiuta a correlare attività del thread principale, rendering e richieste di rete con i rallentamenti.
LABORATORIO

Core Web Vitals: LCP, INP e CLS

Procedura guidata con osservazioni verificabili

Obiettivo: Interpretare le metriche che descrivono caricamento, reattività e stabilità visiva.

  1. Apri una pagina dimostrativa e il pannello Performance; se disponibile, individua la vista dedicata ai Core Web Vitals.
  2. Avvia una registrazione di caricamento, ricarica la pagina e termina la registrazione.
  3. Individua l’evento LCP e annota l’elemento interessato; esamina il contributo di rete e rendering.
  4. Interagisci con la pagina durante una nuova registrazione e cerca eventi o indicazioni legate alla reattività (INP, se disponibili).
  5. Osserva eventuali layout shift e prova a individuare immagini senza dimensioni dichiarate o elementi inseriti tardivamente.
  6. Ripeti la misurazione e confronta i risultati, senza trarre conclusioni da una sola prova.

Risultato atteso: Un rapporto con LCP, INP e CLS dove misurabili, possibili cause e un intervento migliorativo per ciascuna metrica.

Se non funziona: controlla di aver selezionato la scheda corretta, ricarica la pagina e verifica che la funzione sia disponibile nella tua versione di Chrome. Non tutte le pagine espongono le stesse risorse.

Esercizio autonomo: Proponi come evitare un layout shift causato da un’immagine senza larghezza e altezza.

Verifica dei concetti

Che cosa misura LCP?
Il momento di visualizzazione del principale elemento di contenuto di grandi dimensioni.
INP riguarda il caricamento iniziale?
Riguarda la reattività alle interazioni durante la visita.
Quale fenomeno misura CLS?
Gli spostamenti visivi inattesi del layout.
Una sola registrazione basta per giudicare tutti gli utenti?
No: condizioni di dispositivo, rete e uso variano.
Quali sono soglie di riferimento buone?
LCP ≤2,5 s; INP ≤200 ms; CLS ≤0,1, nelle condizioni di misurazione previste.
COLLEGAMENTO CON PROTOCOLLO HTTP

Collega i tempi misurati dal browser alle prestazioni HTTP.

Apri la lezione del corso PROTOCOLLO HTTP →