Per Addlab
Ho rifatto la home di T'a Milano. Non per rubartelo: per farti vedere come puoi farlo tu.
Lo shop di T'a Milano porta la vostra firma in fondo a ogni pagina, e nel vostro portfolio c'è la parte che da fuori non si vede ed è una delle più difficili in un negozio di cioccolato: le spedizioni che cambiano con la stagione e col prodotto, col corriere scelto in automatico. Quando fa caldo il cioccolato parte a temperatura controllata, e chi compra non deve pensarci.
E lo seguite ancora: il banner della home è di questo mese. Dentro ci sono scelte che reggono e che questa pagina tiene: le foto dei prodotti, belle davvero; le idee regalo per occasione e per prezzo; la spedizione gratuita da 50 € scritta in cima. Quello che rallenta non è il negozio: sono le foto caricate come PNG da 1,3 a 2,5 MB l'una, lo slider, e i servizi esterni che partono da soli (il banner dei cookie, i codici di Meta e di Google, Mailchimp, reCAPTCHA). Qui non ci sono, perché l'anteprima non vende; il sito vero li terrebbe, rivisti uno per uno e caricati dopo la pagina.
Le foto, i prodotti, i prezzi, i premi e la storia vengono dallo shop e dal sito di T'a Milano, letti il 26 ottobre 2026. T'a Milano non sa niente di questa pagina: nessuno l'ha contattata.
Il prima e il dopo, dal telefono
Su PageSpeed (Lighthouse, dal telefono)
- Il voto delle prestazioni93 su 100oggi 51
- La prima schermata (LCP)3,2 soggi 46,2 s
Lo strumento di Google che rifai in un minuto su PageSpeed Insights, col profilo del telefono: la rete e il processore lenti li ricava con un calcolo, per questo i suoi secondi somigliano a quelli della rete lenta. Due passaggi sul sito di oggi e tre sull'anteprima: del sito di oggi tengo il migliore, dell'anteprima il peggiore.
Con la sonda, in una rete rallentata davvero
- La prima schermata (LCP), in 4G0,8 soggi 12,6 s
- La stessa, in una rete lenta3,1 soggi 62,2 s
- Il peso al primo caricamento494 KBoggi 11,4 MB
- Le richieste ad altri siti0oggi 25
Apre la pagina come un telefono senza cache, col processore lento e la rete di un 4G o di una rete lenta: tre giri, e la mediana. Il peso e le richieste li conta lei.
Misurato il 26 ottobre 2026, il sito di oggi e l'anteprima dalla stessa macchina. La luce sui Diamanti arriva al primo gesto e pesa a parte: la mappa delle forme, 82 KB.
Che cosa ho cambiato, e perché
Il cioccolato prima delle parole
Si apre sui Diamanti, la slide del vostro carosello, con la loro domanda: «Hai mai assaporato un diamante?». Finché nessuno tocca, un bagliore caldo vaga piano sulle praline; al primo gesto una luce vera segue il mouse o il dito e accende le facce e la polvere d'oro. È il principio con cui lavoro, feel, don't tell: la pagina fa sentire la promessa invece di scriverla. La luce è calcolata dalla foto stessa (una mappa delle forme ricavata dall'immagine, nessun pixel inventato), e la prima schermata resta una foto ferma, che arriva subito.
La vetrina è una tavoletta
«Dove il gusto diventa esperienza» è la vostra sezione dei prodotti, con gli stessi sei e gli stessi prezzi. Qui è una tavoletta col marchio T'a impresso, come sul loro cioccolato (la foto «Delizie d'autunno»): scorrendo si spezza lungo i solchi, ogni quadretto si gira sul suo prodotto e torna al suo posto, e la vetrina resta una tavoletta. Ogni quadretto porta alla scheda vera: il carrello e la cassa restano i vostri.
Il regalo in due tocchi
Le idee regalo per occasione e per prezzo oggi stanno in un menu che si apre al passaggio; qui sono la seconda fermata, grandi, a portata di pollice, con accanto quello che chi regala chiede: spedizione gratuita da 50 €, a temperatura controllata quando fa caldo, ordine preparato entro 3 giorni lavorativi, 5 per Cioccolato Gourmet. Sono le vostre regole, scritte dove servono.
I fatti al posto dei superlativi
«Uno tra i cioccolati più buoni in Italia e nel mondo» è diventato una tavoletta d'oro di premi con il nome e l'anno: l'oro agli International Chocolate Awards, le Tavolette d'Oro, Eletto Prodotto dell'Anno. E la storia, dal 2008 di Tancredi e Alberto Alemagna al 2024 di Subito Chef, in sei date. Tutto preso dal loro sito.
Il loro materiale, valorizzato
Il petrolio e l'arancio sono quelli contati nei fogli di stile del vostro tema; Erode e Lato sono i loro caratteri, serviti dalla pagina stessa; il marchio è l'SVG del vostro tema, intatto. Le foto sono tutte loro: nessuna immagine generata, nessun volto. I testi nuovi, una ventina fra titoli, etichette e frasi brevi, stanno in un elenco con la fonte di ognuno, da far approvare al cliente.
Google, e chiunque arrivi
Un titolo principale (la home di oggi non ne ha), i dati strutturati dell'azienda e dei prodotti col prezzo, l'anteprima del link con la foto dei Diamanti (oggi incollato su WhatsApp resta senza immagine), testi alternativi su ogni foto (oggi nessuna ne ha uno: Lighthouse ne conta 31 senza). Bersagli di almeno 44 pixel, testi da 14 in su, contrasti misurati, la tastiera che arriva dappertutto, il movimento che si ferma per chi l'ha chiesto.
Quanto tempo, e con che cosa
Una sera: il 26 ottobre 2026, dalle 17:01 alle 17:43, dal primo rilievo alla pagina pronta, pubblicata alle 17:45; alle 18:04 una seconda versione, dopo lo sguardo di un critico che ha giudicato tre fotogrammi come il direttore creativo di uno studio. L'ha costruita un agente di intelligenza artificiale (Claude) che lavora con Linus, il metodo che ho scritto per l'intelligenza artificiale: prima ha smontato e misurato lo shop di oggi, poi ha scritto l'analisi e il progetto, poi le prove, che un secondo agente, che fa da regia per me, ha giudicato sugli scatti prima che la pagina si vestisse. Un terzo, che non l'ha costruita, la collauda e rilegge ogni fatto sulla fonte. Il mio lavoro sta nel metodo che seguono.
È una vetrina statica in Next.js, pubblicata su Vercel: niente tema, niente plugin, nessun servizio esterno. Prezzi e prodotti sono quelli dello shop al 26 ottobre 2026 e non sono un'offerta nostra. Se la pagina va online, i prezzi arrivano dal negozio stesso e si aggiunge il gestore dei contenuti: come oggi coi banner, T'a Milano cambia da sé anche vetrina e testi della home, senza chiamare nessuno. In questa anteprima non c'è. Il tempo vero, adesso, sta nelle decisioni: che cosa deve sentire chi arriva, che cosa togliere, che cosa è di T'a e di nessun altro.
Che cosa puoi portare a T'a Milano
- Il peso, prima di tutto: le foto in WebP o AVIF alle misure in cui si vedono (Lighthouse conta quasi 9 MB da risparmiare) e i servizi esterni rivisti uno per uno. Si fa sul tema che avete già.
- La vetrina di Natale in apertura, per occasione e per budget, da qui a dicembre.
- I premi e la storia in home, con le parole che T'a Milano ha già scritto.
- Se volete andare oltre il tema, una vetrina veloce davanti alla cassa di WooCommerce: è quello che questa pagina fa vedere. Per andare online le mancano i prezzi letti dal negozio, l'inglese e il carrello.
Se vuoi vedere come si lavora così
Giovedì 29 ottobre, dalle 14 alle 17, Marco Santonocito e io conduciamo «AI per agenzie»: un pomeriggio con le agenzie organizzato da Alleniamo Imprese, in un'aula della 24ORE Business School di Milano.
Partecipa al corso (si apre in un'altra scheda)Federico VitielloAlleniamo Imprese: formazione sull'intelligenza artificiale per le imprese
P.S.Nell'anteprima di T'a Milano ci sono tre cose nascoste. Se le hai già trovate, bene; se no, apri qui.
La luce dove tocchi
Al telefono, nella prima schermata, tocca la foto dei Diamanti e trascina il dito: la luce calda va dove tocchi, e la polvere d'oro brilla quando ci passa sopra. Al computer basta il mouse. Se lasci stare, dopo un attimo la luce gira da sola sulle praline.
PerchéUn cioccolatino a facce si guarda girandolo sotto la luce, prima di assaggiarlo. Qui lo fai senza scartarlo, e la domanda del titolo è loro: «Hai mai assaporato un diamante?».
Il quadretto che si spezza da solo
Nella vetrina, «Dove il gusto diventa esperienza», quando la tavoletta è ancora intera tieni premuto un quadretto per mezzo secondo, col dito o col mouse: si stacca e si gira prima degli altri, e mostra il suo prodotto col prezzo.
PerchéSpezzare un quadretto è il primo gesto che si fa col cioccolato. Qui diventa il gesto con cui si sceglie.
Qualcuno si è mangiato questa pagina
Nella barra degli indirizzi, al posto di quello che c'è, scrivi per-addlab
.alleniamoimprese .it /quadretto. Si apre la pagina che compare quando un indirizzo non esiste: una tavoletta a cui manca un quadretto. PerchéUn indirizzo sbagliato non deve fermare un regalo: la pagina sorride e ti riporta alla home, al regalo o ai Diamanti.