# Analizzare un sito per le prestazioni ## Panoramica dell'assegnazione L'analisi delle prestazioni è una competenza fondamentale per gli sviluppatori web moderni. In questa assegnazione, condurrai un audit completo delle prestazioni di un sito web reale, utilizzando strumenti integrati nel browser e servizi di terze parti per identificare i colli di bottiglia e proporre strategie di ottimizzazione. Il tuo compito è fornire un rapporto dettagliato sulle prestazioni che dimostri la tua comprensione dei principi di prestazioni web e la tua capacità di utilizzare efficacemente strumenti di analisi professionali. ## Istruzioni per l'assegnazione **Scegli un sito web** da analizzare - seleziona una delle seguenti opzioni: - Un sito web popolare che utilizzi frequentemente (sito di notizie, social media, e-commerce) - Un sito di un progetto open-source (pagine GitHub, siti di documentazione) - Un sito web di un'attività locale o un sito portfolio - Un tuo progetto o un lavoro svolto in precedenza **Conduci un'analisi con più strumenti** utilizzando almeno tre approcci diversi: - **DevTools del browser** - Usa la scheda Performance di Chrome/Edge per un profiling dettagliato - **Strumenti di audit online** - Prova Lighthouse, GTmetrix o WebPageTest - **Analisi della rete** - Esamina il caricamento delle risorse, le dimensioni dei file e i modelli di richieste **Documenta i tuoi risultati** in un rapporto completo che includa: ### Analisi delle metriche di prestazione - **Misurazioni dei tempi di caricamento** da più strumenti e prospettive - **Punteggi Core Web Vitals** (LCP, FID, CLS) e le loro implicazioni - **Suddivisione delle risorse** che mostra quali asset contribuiscono maggiormente ai tempi di caricamento - **Analisi del waterfall di rete** per identificare le risorse bloccanti ### Identificazione dei problemi - **Colli di bottiglia specifici delle prestazioni** con dati di supporto - **Analisi delle cause principali** che spiega perché si verificano i problemi - **Valutazione dell'impatto sull'utente** che descrive come i problemi influenzano gli utenti reali - **Classificazione delle priorità** dei problemi in base alla gravità e alla difficoltà di risoluzione ### Raccomandazioni di ottimizzazione - **Miglioramenti specifici e attuabili** con impatto previsto - **Strategie di implementazione** per ogni modifica raccomandata - **Migliori pratiche moderne** che potrebbero essere applicate (lazy loading, compressione, ecc.) - **Strumenti e tecniche** per il monitoraggio continuo delle prestazioni ## Requisiti di ricerca **Non affidarti solo agli strumenti del browser** - amplia la tua analisi utilizzando: **Servizi di audit di terze parti:** - [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - Audit completi - [GTmetrix](https://gtmetrix.com/) - Approfondimenti sulle prestazioni e ottimizzazione - [WebPageTest](https://www.webpagetest.org/) - Condizioni di test reali - [Pingdom](https://tools.pingdom.com/) - Monitoraggio delle prestazioni globali **Strumenti di analisi specializzati:** - [Bundle Analyzer](https://bundlephobia.com/) - Analisi delle dimensioni dei bundle JavaScript - [Strumenti di ottimizzazione delle immagini](https://squoosh.app/) - Opportunità di ottimizzazione degli asset - [Analisi degli header di sicurezza](https://securityheaders.com/) - Impatto delle prestazioni sulla sicurezza ## Formato dei deliverable Crea un rapporto professionale (2-3 pagine) che includa: 1. **Sintesi esecutiva** - Panoramica dei risultati principali e delle raccomandazioni 2. **Metodologia** - Strumenti utilizzati e approccio ai test 3. **Valutazione delle prestazioni attuali** - Metriche e misurazioni di base 4. **Problemi identificati** - Analisi dettagliata dei problemi con dati di supporto 5. **Raccomandazioni** - Strategie di miglioramento prioritarie 6. **Roadmap di implementazione** - Piano di ottimizzazione passo dopo passo **Includi prove visive:** - Screenshot degli strumenti di prestazione e delle metriche - Grafici o diagrammi che mostrano i dati sulle prestazioni - Confronti prima/dopo quando possibile - Diagrammi waterfall di rete e suddivisioni delle risorse ## Rubrica | Criteri | Esemplare (90-100%) | Adeguato (70-89%) | Necessita miglioramenti (50-69%) | | ------- | ------------------- | ----------------- | ------------------------------- | | **Profondità dell'analisi** | Analisi completa utilizzando 4+ strumenti con metriche dettagliate, analisi delle cause principali e valutazione dell'impatto sull'utente | Buona analisi utilizzando 3 strumenti con metriche chiare e identificazione di base dei problemi | Analisi di base utilizzando 2 strumenti con profondità limitata e identificazione minima dei problemi | | **Diversità degli strumenti** | Utilizza strumenti del browser + 3+ servizi di terze parti con analisi comparativa e approfondimenti da ciascuno | Utilizza strumenti del browser + 2 servizi di terze parti con qualche analisi comparativa | Utilizza strumenti del browser + 1 servizio di terze parti con confronto limitato | | **Identificazione dei problemi** | Identifica 5+ problemi specifici di prestazione con analisi dettagliata delle cause principali e impatto quantificato | Identifica 3-4 problemi di prestazione con buona analisi e qualche misurazione dell'impatto | Identifica 1-2 problemi di prestazione con analisi di base | | **Raccomandazioni** | Fornisce raccomandazioni specifiche e attuabili con dettagli di implementazione, impatto previsto e migliori pratiche moderne | Fornisce buone raccomandazioni con qualche guida all'implementazione e risultati attesi | Fornisce raccomandazioni di base con dettagli di implementazione limitati | | **Presentazione professionale** | Rapporto ben organizzato con struttura chiara, prove visive, sintesi esecutiva e formattazione professionale | Buona organizzazione con alcune prove visive e struttura chiara | Organizzazione di base con prove visive minime | ## Obiettivi di apprendimento Completando questa assegnazione, dimostrerai la tua capacità di: - **Applicare** strumenti e metodologie professionali di analisi delle prestazioni - **Identificare** colli di bottiglia delle prestazioni utilizzando analisi basate sui dati - **Analizzare** la relazione tra qualità del codice e esperienza utente - **Raccomandare** strategie di ottimizzazione specifiche e attuabili - **Comunicare** i risultati tecnici in un formato professionale Questa assegnazione rafforza i concetti di prestazione appresi nella lezione, sviluppando al contempo competenze pratiche che utilizzerai durante la tua carriera nello sviluppo web. --- **Disclaimer**: Questo documento è stato tradotto utilizzando il servizio di traduzione AI [Co-op Translator](https://github.com/Azure/co-op-translator). Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.