Waterfall – cos’è e da dove nasce la connessione a Pagespeed

Quando stai analizzando le performance del tuo sito internet, spesso ti imbatti in un oggetto misterioso quanto fondamentale.

Questo è la Waterfall. In questo articolo scopriamo che cosa è il concetto di Waterfall, come lo si applica nel mondo del project Management e come assume una valenza fondamentale su Pagespeed e tutti gli strumenti che sono utili a misurare le performance di velocità del sito web.

Argomenti

• Cos’è il modello Waterfall (a cascata)?
• Chi utilizza il modello Waterfall?
• Fasi del modello Waterfall
• Il Grafico Waterfall
• Cosa c’entra la Waterfall con la velocità del sito web?
• Come si legge la Waterfall di GtMetrix?
• Software e strumenti per il modello Waterfall
• Alternative alla Waterfall

Cos’è il modello Waterfall (a cascata)?

Il modello Waterfall ovvero a cascata è un approccio lineare e sequenziale al ciclo di vita dello sviluppo software (SDLC), diffuso nell’ingegneria del software e nello sviluppo del prodotto.

Il modello Waterfall utilizza una progressione logica dei passaggi SDLC per un progetto, simile alla direzione in cui l’acqua scorre oltre il bordo di una scogliera. Stabilisce endpoint o obiettivi distinti per ciascuna fase di sviluppo. Tali endpoint o obiettivi non possono essere rivisitati dopo il loro completamento.

Il dottor Winston W. Royce del Lockheed Software Technology Center ha introdotto il concetto in un articolo pubblicato nel 1970 sulla sua esperienza nello sviluppo di software per satelliti. Tuttavia, Royce non ha usato il termine cascata; ha fatto invece riferimento al valore a valle della documentazione.

Il modello Waterfall continua ad essere utilizzato nelle applicazioni di progettazione industriale. Viene spesso citata come la prima metodologia di sviluppo software. Il modello viene utilizzato anche più in generale come metodologia di gestione dei progetti di alto livello per progetti complicati e sfaccettati.

Chi utilizza il modello Waterfall?

I team di progetto e i project manager utilizzano il modello a cascata per raggiungere obiettivi in base alle esigenze della propria azienda. Il modello viene utilizzato in molti contesti diversi di gestione dei progetti, come nell’edilizia, nella produzione, nell’IT e nello sviluppo di software.

Nel metodo Waterfall, ogni passaggio dipende dall’output del passaggio precedente. C’è una progressione lineare nel modo in cui questi progetti si svolgono.

Ad esempio, nel campi edile, di solito vengono seguiti questi tre passaggi generali:

• Il progetto fisico di un edificio viene creato prima dell’inizio di qualsiasi costruzione.
• Le fondamenta vengono gettate prima che venga eretto lo scheletro di un edificio.
• Lo scheletro dell’edificio viene completato prima della costruzione delle mura.

Su una linea di produzione, i passaggi vengono seguiti in sequenza in un ordine controllato durante la costruzione di un prodotto fino alla creazione del prodotto finale.

Il modello Waterfall non include l’utente finale o il cliente di un progetto tanto quanto altre metodologie di sviluppo. Gli utenti vengono consultati durante le fasi iniziali di raccolta e definizione dei requisiti, incorporando successivamente il feedback dei clienti. Lasciando il cliente fuori dalla parte principale del processo a cascata, il team di sviluppo si muove rapidamente attraverso le fasi del progetto.

 

Fasi del modello Waterfall

Se utilizzato per un processo di sviluppodi un sito web, la metodologia Waterfall prevede sette fasi:

• Requisiti. I potenziali requisiti, le scadenze e le linee guida per il progetto vengono analizzati e inseriti in un documento di requisiti formali, chiamato anche specifica funzionale. Questa fase di sviluppo definisce e pianifica il progetto senza menzionare processi specifici.
• Analisi. Le specifiche del sistema vengono analizzate per generare modelli di prodotto e logica di business per guidare la produzione. Questo è anche il momento in cui viene verificata la fattibilità delle risorse finanziarie e tecniche.
• Progetto. Viene creato un documento delle specifiche di progettazione per delineare i requisiti di progettazione tecnica, come il linguaggio di programmazione, l’hardware, le origini dati, l’architettura e i servizi.
• Codifica e implementazione. Il codice sorgente viene sviluppato utilizzando i modelli, la logica e le specifiche dei requisiti designati nelle fasi precedenti. In genere, il sistema viene codificato in componenti più piccoli, o unità, prima di essere assemblato.
• Test. Questo è il momento in cui il controllo qualità, i test unitari, di sistema e i beta identificano i problemi che devono essere risolti. Ciò potrebbe causare una ripetizione forzata della fase di codifica per il debug. Se il sistema supera l’integrazione e il test, la cascata continua.
• Funzionamento e distribuzione. Il prodotto o l’applicazione è ritenuto pienamente funzionante e viene distribuito in un ambiente live.
• Manutenzione. La manutenzione del sito web correttiva, adattativa e perfettiva viene effettuata a tempo indeterminato per migliorare, aggiornare e potenziare il prodotto e le sue funzionalità. Ciò potrebbe includere il rilascio di aggiornamenti di patch e nuove versioni.

