Per Weblitz
Ho rifatto la home di Italian Slicers. Non per rubartelo: per farti vedere come puoi farlo tu.
Il sito di Italian Slicers porta il vostro «Powered by», ed è un sito che lavora: un catalogo vero, una scheda per ogni macchina con le foto, la richiesta d’informazioni e, per alcune, gli esplosi da scaricare, in due lingue; un cercatore coi dati veri delle Heavy Duty («Chi sei», «Cosa devi tagliare»); la pagina del Museo; e il video girato in fabbrica, con le persone di Essedue.
Italian Slicers non sa niente di questa pagina: non ho contattato nessuno, né loro né voi.
Ho tenuto quello che c’era di buono e l’ho messo davanti. I fatti vengono tutti dal sito di oggi e le parole sono quasi tutte le loro; i testi nuovi (il titolo, le due righe per Google, i titoli delle sezioni) stanno in un elenco, da far approvare al cliente se la usi.
Una cosa tecnica, senza colpa: il sito gira su Drupal 7, che dal gennaio 2025 non riceve più aggiornamenti di sicurezza, con PHP 7.1. Regge da quasi cinque anni (Internet Archive lo vede dal dicembre 2021), ed è anche il motivo più semplice per proporre al cliente il passo dopo. Questa pagina è un modo di farglielo vedere.
Il prima e il dopo, dal telefono
Con Lighthouse, l’esame di PageSpeed (dal telefono)
Lo stesso esame che rifai in un minuto su PageSpeed Insights, dove gira sulle macchine di Google e i numeri cambiano un po’ da un giro all’altro. La rete e il processore lenti li simula con un calcolo: per questo i suoi secondi non coincidono con quelli della sonda qui sotto. Due passaggi: del sito di oggi tengo il migliore, dell’anteprima il peggiore.
- Il voto delle prestazioni
- 93 su 100invece di 46
- La prima schermata (LCP)
- 3,2 sinvece di 12,8 s
Con la sonda, in una rete rallentata davvero
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, i salti e le richieste li conta lei.
- La prima schermata (LCP), in 4G
- 0,7 sinvece di 2,3 s
- La stessa, in una rete lenta
- 2,0 sinvece di 9,8 s
- Quanto salta mentre carica (CLS), in rete lenta
- 0,00invece di 0,40
- Il peso al primo caricamento
- 433 KBinvece di 2,2 MB, più 3,1 MB di video
- Le richieste ad altri siti
- 0invece di 26
Misurato il 26 ottobre 2026 dalla mia macchina, col profilo del telefono: Lighthouse 12 in due passaggi, la sonda in tre giri; il sito di oggi alle 17:38, l’anteprima sul sito pubblicato alle 18:08. Il film della fabbrica pesa 367 KB al telefono (1,4 MB al computer, coi fotogrammi interi) e arriva solo quando ci si avvicina, dopo la prima schermata: non entra in questi numeri.
Che cosa ho cambiato, e perché
La precisione, vista da vicino
Oggi la prima schermata è il video della fabbrica, che parte da solo; la Royal 350, fotografata a 3478 pixel, si vede solo nella sua scheda, in un riquadro. Qui la pagina si apre sulla sua lama, nitida, e scorrendo la camera arretra fino alla macchina intera, con la sua didascalia: «Lama in acciaio C45. Anello di protezione in alluminio.» È il principio con cui lavoro, «feel, don’t tell»: la pagina fa sentire la precisione invece di scriverla. La prima schermata è un’immagine ferma, ed è la prima cosa che il telefono disegna; la macchina intera arriva dopo, quando il browser è libero.
Il loro video, guidato dal dito
Il video girato in fabbrica è il materiale più vero del sito. Oggi parte da solo, pesa più di 3 MB ed è la prima schermata; qui è diviso in 84 fotogrammi che arrivano solo quando ci si avvicina, e lo guida chi scorre: dal truciolo al piatto, con cinque soste scritte con le parole di Chi siamo («lavorazioni meccaniche precise e assemblaggi accurati»). Si torna indietro, ci si ferma, si rivede: è il visitatore a decidere l’andatura.
Il cercatore, portato in home
L’idea migliore del sito c’era già: il cercatore con «Chi sei», «Cosa devi tagliare» e «Dimensioni prodotto», coi dati veri delle Heavy Duty. Oggi sta nella pagina delle professionali; qui è in home, per 21 modelli (per gli altri i dati vengono dalle frasi delle schede), e chi sceglie vede subito le macchine giuste. Quella in vetrina si guarda con la lente, sulla loro foto originale, fino a 2000 pixel.
Due storie, una sola
Le tappe di Chi siamo diventano due binari, il blu di Rheninghaus dal 1950 e il verde di Essedue dal 1978, che nel 2016 si uniscono nel filo tricolore del marchio; accanto, le foto del Museo, con la Fiera di Milano del 1956.
Quello che Google e chi condivide il link non vedevano
Nel contatore «1.5 Affettatrici prodotte dal 1950» la parola «milioni» non sta nel testo ma nel foglio di stile: nel testo che Google legge restano «1.5 Affettatrici». Il tasto «Affettatrici per la casa» della home porta a una pagina che non c’è più. Il link condiviso esce senza immagine, e la pagina non ha dati strutturati. Qui la parola è nel testo, la casa ha i suoi modelli, l’anteprima del link ha la Royal, e Google legge l’azienda, le due sedi produttive e i 21 modelli coi loro nomi.
La velocità, e una pagina che non salta
Niente tema e nessuna richiesta ad altri siti (oggi sono 26: Tag Manager, Bootstrap, FontAwesome, i caratteri di Google, il banner dei cookie), le foto nelle misure che servono a ogni schermo, Barlow servito dal sito stesso. Il confronto non è alla pari su tutto: l’anteprima non ha l’inglese, i moduli che spediscono e le misure di Google; se al cliente servono si rimettono, e il conto si rifà con loro.
La loro famiglia di caratteri, il loro filo
I titoli sono in Barlow Condensed e il testo in Barlow: la famiglia che il sito usa già. Il fondo delle macchine è il bianco delle loro foto, che così non hanno riquadri; il rosso è solo per le azioni; e il filo tricolore che sta sotto il loro marchio diventa il segno della pagina: passa come una lama sotto i titoli, segna la sosta del film e la scelta del cercatore, e fa il bordo della lente.
Due cose, intanto, si sistemano già domani sul sito di oggi, senza aspettare il resto: il tasto «Affettatrici per la casa» della home, che porta a una pagina che non c’è, e la parola «milioni» del contatore, da scrivere nel testo invece che nel foglio di stile.
Quanto tempo, e con che cosa
Lunedì 26 ottobre, dalle 17:02 alla pubblicazione, alle 18:00. Prima c’era stata la ricerca: un altro agente aveva scelto Weblitz e Italian Slicers fra le agenzie dei dintorni di Milano, e scritto che cosa doveva sentire chi visita il sito. Poi l’ha costruita un agente di intelligenza artificiale (Claude) che lavora con Linus, il metodo con cui lavoro: ha studiato e misurato il sito di oggi, ha scritto l’analisi e il progetto, e alle 17:37 le prime schermate di prova. Un secondo agente, che fa da regia per me, le ha giudicate prima che si disegnasse il resto, e ha chiesto i titoli nella famiglia di caratteri del cliente; un terzo, che non l’ha costruita, la collauda e rilegge ogni fatto sulla fonte. Il mio lavoro sta nel metodo che seguono. Prima del collaudo, un quarto agente, nel ruolo del direttore creativo di uno studio, ha guardato i fotogrammi e ha detto «un’A.I. fatta bene, non uno studio»: l’apertura divisa in due scatole, tre sezioni aperte allo stesso modo, il film a colori che si confondeva proprio sulle soste. Le sue correzioni sono online dalle 18:06; dopo, il collaudo ha chiuso i suoi rilievi.
Next.js, pubblicata su Vercel. Le decisioni (la lama vista da vicino, il film guidato dal dito, il cercatore in home) le hanno prese gli agenti col metodo, sul materiale del cliente guardato tutto: per questo non è la pagina che l’AI fa per tutti. La decisione resta il lavoro; quello che è cambiato è quanto costa la manodopera, dopo.
Che cosa puoi portare a Italian Slicers
- Le schede prodotto rifatte così: la foto grande con la lente, la richiesta d’informazioni, gli esplosi dove ci sono, e i dati che Google legge per ogni modello.
- Il cercatore per tutta la gamma: oggi i filtri coprono solo le Heavy Duty; con i dati delle altre schede vale anche per la casa e per il bar.
- L’inglese per gli 80 Paesi, con gli indirizzi giusti per Google in ogni lingua.
- Il passaggio da Drupal 7 senza perdere niente: gli indirizzi di oggi che portano alle pagine nuove, le schede, i cataloghi.
- Il gestore dei contenuti sulla pagina stessa: schede, catalogo e pagine le cambia chi le sa, senza aprire Drupal.
Se vuoi vedere come si lavora così
Giovedì 29 ottobre, dalle 14 alle 17, sono alla 24ORE Business School di Milano con chi vende siti, comunicazione e marketing alle imprese, insieme a Marco Santonocito, che costruisce prodotti digitali. Organizza Alleniamo Imprese, la scuola ci ospita.
Partecipa al corso (si apre in un’altra scheda)
Federico Vitiello
Alleniamo Imprese: formazione sull’intelligenza artificiale per le imprese
P.S.Nell’anteprima di Italian Slicers c’è una cosa che quasi nessuno vede. Se l’hai già trovata, l’ho nascosta male; se no, apri qui.
Questa fetta non c’è
Nella barra degli indirizzi, al posto di quello che c’è, scrivi per-weblitz
.alleniamoimprese .it /it /prodotti /affettatrici-la-casa: è l’indirizzo dove porta oggi il tasto «Affettatrici per la casa» della home, e che sul sito di oggi non esiste più. Si apre la pagina che compare quando un indirizzo non c’è: «Questa fetta non c’è.», e sotto la strada per le affettatrici per la casa, col cercatore già aperto su «Casa». PerchéChi oggi tocca «Affettatrici per la casa» trova «Pagina non trovata». Qui la pagina che non c’è fa quello che farebbe un buon commesso in bottega: non si scusa, ti porta alla macchina che cercavi.