You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
7.3 KiB
107 lines
7.3 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
|
"translation_date": "2025-10-22T23:41:30+00:00",
|
|
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
|
"language_code": "it"
|
|
}
|
|
-->
|
|
# 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. |