Il concetto di Waterfall è applicato a molti aspetti e per questo nasce anche il concetto di analisi attraverso un grafico a cascata o waterfall.

Il Grafico della Waterfall

Un grafico a cascata (Waterfall) è la forma di visualizzazione dei dati che aiuta a comprendere l’effetto cumulativo dei valori positivi o negativi che sono introdotti in sequenza.

Questi valori intermedi possono essere basati sul tempo o sulla categoria. Il grafico Waterfall è noto anche come grafico a mattoni volanti o Mario Chart a causa dell’apparente sospensione delle colonne (mattoni) a mezz’aria, che richiamano il famoso video gioco Super Mario. Spesso in finanza viene chiamato Bridge.

I grafici a cascata sono stati resi popolari dalla società di consulenza strategica McKinsey & Company nelle sue presentazioni ai clienti.

In sostanza, forniscono un modo ben strutturato e lucido di rappresentare le transizioni graduali, sottolineando l’intricato processo attraverso il quale diversi fattori contribuiscono a una conseguenza finale, insieme al loro impatto netto.

È possibile aggiungere complessità ai grafici a cascata con più colonne e valori totali che attraversano l’asse. Incrementi e decrementi sufficientemente estremi possono far sì che il totale cumulativo scenda sopra e sotto l’asse in vari punti.

I totali parziali intermedi, rappresentati con colonne intere, possono essere aggiunti al grafico tra colonne mobili.

 

Cosa c’entra la Waterfall con la velocità del sito web

Alcuni tra i più famosi strumenti che servono per analizzare e  misurare la velocità delle pagine web, utilizzano il metodo Grafico Waterfall per descrivere e analizzare i processi singoli che danno vita a una performance di pagina.

Tra i più famosi Web Page Test e Gtmetrix:

 

Come si legge la Waterfall di GtMetrix?

Il grafico a cascata GTmetrix mostra il comportamento di caricamento richiesta per richiesta della tua pagina web ed è una delle funzionalità più utili per la risoluzione dei problemi e il debug dei problemi di prestazioni di un sito web.

Nozioni di base sui grafici a cascata

Per impostazione predefinita, il grafico a cascata GTmetrix mostra tutte le risorse della tua pagina nell’ordine in cui sono state caricate.

Per ogni risorsa di pagina caricata dal browser, puoi vedere a colpo d’occhio quanto segue:

URL

Questa colonna visualizza l’URL della risorsa della pagina.
Fondamentalmente ti dice quale risorsa è stata caricata.

Stato

Questa colonna visualizza il codice di stato restituito dal server per quella richiesta.
Ti dice se la richiesta è andata a buon fine o meno, o se è stata reindirizzata, o se è stata cancellata/bloccata.

Dominio

Questa colonna elenca il dominio per quella particolare richiesta (passa con il mouse sopra la colonna del dominio della richiesta per vedere l’indirizzo IP del server per quella particolare richiesta).
Puoi utilizzare questa colonna per vedere da dove è stata caricata la risorsa (ad esempio, ospitata autonomamente sul tuo server o tramite server di terze parti).

Peso

Questa colonna visualizza la dimensione in byte per quella particolare richiesta.
Passa il mouse sopra la dimensione richiesta per vedere sia le dimensioni compresse che quelle non compresse.

Sequenza temporale

Visualizza il tempo di caricamento (in ms o s) e la barra temporale per ciascuna richiesta.
Passando il mouse sopra la barra dei tempi puoi vedere quando è iniziato il caricamento della risorsa e i singoli componenti che compongono il tempo di caricamento totale.

Le barre temporali per le richieste sono ridimensionate, il che può influire sulla percezione dei tempi delle richieste.
Le colonne precedenti vengono visualizzate di default, se lo desideri, è possibile visualizzare colonne aggiuntive.

Ordinamento

