Per GRF Studio, da Federico Vitiello
Ho rifatto la home di Annibale Colombo. Non per rubartelo: per farti vedere come puoi farlo tu.
Il sito di Annibale Colombo porta la vostra firma in fondo alla pagina, e il caso studio che lo racconta è del 9 aprile 2019. È fatto con quello che allora serviva a un'azienda che lo aggiorna da sola: un gestionale su misura, uno slider a tutta pagina, due lingue, un catalogo di circa trecento prodotti con le gallerie, le dimensioni e le finiture, i cataloghi da scaricare e i modelli 3D da chiedere.
E dentro ci sono cose che reggono ancora. Il cliente lo usa davvero: l'ultima notizia è di aprile 2026. Il configuratore Quadro, la web app che avete costruito per comporre una libreria e arrivare al preventivo, è la cosa più utile del sito: l'ho lasciato com'è, col suo link. Le foto, poi, sono bellissime, e le avete messe in pagina voi: sono partito da lì.
Nella home rifatta le foto, il video e ogni fatto vengono dal sito di oggi e dal loro canale YouTube: titoli e frasi li ho riscritti, ma non ho aggiunto niente che non fosse già loro. Quello che è invecchiato è il modo in cui la home arriva su un telefono: le otto foto dello slider pesano da 1,7 a 3,3 MB l'una, e partono tutte insieme.
L'ho rifatta con un agente di intelligenza artificiale che lavora col mio metodo: chi ha fatto che cosa, e in quanto tempo, lo racconto più sotto.
Guarda la home rifattaIl configuratore, com'è (si apre in un'altra scheda)
Il prima e il dopo, dal telefono.
A parole siamo bravi tutti, io per primo: quindi, le due home come le vede un telefono, e i numeri.
E la velocità: lo stesso telefono simulato, con la rete rallentata come un 4G, che cosa si vede dopo 1, 3, 10 e 22 secondi.
Il sito di oggi
L'anteprima
Lighthouse, dal telefono: lo strumento di PageSpeed
| Che cosa | Oggi | Anteprima |
|---|---|---|
| Prestazioni, su 100due passaggi per pagina, uguali | 16 | 98 |
| La prima schermata completaLCP | 113,1 s | 2,3 s |
Rifacendo la prova su PageSpeed Insights, dal telefono, ritrovate numeri vicini: è lo stesso Lighthouse, su un'altra macchina. La rete e il processore lenti li ricava con un calcolo, invece di rallentarli davvero.
La nostra sonda, con la rete rallentata davvero
| Che cosa | Oggi | Anteprima |
|---|---|---|
| La prima schermata completa, in 4GLCP, mediana di tre giri | 21,6 s | 0,83 s |
| La stessa, in 4G lenta | 116,0 s | 2,3 s |
| Peso al primo caricamentol'anteprima senza il video dell'apertura, che parte a pagina pronta e pesa altri 663 KB | 19,9 MB | 489 KB |
| La pagina che salta mentre caricaCLS in 4G (in 4G lenta 0,01): sotto 0,1 è buono | 0,66 | 0 |
| Richieste ad altri server, all'aperturacaratteri, icone, banner dei cookie, video e altri servizi | 23 | 0 |
Chrome nei panni di un telefono (390 px, il processore rallentato quattro volte), con la rete rallentata dal browser (4G: 8,1 Mbit/s e 165 ms; 4G lenta: 1,44 Mbit/s e 562 ms, i valori di Lighthouse per il telefono), senza cache, tre giri e la mediana.
Quasi tutta la differenza sta nelle foto: 18,5 dei 19,9 MB di oggi sono le otto foto dello slider. Il resto sono caratteri e icone presi da altri server, le statistiche, i codici della pubblicità, il banner dei cookie e il video di YouTube. L'anteprima ha i suoi caratteri in casa e il resto non lo porta: se il sito va online, quello che serve misurare si aggiunge, anche senza cookie.
Il sito di oggi misurato il 20 ottobre 2026, l'anteprima il 21 ottobre 2026, tutte e due al loro indirizzo e dalla stessa macchina.
Che cosa ho cambiato, e perché.
La prima cosa che si vede è il legno
Sul loro canale c'è un video di 47 secondi del trumeau K265, verticale, girato per il telefono. Ne ho preso i dettagli finiti, la chiave nella serratura, la radica, la modanatura lucida, li ho rallentati e messi in apertura, muti, sopra il titolo e l'anno. Il video parte quando la pagina è già pronta; fino ad allora si vede il suo primo fotogramma, che sul telefono pesa 23 KB. Invece di scrivere «alta ebanisteria» in apertura, la si fa vedere.
Il grezzo e il finito, in mano a chi guarda
Lo stesso video alterna il mobile grezzo in bottega e lo stesso mobile finito. Ho allineato due fotogrammi sulla sagoma del trumeau e li ho messi uno sopra l'altro: scorrendo, o trascinando la linea col dito, il mobile grezzo diventa radica lucida. Accanto non c'è nessuna istruzione, solo la maniglia sulla linea. È la cosa che voglio resti a chi visita.
Le stesse foto, alla misura dello schermo
Nessuna foto nuova e nessuna immagine fatta con l'intelligenza artificiale: le loro, ritagliate e servite in AVIF e WebP, formati più leggeri del JPEG, alla larghezza in cui si vedono davvero. Al primo caricamento arriva solo l'immagine che serve, le altre quando ci si avvicina.
Il marchio diventa il sistema
Il loro logo è un quadrato diviso: sopra il contorno, sotto il pieno. Ogni riquadro della pagina è fatto così, con una linea color gommalacca fra la foto e il nome. I titoli sono in Gloock, il carattere libero più vicino alle lettere del marchio fra diciotto messi a confronto sui pixel; il testo è in Crimson Pro, l'evoluzione del Crimson Text che il sito usa già.
Prima quello che cerca chi arriva
Sopra la piega il mestiere, il luogo e l'anno. Subito dopo le cinque collezioni grandi, con una riga per chi sono; poi la bottega, le date, le realizzazioni coi loro nomi, lo showroom di Meda col telefono che si tocca e un modulo di quattro campi. Sul telefono «Chiama» e «Chiedi informazioni» restano a portata di pollice.
Pronta per Google
Un titolo e una descrizione col mestiere e coi luoghi veri, un solo titolo principale, i dati strutturati (gli indirizzi, gli orari e il telefono scritti in un formato che Google legge), la sitemap. E il link mandato su WhatsApp mostra la foto della loro radica e il nome giusto. L'anteprima, per scelta, resta fuori dai risultati di ricerca.
Nessun banner dei cookie, perché non serve
I caratteri stanno in casa, e nella pagina non c'è nessuna libreria da altri server, nessun tag manager, nessun contatore: finché chi guarda non tocca un link, la pagina non si collega a nessun altro. Per questo il banner dei cookie, che oggi sul telefono sta sopra la pagina, qui non c'è.
Quanto tempo, e con che cosa.
Una sera: tre ore e 26 minuti di lavoro di un agente, dalle 21:20 del 20 ottobre alla pubblicazione, alle 00:46 del 21. L'ha costruita un agente di intelligenza artificiale (Claude) che lavora con Linus, il metodo che ho scritto per gli agenti che costruiscono siti e app: regole e procedure da seguire, passo per passo. Prima ha smontato e misurato il sito di oggi, poi ha scritto l'analisi e il progetto sezione per sezione, col perché di ogni scelta, poi una prima versione. Un secondo agente, che fa da regia per me, ne ha guardato le schermate prima della grafica finale; un terzo, che non l'ha costruita, la collauda e rilegge ogni fatto sulla fonte. Il mio lavoro sta nel metodo che seguono.
Next.js, pagine statiche pubblicate su Vercel: nessun tema e nessun plugin da pagare. Se va online, si aggiunge un gestore dei contenuti che il cliente usa dalla pagina stessa; in questa anteprima non c'è. Il tempo vero, così, sta nelle decisioni: che cosa deve sentire chi arriva, che cosa togliere, che cosa è loro e di nessun altro. Qui le ha prese l'agente seguendo il metodo, e la regia le ha controllate; con un cliente vero le prendete voi, con lui.
Che cosa potresti portare ad Annibale Colombo.
Annibale Colombo non sa niente di questa pagina. Se fossi in voi, gli proporrei questo:
- La home nuova, con le loro foto servite a misura e il video della bottega: è il lavoro che si vede di più, e si misura.
- Le circa trecento schede dei prodotti con lo stesso riquadro, le gallerie leggere e un «Chiedi informazioni» su ogni modello.
- Un breve video dal grezzo al finito anche per le altre collezioni, se in bottega hanno altri girati come quello del K265.
- Google: i dati strutturati dello showroom, le descrizioni scritte una per una, le anteprime dei link.
E una cosa da non toccare: il configuratore.
Se vuoi vedere come si lavora così.
Giovedì 29 ottobre, dalle 14 alle 17, Marco Santonocito, che costruisce prodotti digitali, e io lo facciamo vedere a un gruppo piccolo di agenzie, in aula a Milano e a pagamento: un agente che lavora con Linus, dal vivo, e come cambia il preventivo. Organizza Alleniamo Imprese, e la 24ORE Business School ci ospita.
Il programma del pomeriggio (si apre in un'altra scheda)Federico VitielloAlleniamo Imprese, formazione sull'intelligenza artificiale per le imprese