La media nasconde tutto. Dove se ne vanno davvero i millisecondi, che cosa vede chi aspetta, e le quattro cose che spostano il numero — in ordine di resa, non di difficoltà.
di Nadia Maar ·
«Il sito è lento» arriva quasi sempre da una persona sola, che ha guardato una pagina sola, dal telefono, in una zona con poco campo. E quasi sempre ha ragione: solo che la pagina lenta non è quella che state per far ottimizzare.
Una media di 1,8 secondi su duecento pagine può contenere centonovanta pagine da un secondo e dieci da otto — e quelle dieci sono, per come funzionano i cataloghi, le schede prodotto: cioè le uniche pagine su cui qualcuno stava per comprare qualcosa. La media è la statistica che serve a non guardare la distribuzione.
Questo pezzo è come si guarda la distribuzione, che cosa succede davvero nei primi tre secondi di una pagina, e quali quattro interventi spostano il numero. In ordine di resa, che non è l'ordine in cui vengono proposti.
Prima di toccare qualunque cosa servono tre distinzioni, e sono tutte e tre gratis.
Gli strumenti che danno un voto da 0 a 100 caricano la pagina una volta, da un centro dati, con una connessione simulata. Servono a capire perché, non a sapere quanto: il quanto sta nei dati raccolti dai browser di chi visita davvero, che ogni sito con un minimo di traffico ha a disposizione gratis. Quando i due numeri non coincidono ha ragione il secondo, sempre.
Sotto ci sono nomi tecnici e soglie, ma la sostanza è questa: appare qualcosa; appare la cosa per cui sono venuto; posso toccarla e risponde. Tutto il resto sono dettagli per chi ripara.
| Il momento | Che cosa vive il visitatore | Quando comincia a essere un problema |
|---|---|---|
| Appare qualcosa | Lo schermo smette di essere bianco: c'è un'intestazione, uno sfondo, qualcosa che dice che il sito esiste. | Oltre 1,8 secondi la persona comincia a chiedersi se ha sbagliato indirizzo. |
| Appare la cosa giusta | Il titolo, la foto del prodotto, il prezzo: l'elemento più grande dell'area visibile. | Oltre 2,5 secondi si perde una quota di visite che cresce in fretta con ogni secondo in più. |
| Risponde al tocco | Tocco il filtro, apro il menu, aggiungo al carrello: qualcosa succede subito, anche solo un segnale che ha capito. | Oltre 200 millisecondi il tocco sembra non registrato, e la persona tocca due volte. |
| Non si sposta sotto le dita | Il pulsante è dove era mezzo secondo fa: non è arrivata un'immagine a spingerlo giù. | È l'unico dei quattro che non si misura in tempo, e l'unico che fa premere la cosa sbagliata. |
L'ultimo merita una riga in più perché è quello che nessuno segnala e tutti subiscono: lo spostamento del contenuto mentre la pagina finisce di caricare. Non fa perdere secondi, fa premere «rimuovi» invece di «aggiungi». Si risolve dichiarando le dimensioni di ogni immagine e riservando lo spazio a ciò che arriva dopo — costa un attributo e non si vede in nessuna classifica di velocità.
Chiedete a chiunque perché una pagina è lenta e sentirete «le immagini». Guardate una sequenza vera e vedrete un'altra cosa: quasi sempre il problema non è che qualcosa dura tanto, è che comincia tardi. Tocca una riga.
| documento | 0 ms | 420 ms |
| stile principale | 440 ms | 520 ms |
| carattere | 980 ms | 380 ms |
| script dei filtri | 980 ms | 760 ms |
| foto del prodotto | 1420 ms | 1680 ms |
| tracciamenti | 1500 ms | 620 ms |
Il tempo che il server impiega a rispondere più quello che ci mette la risposta ad arrivare. Quattrocentoventi millisecondi qui non sono un problema: è la parte che quasi tutti ottimizzano per prima, e quasi mai è quella che costa. Diventa un problema oltre il mezzo secondo, e in quel caso la causa sta nel server, non nella pagina.
BLOCCANTE. Finché questo file non è arrivato e letto, il browser non disegna niente: è una regola del web, non una scelta di chi ha fatto il sito. È anche il motivo per cui la riga «appare qualcosa» sta a 900 millisecondi e non a 500. Si riduce mandando insieme alla pagina il minimo indispensabile per disegnare la prima schermata e caricando il resto dopo.
Il carattere comincia DOPO lo stile, perché è lo stile a dire che esiste. È la catena in fila indiana di cui parla l'articolo: tre file, ognuno breve, che sommati fanno un secondo e mezzo perché nessuno dei tre poteva partire prima. Si spezza dichiarando il carattere nella pagina stessa e servendolo dal proprio dominio invece che da un servizio esterno.
Parte insieme al carattere e occupa il processore mentre il browser vorrebbe disegnare. Non blocca il primo disegno ma ritarda la risposta al tocco: è la ragione per cui il filtro sembra rotto per il primo secondo. Se serve solo a chi tocca un filtro, può essere caricato quando qualcuno tocca un filtro.
Ecco l'immagine che tutti accusano. Comincia a 1,4 secondi — un secondo e mezzo dopo l'inizio — perché il browser non sapeva che esistesse: era dentro un pezzo di pagina disegnato dallo script. Alleggerirla la fa durare meno; ANNUNCIARLA subito, nella pagina servita dal server, la fa cominciare prima. La seconda cosa vale più della prima.
Analitica, pixel pubblicitari, chat. Non toccano quasi mai le tre soglie se caricati dopo, e le rovinano tutte e tre se caricati prima. È l'intervento più semplice dell'elenco: non si toglie niente, si sposta dopo il caricamento.
La lettura da portarsi via: fra la richiesta della pagina e la comparsa della foto passano tre secondi, ma nessuna delle sei righe dura tre secondi. Sono sei attese brevi in fila, e si accorciano cambiando l'ordine, non comprimendo i file.
«Contenuto principale a 3,1 secondi» non muove nessuna riunione. La stessa cosa disegnata istante per istante, sì. Gli schemi qui sotto non sono schermate: sono riquadri che dicono quanta parte della pagina è arrivata.
La differenza fra le due file non è un sito riscritto: è lo stile ridotto all'essenziale, il carattere servito dal proprio dominio, la foto annunciata nella pagina invece che dallo script, e i tracciamenti spostati dopo il caricamento. Quattro interventi, nessuno dei quali cambia una riga di quello che il visitatore legge.
Cambiare hosting, riscrivere il sito con una tecnologia più moderna, o comprare una rete di distribuzione. Sono tutti interventi legittimi e tutti costosi, e nessuno dei tre tocca la catena in fila indiana della terza sezione — che è dove stanno i secondi. Un sito servito da un data center a venti millisecondi da voi ma con lo stile che blocca il disegno per mezzo secondo resta lento esattamente come prima, con una fattura in più.
Nell'audit prendiamo le vostre pagine ordinate per traffico e per lentezza, guardiamo la sequenza delle tre in cima, e diciamo quali dei quattro interventi vi riguardano e quanto valgono. Non è un rapporto da cinquanta pagine: sono tre sequenze e un elenco di quattro voci in ordine.
Se dai dati dei visitatori veri risulta che siete già dentro le soglie, ve lo dico e ci salutiamo — succede più spesso di quanto sembri, perché la persona che ha detto «il sito è lento» aveva davvero poco campo.
Non guardando la media del sito, che nasconde tutto: si ordinano le pagine per traffico moltiplicato per lentezza e si guardano le prime tre. In cima non c'è quasi mai la home — è la pagina più curata perché è l'unica che guardano i capi — mentre ci sono quasi sempre le schede prodotto, cioè le uniche pagine su cui qualcuno stava per comprare. E si legge il settantacinquesimo percentile dei visitatori veri, non la media di uno strumento.
Perché il problema quasi mai è che qualcosa dura tanto: è che comincia tardi. In una sequenza tipica il foglio di stile blocca il disegno, il carattere non può partire prima dello stile che lo dichiara, e l'immagine principale parte a un secondo e mezzo perché era dentro un pezzo di pagina disegnato da uno script. Sono attese brevi in fila indiana, e si accorciano cambiando l'ordine, non comprimendo i file.
Tre momenti, non un voto: qualcosa deve apparire entro circa 1,8 secondi, l'elemento principale — titolo, foto, prezzo — entro 2,5 secondi, e il primo tocco deve ottenere una risposta entro circa 200 millisecondi. Ce n'è un quarto che non si misura in tempo: il contenuto non deve spostarsi mentre finisce di caricare, perché non fa perdere secondi, fa premere il pulsante sbagliato.
In ordine di resa: spostare dopo il caricamento tutto ciò che non serve a disegnare (analitica, chat, pixel, mappe), annunciare presto l'immagine principale nella pagina servita dal server, mandare col documento il minimo necessario a disegnare la prima schermata, e riservare lo spazio a ciò che arriva dopo. Quello che NON conviene fare per primo è cambiare hosting o riscrivere il sito: sono interventi costosi che non toccano la catena di attese in cui stanno i secondi.