Il grafico a cascata ha varie intestazioni di colonna (ad esempio URL, dominio, dimensione, ecc.) che possono essere ordinate in ordine crescente o decrescente.

Fai clic sull’intestazione di una colonna per ordinare le risorse della pagina in ordine crescente e fai nuovamente clic sull’intestazione della colonna per ordinare le risorse in ordine decrescente.

 

Ciò è utile per trovare le risorse più grandi/più piccole, ordinare le richieste/domini in ordine alfabetico, ordinare le risorse per tipo, ecc.

Ricerca

Esistono diversi modi per filtrare risorse di pagina specifiche nel grafico a cascata, ad esempio:

Puoi ricercare le richieste digitando le parole chiave nella barra dei filtri nell’angolo in alto a sinistra del grafico Waterfall.

Trova rapidamente una richiesta specifica con i filtri per parole chiave.

Ciò è utile per trovare richieste con nome univoco o richieste da una terza parte specifica (ad esempio Google).

Ricerca per tipologia

Puoi utilizzare i filtri di ricerca rapidi che sono forniti per filtrare le richieste per tipologia (CSS, JS, font, immagini, ecc.)

Puoi filtrare le richieste per HTML, CSS, JS, XHR, caratteri, immagini o altro.

I filtri utilizzano un operatore “OR”, quindi facendo clic su più filtri verranno visualizzate tutte le richieste di quei tipi specifici.
Fai riferimento a questa documentazione per vedere i tipi di proprietà che puoi filtrare.

Hovering

Puoi ottenere maggiori informazioni sulle richieste delle tue pagine passando il mouse su diverse parti del grafico a cascata, come ad esempio:

URL

Passando il mouse sopra l’URL della richiesta viene visualizzato il percorso completo del file.

Passando il mouse sopra il nome del file verrà visualizzato il percorso completo del file. CTRL + clic per caricarlo in un’altra scheda.

Ciò è utile per scoprire se una risorsa viene caricata dalla directory giusta o se viene caricata da un plugin/tema. Puoi anche CTRL + fare clic sulla richiesta per caricarla in un’altra scheda.

Status

Passando il mouse sopra lo stato puoi visualizzare ulteriori informazioni relative al codice di stato restituito per quella richiesta, se disponibile.

Passando il mouse sopra la colonna dello stato è possibile visualizzare ulteriori informazioni relative alle richieste non riuscite/annullate/bloccate.

Ciò è particolarmente utile per le richieste bloccate/annullate/non riuscite e per le richieste che restituiscono codici di stato di errore.

Passa il mouse sopra il codice di stato per scoprire il motivo per cui è stato restituito un codice di stato di errore.

Dominio

Quando passi il mouse sopra la voce della colonna del dominio, puoi vedere l’indirizzo IP del server per quella particolare richiesta.

Passando il mouse sopra la voce della colonna del dominio viene visualizzato l’indirizzo IP del server di quella particolare risorsa.

Puoi utilizzarlo per verificare se viene utilizzato l’IP corretto (ad esempio, se stai migrando i server o se il nome host si risolve in più IP).

Nota: puoi anche aggiungere la colonna IP del server al grafico a cascata e passare il mouse sopra l’indirizzo IP per lo stesso scopo. Maggiori informazioni su questo argomento di seguito.

Dimensione

Puoi passare il mouse sopra la colonna delle dimensioni per vedere sia la dimensione compressa che quella non compressa di una particolare risorsa.

Passando il mouse sopra la voce della colonna delle dimensioni vengono visualizzate le dimensioni compresse e non compresse per quella particolare risorsa.

La dimensione non compressa si riferisce alla dimensione della risorsa quando il browser la elabora sul lato client.
Se una risorsa non viene compressa prima di essere trasferita sulla rete, le dimensioni compressa e non compressa sarebbero più o meno le stesse.

Tuttavia, se il tuo server comprime una risorsa prima di trasferirla sulla rete, la dimensione compressa (o dimensione di trasferimento) sarà la minore delle due.

Ricorda che maggiore è la dimensione non compressa di una risorsa (HTML, CSS, JS, ecc.), maggiore è il lavoro che un browser deve svolgere per elaborarla. Ne parliamo nel nostro articolo sugli errori di GTmetrix Lighthouse.

Nota: puoi anche aggiungere la colonna Dimensioni non compresse al grafico a cascata per lo stesso scopo. Maggiori informazioni su questo argomento di seguito.

Time Line

Passando il mouse sopra la barra della sequenza temporale vengono visualizzati i singoli componenti che compongono il tempo di caricamento di una particolare risorsa.

