Nel mondo dello sviluppo moderno, la velocità non è un lusso: è un requisito funzionale.
Durante l’ultimo Coffee Tech — il nostro appuntamento periodico di condivisione tecnica tra i team dev dell’azienda — abbiamo approfondito con Dario Aversente il tema delle performance web.
Non si è trattato di una lezione accademica, ma di un confronto tra chi “ci mette le mani” ogni giorno, analizzando perché un sito veloce sia il miglior alleato del marketing e come trasformare un’applicazione lenta in un’esperienza fulminea.
Perché le performance contano? (Spoiler: si parla di fatturato)
Spesso le performance vengono viste come un compito da “manutenzione” o un refactoring da posticipare. I dati reali, però, raccontano un’altra storia:
-Abbandono: Il 53% degli utenti mobile chiude una pagina se il caricamento supera i 3 secondi.
-Conversioni: Ogni secondo di ritardo può costare fino al 7% delle conversioni (vendite, lead, download).
-SEO: Con l’introduzione dei Core Web Vitals, Google ha reso la velocità un fattore di ranking ufficiale. Se sei lento, sparisci dai risultati di ricerca.
In breve: Sito lento = Meno utenti = Meno fatturato.
I Tre Pilastri: Comprendere i Core Web Vitals
Per migliorare, dobbiamo smettere di guardare solo il “tempo di caricamento totale” e concentrarci su come l’utente percepisce la velocità. Ecco le tre metriche introdotte da Google:
Metrica | Cosa misura? | Target (Buono) |
LCP (Largest Contentful Paint) | Velocità di caricamento percepita (l’elemento più grande nel viewport). | $< 2.5s$ |
INP (Interaction to Next Paint) | Reattività del sito ai click e ai tap dell’utente. | $< 200ms$ |
CLS (Cumulative Layout Shift) | Stabilità visiva (evitare che gli elementi si spostino mentre caricano). | $< 0.1$ |
Dal Lab al Field: Come misuriamo i risultati
Esistono due modi per analizzare queste metriche:
1-Lab Data: Test effettuati in ambienti controllati (es. Lighthouse o Chrome DevTools). Ideali per il debug durante lo sviluppo.
2-Field Data: Dati reali raccolti dagli utenti che navigano il sito (Chrome User Experience Report). Strumenti come Sentry, Datadog o New Relic ci permettono di monitorare cosa succede davvero “nel mondo reale”.
Strategie di Ottimizzazione: Il Manuale d’Uso
Durante il Coffee Tech, abbiamo analizzato un caso pratico passando da un punteggio Lighthouse di 39 a uno di 98. Come? Seguendo queste best practice:
Front-end: Immagini e Asset
Le immagini sono spesso il “colpevole” numero uno.
-Formati moderni: Usare WebP o AVIF riduce il peso del 30-50% rispetto ai classici JPEG.
-Lazy Loading: Caricare le immagini solo quando entrano nel viewport con loading=”lazy”.
-Dimensioni esplicite: Impostare sempre width e height per eliminare il CLS.
JavaScript & Angular
Il codice JS è responsabile della reattività (INP).
-Lazy Loading dei componenti: In Angular, la nuova direttiva @defer è un game-changer per caricare il codice solo quando serve.
-Tree Shaking: Eliminare le librerie inutilizzate e importare solo le funzioni necessarie.
-Change Detection: Usare la strategia OnPush per ridurre il carico di lavoro del browser.
Infrastruttura e Back-end
Il front-end non può fare miracoli se il server è lento (TTFB – Time to First Byte).
– CDN (Content Delivery Network): Avvicinare i contenuti all’utente finale (Cloudflare, CloudFront).
-Compressione: Passare a Brotli, lo standard attuale più efficiente di Gzip.
– Caching: Sfruttare strategie come stale-while-revalidate per servire contenuti istantanei mentre si aggiornano in background.
Un Processo, non un Ticket
La lezione più importante del nostro Coffee Tech è che l’ottimizzazione non è un’attività da fare una volta e dimenticare. È un ciclo continuo: Misura → Analizza → Ottimizza → Verifica → Monitora.
In un team distribuito come il nostro, condividere queste “cicatrici di guerra” e queste scoperte è ciò che ci permette di consegnare prodotti che non sono solo belli da vedere, ma incredibilmente efficienti da usare.
Vuoi saperne di più o partecipare al prossimo Coffee Tech?
Siamo sempre alla ricerca di talenti curiosi e appassionati di performance. Dai un’occhiata alle nostre posizioni aperte o scrivici per scambiare due chiacchiere (davanti a un caffè, ovviamente).
