Sul mio computer la pagina compariva prima che finissi di cliccare. Meno di un secondo, ogni volta. Così, quando è arrivato l'audit di lauragalliarchitetto.com, proprio il giorno in cui il sito è andato online, la riga sui telefoni l'ho letta due volte. Più di tre secondi prima di vedere qualcosa.
Tre secondi sono tanti. Abbastanza perché qualcuno pensi che il link non funzioni, rimetta il telefono in tasca e si dimentichi di te. E quel sito è fatto con WebMastro, come questo e come beebeep.net. Se era lento lui, lo erano tutti e tre. Il problema non era di quel sito. Era mio.
I soliti sospetti
Ho cominciato da dove cominciano tutti: dal server. Un hosting condiviso, il colpevole perfetto. Era innocente: rispondeva in un decimo di secondo, al massimo un quarto.
Poi JavaScript, l'imputato di sempre quando una pagina è lenta. Ho reso il processore quattro volte più lento e la pagina non se n'è nemmeno accorta. Innocente anche lui.
Le foto? Partivano già in copie leggere, tagliate sulla misura dello schermo. Niente nemmeno lì.
Allora ho fatto quello che avrei dovuto fare subito: ho smesso di guardare la pagina dalla scrivania e l'ho guardata come la vede un telefono. PageSpeed Insights, lo strumento di Google, fa proprio questo: un normale Moto G, una connessione 4G lenta, e due momenti cronometrati. Quando inizi a vedere qualcosa, e quando finalmente compare la cosa più grande dello schermo, una foto, un paragrafo. E lì, fotogramma dopo fotogramma, la pagina semplicemente aspettava.
La strada veloce che non lo era
Una pagina non si può disegnare finché non arrivano i suoi fogli di stile, e il più lento era sempre lo stesso: quello di Bootstrap.
Arrivava da jsDelivr, una CDN pubblica, esattamente come consigliano tutti. Una rete veloce, vicina a te, fatta apposta. Ed è veloce, davvero. Ma è un altro server, e prima di chiedergli anche un solo byte il telefono deve trovarlo, bussare alla sua porta e mettersi d'accordo su una lingua segreta per la cifratura. Tre viaggi di andata e ritorno. Dalla mia scrivania un viaggio costa pochi millesimi di secondo e non te ne accorgi. Su un telefono con due tacche di segnale può costarne centinaia.
L'altra promessa della CDN era scaduta da anni senza far rumore: dal 2020 ogni browser tiene una cache separata per ogni sito, quindi nessuno è mai arrivato con Bootstrap già in tasca.
La soluzione era quasi imbarazzante da quanto era semplice. Ora Bootstrap lo serve il sito stesso, sulla connessione che ha già aperto per la pagina. Gli stessi identici file, byte per byte, e un test che lo controlla con le impronte che pubblica il team di Bootstrap.
Un alfabeto intero per tre lettere
La seconda scoperta mi ha fatto sorridere. Le icone di quelle pagine, il logo di WhatsApp, una freccia, una busta, venivano da un font. E un font è un alfabeto intero: 131 KB di disegni, più il suo foglio di stile, dallo stesso server lontano. Per mostrarne tre.
Ora ogni icona è disegnata direttamente nella pagina, poche centinaia di byte di SVG, senza nessuna richiesta. Prende il colore e la misura delle parole che ha intorno, come faceva il font. E se un giorno ne scrivo male il nome, il framework me lo dice subito, mentre il font mostrava un quadratino vuoto e taceva.
Il giorno in cui questa modifica è andata online, beebeep.net ha smesso di chiedere qualcosa a qualunque altro server. Ogni byte adesso arriva da casa.
L'ospite che nessuno aveva ancora invitato
Nella home di questo sito c'è un video. Fino a ieri il player di YouTube arrivava insieme alla pagina, senza essere invitato: mezzo megabyte di JavaScript e una telefonata a Google, per chiunque passasse, anche se quasi nessuno preme play. E teneva occupato il processore proprio mentre la pagina cercava di comparire.
Ora la pagina mostra un'immagine del video con il pulsante play. Il player arriva solo quando lo chiami. La pagina è più leggera, e anche più educata: finché non decidi di guardarlo, il tuo browser con Google non parla affatto.
La pagina che non stava ferma
A quel punto le pagine erano veloci. Ma PageSpeed aveva ancora una cosa da dire, e non riguardava la velocità: la pagina si muoveva. Google lo chiama CLS, e qui valeva 0,24, più del doppio di quello che si considera accettabile.
Ho rallentato tutto e l'ho visto succedere. Il testo compariva, poi i font arrivavano un attimo in ritardo e tutto veniva ridisegnato con misure appena diverse. Il banner dei cookie si accorciava di 21 pixel, i paragrafi scivolavano un po' più su. Un piccolo terremoto, proprio mentre inizi a leggere.
La cura è stata chiedere i font insieme ai fogli di stile, così ci sono già al primo disegno. Poi ho trovato una seconda scossa, invisibile: i pulsanti rotondi nell'angolo, ancora nascosti, saltavano in su quando compariva il banner dei cookie, e il browser contava anche quella. Ora si spostano in un modo che lascia la pagina ferma.
Un secondo
Ho misurato di nuovo, con lo stesso telefono e la stessa connessione lenta.
Questo sito, che mostrava le prime parole dopo 3,6 secondi, adesso le mostra dopo 1,1, e il suo elemento più grande dopo 1,4 invece di 3,8: PageSpeed gli dà 100. beebeep.net è passato da 3,3 a 2,1 secondi. E lauragalliarchitetto.com, dove la storia era cominciata, da 3,1 a 1,9, con un punteggio salito da 90 a 99.
Quello che mi resta non sono i numeri. È che sul mio computer tutto sembrava perfetto, e avrei potuto fermarmi lì. La lentezza non stava nel file più pesante, ma nei viaggi in più: un secondo server, un font trovato troppo tardi, un ospite caricato per nessuno. Nessuno di questi era un errore quando l'ho scritto. Ognuno era un'abitudine, un buon consiglio invecchiato senza avvisare nessuno.
Adesso, quando apri uno di questi siti dal telefono, la pagina è lì prima che tu abbia il tempo di chiederti se arriverà. Era tutto quello che volevo.