Passa il mouse sopra la barra dei tempi per rivelare i singoli componenti che compongono il tempo di caricamento di una risorsa della pagina.

Tieni presente che questi tempi sono relativi all’ora di inizio della richiesta, che viene rivelata anche quando passi il mouse sopra la barra dei tempi.

Dettagli dell’intestazione della richiesta/risposta
Fai clic sull’URL della richiesta nel grafico a cascata per espandere le intestazioni della richiesta e della risposta.

Le intestazioni della richiesta contengono dettagli su ciò che il browser ha richiesto al server per una particolare risorsa.

In genere contengono informazioni come il percorso del file, il tipo di compressione accettato (ad esempio gzip, brotli, ecc.), quali lingue sono accettate, chi ha avviato la richiesta, l’agente utente del browser richiedente, ecc.

Fare clic sull’URL della richiesta per espandere le intestazioni della richiesta e della risposta.

Le intestazioni di risposta, invece, ti dicono di più sulla risorsa che è stata rimandata dal server al browser, rispetto alla sua configurazione, impostazioni e attributi.
In genere contengono informazioni quali data di scadenza della cache, quale server viene utilizzato, quale compressione è abilitata, tipo di risorsa (ad esempio CSS, JS, immagine, ecc.), quando la risorsa è stata modificata l’ultima volta, ecc.

Tieni presente che le intestazioni della richiesta e della risposta si trovano nella scheda Intestazioni, quando fai clic sull’URL di una richiesta. Alcune richieste hanno schede aggiuntive, a seconda del tipo di richiesta.

 

Software e strumenti per il modello Waterfall

I diagrammi di Gantt sono uno strumento di gestione comune per i progetti Waterfall. Questi grafici consentono una facile visualizzazione delle fasi sequenziali, consentendo ai project manager di mappare le dipendenze e le attività secondarie in ciascuna fase del processo. Forniscono una visione chiara delle tempistiche e delle scadenze per ciascuna fase.

Un diagramma di Gantt è un grafico a barre laterali in cui la lunghezza di ciascuna barra rappresenta il tempo necessario per completare un’attività.
Alcuni prodotti software di gestione dei progetti che dispongono di diagrammi di Gantt includono quanto segue:

• Asana,
• Jira,
• Microsoft Excel,
• progetto Microsoft,
• Microsoft SharePoint,
• Responsabile del progetto,
• Smartsheet e
• Wrike.

I software di gestione dei progetti spesso includono altri strumenti per aiutare i team a waterfall a completare le proprie attività. Alcune funzionalità importanti da avere nel software di gestione dei progetti sono le seguenti:

• collaborazione di squadra,
• prendere appunti,
• test e sviluppo e
• analisi e visualizzazione dei dati.

Alternative alla Waterfall

Oltre ai metodi di sviluppo software Agile, le alternative al processo a cascata includono quanto segue:

• JAD o Joint Application Developement,
  Joint Application Development (JAD) è un modo collaborativo di pianificare e sviluppare software, che coinvolge direttamente gli utenti finali e i tecnici che costruiranno l’applicazione. In poche parole, si tratta di lavorare insieme per creare un’applicazione che realmente soddisfi le esigenze degli utenti.
• Rapid Application Development,
  Rapid Application Development, o RAD, è un approccio allo sviluppo software che punta a velocizzare il processo di creazione da idea a prodotto. Ennesimo acronimo da ricordare? Non temere, ecco i punti chiave in modo semplice:Immaginalo così: Invece di costruire un’intera casa in una volta, con RAD la realizzi pezzo per pezzo, testandola ad ogni fase.
• Sync and stabilize
  Immagina di costruire un puzzle. Il Sync and Stabilize è un modo di farlo dove:Collabori costantemente: Controlli ogni pezzo con gli altri (Sync), assicurandovi di montare parti compatibili.
  Verifichi spesso: Ogni tanto guardi l’immagine intera (Stabilize), controllando che il puzzle stia prendendo forma e non ci siano errori.
  In poche parole, è un metodo di sviluppo software veloce e collaborativo che si concentra su:Coordinarsi continuamente: Team e sviluppatori lavorano insieme, evitando malintesi e lavorando meglio.
  Sistemare subito i problemi: Test frequenti per trovare e risolvere i bug all’inizio, evitando problemi maggiori in seguito.
• Modello a spirale.

Se vuoi saperne di più su come velocizzare il tuo sito web leggi la nostra Guida per velocizzare un sito. Se invece hai bisogno di esperti per velocizzare il tuo sito web. Visita la nostr pagina di servizi di velocizzazione del sito web

.