7.3 KiB
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 - Audit completi
- GTmetrix - Approfondimenti sulle prestazioni e ottimizzazione
- WebPageTest - Condizioni di test reali
- Pingdom - Monitoraggio delle prestazioni globali
Strumenti di analisi specializzati:
- Bundle Analyzer - Analisi delle dimensioni dei bundle JavaScript
- Strumenti di ottimizzazione delle immagini - Opportunità di ottimizzazione degli asset
- Analisi degli header di sicurezza - Impatto delle prestazioni sulla sicurezza
Formato dei deliverable
Crea un rapporto professionale (2-3 pagine) che includa:
- Sintesi esecutiva - Panoramica dei risultati principali e delle raccomandazioni
- Metodologia - Strumenti utilizzati e approccio ai test
- Valutazione delle prestazioni attuali - Metriche e misurazioni di base
- Problemi identificati - Analisi dettagliata dei problemi con dati di supporto
- Raccomandazioni - Strategie di miglioramento prioritarie
- 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. 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.