Rendere veloce un sito una volta è facile. Il difficile è mantenerlo veloce mentre si continuano ad aggiungere funzionalità: ogni nuovo componente, font o libreria rende la pagina un po’ più pesante, e nessuno se ne accorge finché il sito non sembra lento. Per questo abbiamo smesso di trattare la velocità come un audit occasionale e ne abbiamo fatto un test che ogni modifica deve superare.
Da dove siamo partiti
Quando abbiamo misurato seriamente questo sito per la prima volta, il layout saltava durante il caricamento (un Cumulative Layout Shift di circa 0,2) e il contenuto principale impiegava da 4 a 6 secondi a comparire con una connessione mobile rallentata. Il foglio di stile principale pesava 41 KB compresso, soprattutto perché ai visitatori arrivavano anche componenti e codice di validazione pensati per l’area di amministrazione.
Cosa abbiamo cambiato
- Ai visitatori solo il codice per i visitatori. La libreria UI dell’amministrazione e quella di validazione dei moduli non arrivano più al sito pubblico. Un test percorre gli import del sito e fallisce se una delle due rientra di nascosto.
- CSS solo per ciò che è nella pagina. Il foglio di stile principale è passato da 296 KB a 98 KB, e a 16 KB compresso.
- Font che non spostano il layout. I font principali vengono precaricati e la pagina non precarica più codice di cui potrebbe non aver mai bisogno.
Il test che lo mantiene tale
A ogni pull request, la CI compila il sito, lo serve come fa la produzione — HTTP/2, TLS, compressione — ed esegue Lighthouse tre volte su quattro pagine chiave, prendendo la mediana. Il budget: ogni punteggio almeno 95, il contenuto più grande visibile in meno di 2 secondi, spostamento del layout sotto 0,1, blocco del thread principale sotto i 200 ms. Se una modifica sfora il budget, la CI diventa rossa e la modifica non viene unita. In parallelo gira un controllo di accessibilità che al momento non trova violazioni WCAG AA nelle pagine che copre.
Il risultato
In CI le pagine ottengono 100 in tutte e quattro le categorie di Lighthouse, con il contenuto principale visibile in meno di un secondo. Sul sito pubblico la home page ottiene 100 con il contenuto principale in circa 1,2 secondi, e una pagina prodotto ottiene 98.
Siamo onesti anche su ciò che non è ancora perfetto: le pagine in giapponese e nelle altre lingue CJK sono più lente, perché i loro font sono molto più pesanti. Per questo c’è un’attività dedicata.
Perché è importante per Lei
Una pagina lenta perde visitatori prima che leggano una parola, e anche i motori di ricerca se ne accorgono. Se realizza con noi una landing page o un negozio, questo budget è incluso: fa parte del nostro modo di lavorare, non è un extra.