Caso studio · performance

Il sito più veloce che ti posso mostrare è quello che stai leggendo.

Chiunque può dire "faccio siti veloci". Io ti do i numeri di questo, e i comandi per verificarli senza fidarti di me.

Prima e dopo, su questa pagina.

Non un esempio: i difetti a sinistra erano davvero qui dentro, e il 100 a destra è il punteggio di adesso.

Stato del sito di esempio
Si accende da solo. Toccalo e passa in manuale.
salvatorepalella.it
Contattaci
4difetti veri trovati su questa pagina:
352 KB per una faccia, 66 ms di blocco, un’icona che dava 404, un’animazione che non si fermava mai
salvatorepalella.it
Chiedi la bozza →
100punteggio Google, mobile e desktop
rifai tu la misura su pagespeed.web.dev

Il problema: 360 KB per una faccia

L'immagine del profilo pesava 352 KB. Era un PNG da 512×512 mostrato a 140 pixel, ma il vero problema non erano le dimensioni: era il canale alfa. Il ritratto ha centinaia di particelle trasparenti intorno, e la trasparenza in un PNG si paga cara.

Il punto interessante è che quella trasparenza non serviva a niente: l'immagine è sempre mostrata dentro un cerchio, sopra uno sfondo pieno. Abbassare la qualità non spostava nulla — 41 KB a qualità 80, 36 KB a qualità 60. Appiattendola sul colore di sfondo: 10,6 KB, visivamente identica.

Cosa è cambiato, in numeri

Immagine profilo (usata 3 volte)352 KB → 10,6 KB
Immagine di anteprima social678 KB → 58 KB
Icone del sito115 KB → 28 KB
Blocco del rendering da JavaScript66 ms → 0
Icona Apple richiamata ma inesistente404 → risolto

Le tre cose che nessuno guarda mai

Un ciclo di animazione che non si fermava mai. Un effetto luminoso seguiva il mouse riscrivendo lo sfondo a ogni fotogramma — per sempre. Anche a mouse fermo, anche con la sezione fuori schermo, anche da telefono dove il mouse non esiste. Ora parte solo quando serve e si spegne da solo.

Una lettura che bloccava il rendering. La barra di navigazione leggeva la posizione dello scroll subito dopo aver modificato lo stile: il browser era costretto a ricalcolare tutto il layout a ogni singolo evento. Sessantasei millisecondi buttati.

Un file che non esisteva. L'icona per iPhone era richiamata nel codice ma non era mai stata caricata: ogni iPhone che salvava il sito otteneva un errore 404. Era lì da mesi e non se n'era accorto nessuno.

Verificalo tu

Non devi credermi sulla parola. Metti questo indirizzo su PageSpeed Insights e guarda il punteggio. Oppure, se te la cavi col terminale, misura il tempo di risposta con curl: il server risponde in circa 30 millisecondi al netto della connessione.

Questa è la differenza fra dire che si fanno siti veloci e mostrarlo. Ed è la stessa cura che finisce nel tuo, di sito.

Rischio zero

Vedi il lavoro prima di pagarlo.

Prima del preventivo realizzo una bozza grafica gratuita del tuo sito, senza impegno: vedi il lavoro prima di decidere se pagarlo. Quasi tutti fanno il contrario: prima il preventivo al buio, poi si vede. Io preferisco farti vedere dove andiamo a parare.

  1. Mi racconti l'obiettivo. Due righe bastano: cosa deve fare chi arriva sul sito.
  2. Ti mando una bozza grafica gratuita. Il tuo sito, con i tuoi contenuti, non un template generico.
  3. Insieme alla bozza, il preventivo. Prezzo e tempi chiari, a quel punto sai già cosa compri.
  4. Decidi tu. Se non ti convince, ci siamo lasciati bene e la bozza resta tua.