Corso di prestazioni web

Lezione 1 • Come i browser elaborano le pagine web

Tratta l'intera pipeline del browser, dalla risoluzione DNS fino al paint. Pone le basi per tutto il lavoro di ottimizzazione successivo su una comprensione concreta di ciò che il browser fa.

Lezione 2 • Il concetto di performance budget

Introduce i budget come vincoli su peso della pagina, tempi e richieste. Collega la definizione dei budget agli obiettivi di business e agli obiettivi di esperienza utente.

Lezione 3 • Comprendere il critical rendering path

Spiega quali risorse bloccano il rendering e perché. Costruisce le basi per le tecniche di prioritizzazione delle risorse trattate nei capitoli successivi.

Lezione 1 • Dati di laboratorio vs. dati sul campo

Distingue i test sintetici dal monitoraggio degli utenti reali (RUM). Definisce le aspettative su quando ciascun tipo di dato è appropriato per prendere decisioni.

Lezione 2 • Strumenti di audit automatizzati

Tratta Lighthouse, WebPageTest e piattaforme di audit simili. Consente un punteggio di performance automatizzato e ripetibile e il rilevamento delle regressioni.

Lezione 3 • Configurazione del monitoraggio degli utenti reali

Guida all'implementazione del RUM utilizzando l'API Performance Observer. Collega la raccolta dati sul campo alle metriche definite nel Capitolo 1.

Lezione 4 • Interpretare profili e tracce

Insegna l'analisi sistematica delle tracce registrate per trovare task lunghi e layout thrash. Collega i dati grezzi a decisioni di ottimizzazione attuabili.

Lezione 1 • Suggerimenti sulle risorse e preloading

Insegna le direttive dns-prefetch, preconnect, preload e prefetch. Riduce la latenza percepita avviando i recuperi prima che il browser li scopra.

Lezione 2 • Protocolli HTTP/2 e HTTP/3

Spiega multiplexing, compressione degli header e trasporto QUIC. Aiuta gli studenti a configurare i server per sfruttare i vantaggi dei protocolli moderni.

Lezione 3 • Strategie di compressione e codifica

Tratta Gzip, Brotli e negoziazione della codifica dei contenuti. Riduce direttamente i byte trasferiti per gli asset testuali.

Lezione 4 • Content Delivery Network

Tratta l'architettura delle CDN, la cache edge e lo scarico dell'origine. Riduce la latenza geografica per un pubblico globale.

Lezione 1 • Ottimizzazione di video e animazioni

Affronta la codifica video, i criteri di autoplay e la sostituzione delle GIF con video. Riduce il payload dei media per i contenuti in movimento.

Lezione 2 • Lazy loading e decodifica

Tratta il lazy loading nativo, Intersection Observer e la decodifica asincrona. Rimanda il costo delle immagini fuori schermo per migliorare il caricamento iniziale della pagina.

Lezione 3 • Compressione e regolazione della qualità

Tratta strumenti di compressione lossy e lossless e impostazioni di qualità. Bilancia la riduzione delle dimensioni del file con un degrado visivo accettabile.

Lezione 4 • Formati immagine moderni

Confronta WebP, AVIF e formati legacy su qualità e dimensioni del file. Fornisce agli studenti gli strumenti per scegliere il formato giusto per ogni caso d'uso.

Lezione 1 • Bundling, minification e tree shaking

Spiega come i bundler riducono le dimensioni del codice tramite minification ed eliminazione del codice morto. Riduce direttamente il costo di parsing e trasferimento.

Lezione 2 • Web Workers per elaborazione fuori dal thread principale

Introduce i Web Workers e l'algoritmo di clone strutturato. Sposta il lavoro intensivo per la CPU fuori dal thread principale per migliorare l'INP.

Lezione 3 • Strategie di caricamento JavaScript

Tratta gli attributi di caricamento async, defer e module. Impedisce agli script di bloccare il parsing HTML e ritardare il primo rendering.

Lezione 4 • Gestione di script di terze parti

Analizza l'impatto delle terze parti sul costo del thread principale e sulle richieste di rete. Fornisce strategie per caricare o rimandare in modo sicuro gli script esterni.

Lezione 1 • Compositing GPU e gestione dei livelli

Spiega come il browser promuove gli elementi a livelli del compositor. Insegna quando promuovere i livelli e come evitare l'esplosione dei livelli.

Lezione 2 • Animazioni e transizioni CSS

Confronta animazioni CSS, transizioni e animazioni guidate da JavaScript in termini di performance. Guida la selezione dell'approccio di animazione più efficiente.

Lezione 3 • Efficienza e specificità dei selettori

Spiega come la complessità del selettore influisce sul costo del ricalcolo dello stile. Guida gli studenti verso la scrittura di selettori che il browser risolve rapidamente.

Lezione 4 • Distribuzione CSS e CSS critico

Tratta l'inlining degli stili critici e il differimento del CSS non critico. Elimina i fogli di stile che bloccano il rendering per accelerare il primo paint.

Lezione 1 • Subsetting dei font e intervalli Unicode

Tratta gli strumenti di subsetting e il descrittore unicode-range. Riduce le dimensioni del file del font includendo solo i caratteri effettivamente utilizzati da una pagina.

Lezione 2 • Fondamenti del caricamento dei web font

Spiega FOIT, FOUT e le strategie di font-display. Affronta direttamente le regressioni di CLS e LCP causate da font caricati in ritardo.

Lezione 3 • Font variabili per le performance

Spiega gli assi dei font variabili e come un singolo file sostituisca più spessori. Riduce le richieste HTTP e il payload totale dei font per una tipografia ricca.

Lezione 1 • Core Web Vitals e posizionamento nei motori di ricerca

Spiega come le Core Web Vitals incidono sui segnali di posizionamento nei motori di ricerca. Collega l'investimento in performance a risultati misurabili in termini di traffico organico.

Lezione 2 • Prevenzione delle regressioni di performance

Stabilisce gate di CI/CD, applicazione dei budget e avvisi per le regressioni di performance. Assicura che le ottimizzazioni persistano durante lo sviluppo in corso.

Lezione 3 • Edge computing e personalizzazione

Tratta le edge function, i test A/B all'edge e la cache personalizzata. Riduce i round-trip all'origine per contenuti dinamici e specifici dell'utente.

Lezione 4 • Performance per le single-page application

Affronta il code splitting basato sulle rotte, il prefetching e le transizioni di navigazione nelle SPA. Estende le tecniche fondamentali alle architetture di routing lato client.