Com'è fatto questo sito: veloce, leggero, senza fronzoli

Un sito personale di uno sviluppatore dovrebbe anche dimostrare come lavora. Ho preso questo come vincolo fin dall’inizio: niente promesse generiche sulla velocità, numeri veri da poter controllare.

I numeri di oggi

• HTML e CSS della home: circa 9 KB in tutto, compressi. Meno del peso di una singola fotografia in miniatura.
• JavaScript: meno di 1,5 KB in tutta la home, per il cambio di tema e due piccole animazioni. Zero richieste di rete in più: è tutto incluso nella pagina stessa, non scaricato da un servizio esterno.
• Font: circa 55 KB in totale, ospitati sul sito, ridotti ai soli caratteri e pesi che uso davvero. Caricati una volta sola e tenuti in cache dal browser per tutte le pagine.
• Nessun cookie, mai installato: niente analytics, niente tracciamento. Il tema chiaro o scuro che scegli resta solo nel tuo browser.

Le scelte che portano a questi numeri

Pagine generate in anticipo, non costruite al volo. Il sito usa Astro: ogni pagina viene generata una volta durante la pubblicazione e servita già pronta, invece di essere ricostruita ogni volta che qualcuno la visita. Risultato: niente database da interrogare, niente attesa, e un sito che continua a funzionare anche sotto un picco di visite improvviso.

JavaScript solo dove aggiunge qualcosa. Il cambio di tema chiaro/scuro, due piccole animazioni nella home, il modulo di contatto. Il resto, compresi i filtri della pagina Progetti e il menu sul telefono, è HTML e CSS puri, e funziona anche con JavaScript disattivato. Non è un vincolo ideologico: è che la maggior parte di quello che un sito deve fare, il browser lo sa già fare da solo, senza bisogno di codice aggiuntivo.

Due lingue, controllate dal computer invece che a occhio. Il sito è in italiano e in inglese, con indirizzi tradotti per ogni pagina. I testi dell’interfaccia stanno in un unico file tipizzato: se dimentico di tradurre qualcosa, la build si ferma con un errore invece di pubblicare una pagina a metà.

Tema chiaro e scuro senza il lampo iniziale. La scelta del tema si applica prima che la pagina venga disegnata sullo schermo, leggendo la preferenza salvata nel browser. È un dettaglio da un paio di decine di righe di codice, ma è la differenza tra un sito che sembra curato e uno che non lo è.

Font propri, tagliati su misura. I caratteri tipografici sono ospitati sul dominio, non scaricati da Google o da altri servizi: un servizio di terzi in meno, una voce in meno nella pagina Privacy. E sono ridotti ai soli caratteri e pesi che il sito usa davvero, invece di scaricare l’intera famiglia di font con centinaia di varianti inutilizzate.

Prima il prototipo, poi il codice

Il design di oggi è il secondo. Il primo è nato confrontando quattro direzioni grafiche diverse fianco a fianco su un unico canvas, prima di scrivere una riga di CSS. A ottobre l’ho rifatto da capo con Claude Design, partendo di nuovo da un riferimento visivo completo (ogni pagina, ogni stato, tema chiaro e scuro) prima di toccare il codice.

È lo stesso principio con cui lavoro con i clienti: un prototipo da vedere e approvare prima che venga scritta una riga di codice. Correggere un’idea su un disegno costa un commento; correggerla dopo che è diventata codice costa tempo, a entrambi.

Perché conta, anche per chi non è del mestiere

Un sito leggero si apre subito anche con una connessione debole, e consuma meno dati sul telefono di chi lo visita. Google, per decidere come mostrare un sito nei risultati di ricerca, guarda proprio questi numeri. E un sito senza script di terzi è anche un sito con meno cose che possono rompersi, o essere usate per tracciare chi lo visita senza che se ne accorga.

Quando realizzo un sito per un cliente, parto dagli stessi principi: solo quello che serve, misurato, non promesso.