Per NewVisibility
Ho rifatto la home di MisuraEmme. Non per rubartelo: per farti vedere come puoi farlo tu.
A parole siamo bravi tutti, io per primo: per questo, invece di raccontarti come lavoro, ho rifatto una pagina che conosci bene. MisuraEmme non sa niente di questa pagina: nessuno l’ha contattata.
Il sito che firmate in fondo alla pagina, «NewVisibility design», è del 2017, l’anno del suo Special Kudos ai CSS Design Awards, e in nove anni non ha perso un pezzo: il nero e il bianco a fasce, il Bodoni spaziato dei titoli, le grandi immagini degli ambienti, l’assonometria di Palo Alto, il film delle lavorazioni, la fabbrica. E vive: il flagship e il suo film del 2026, le notizie di quest’anno, tre lingue, il Moodboard Creator e l’area riservata. Il vostro design prende premi da allora, ogni anno dal 2023, e non sono qui per discuterlo: nella home rifatta la veste è la vostra.
Quello che non regge, dal telefono, è il peso. Per Lighthouse la home scarica più di 23 megabyte, perché i due film partono all’apertura (12,3 MB il flagship, 6,2 MB le lavorazioni) e le foto di Instagram passano dal vostro server; alla prima visita il banner dei cookie copre tutta la schermata; e la home non ha un titolo principale, un h1. La stessa bellezza può pesare venti megabyte in meno: è tutto qui.
Il prima e il dopo, dal telefono
Con Lighthouse, il motore di PageSpeed (dal telefono)
Lo strumento di Google che lavora anche dentro PageSpeed Insights, col profilo del telefono: lo rifai in un minuto, con qualche punto di scarto perché cambia la macchina. La rete e il processore lenti li ricava con un calcolo; il peso lo conta fino a quando la rete si calma, video compresi. Due passaggi: del sito di oggi tengo il migliore, dell’anteprima il peggiore.
- Il voto delle prestazioni
- 96 su 100invece di 53
- La foto d’apertura (LCP)
- 2,4 sinvece di 9,1 s
- Il peso che Lighthouse conta
- 260 KBinvece di 23,7 MB
Con Chrome, 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 è quello del primo caricamento, fino a due secondi e mezzo dopo che la pagina è pronta, senza i video che partono dopo.
- La foto d’apertura (LCP), in 4G
- 0,60 sinvece di 1,25 s
- La stessa, in una rete lenta
- 1,8 sinvece di 9,5 s
- Il peso al primo caricamento
- 270 KBinvece di 3,3 MB
- Le richieste ad altri siti
- 0invece di 10
I due momenti pesano a parte, e arrivano solo dopo il primo gesto di chi guarda: il film delle lavorazioni 601 KB al telefono e 1,8 MB al computer (oggi il suo video pesa 6,2 MB e parte da solo); la cabina non scarica niente, usa l’immagine che è già nella pagina. Il film del flagship, quando entra in vista: 1,4 MB al telefono e 2,6 MB al computer, invece di 12,3 MB all’apertura.
Misurato il 25/10/2026 dalla stessa macchina e con gli stessi due strumenti: il sito di oggi su www.misuraemme.it, l’anteprima già pubblicata. I numeri di Lighthouse li rifai in un minuto su PageSpeed Insights, con qualche punto di scarto; quelli di Chrome, a occhio, dal tuo telefono.
Che cosa ho cambiato, e perché
- 01
La vostra veste
Il nero e il bianco a fasce, i titoli in maiuscolo spaziato, le etichette strette, le grandi immagini degli ambienti: è il vostro sistema e l’ho tenuto. I colori vengono dal vostro foglio di stile, la curva dei movimenti anche. Per titoli ed etichette ho preso i caratteri liberi più vicini ai vostri (Libre Bodoni per il Bodoni Seventy-Two, Archivo stretto per l’Helvetica Neue Condensed); il testo, che oggi è in Lato da Google Fonts, è in Archivo a larghezza piena. Due file in tutto, serviti dal sito stesso.
- 02
Il film delle lavorazioni, da guidare col dito
Oggi il film delle fasi di lavorazione parte da solo in fondo alla home e pesa da solo più di sei megabyte. Qui sta subito sotto l’apertura e avanza solo se chi guarda scorre: dai campioni sul tavolo al divano finito e al telaio dell’armadio montato, sette fasi, ognuna con un fatto delle vostre pagine (il certificato Aquaver numero 0001, i 35.000 mq di Mariano Comense, il Centro Ricerca e Sviluppo). È il principio con cui lavoro, feel, don’t tell: «su misura, dal 1902» si vede fare invece di leggerlo.
- 03
La cabina in cui si entra
Palo Alto è il prodotto che la home vende. Il render della cabina Free con le ante aperte, scorrendo, si attraversa: le ante e i mobili vengono incontro, la parete in fondo resta lontana. È la stessa immagine del sito, divisa in due piani lungo i profili scuri, con poche righe di WebGL e nessuna libreria 3D: nessuna immagine nuova.
- 04
Il flagship, in testo
Indirizzo e orari del flagship oggi sono scritti dentro la foto dell’apertura: Google e chi legge lo schermo non li vedono. Qui sono testo, nella pagina e nei dati strutturati del negozio, con gli orari; «Rete vendita» è sempre nella testata. Il vostro film del flagship c’è ancora, ricompresso, e parte solo quando entra in vista.
- 05
Google e la condivisione
Oggi la home non ha un
h1, e i metadati per la condivisione, quelli che WhatsApp e LinkedIn leggono, dicono «Rivenditore MisuraEmme», puntano alla pagina dei rivenditori e hanno un’icona generica e la descrizione vuota. Qui c’è un soloh1, con «su misura», che oggi manca anche nel titolo della pagina; una descrizione coi luoghi veri (Mariano Comense, la Brianza, Milano), l’anteprima del link con la facciata del flagship, e un indirizzo che non c’è risponde 404 con una pagina che aiuta, invece di rimandare alla home. - 06
La velocità, e il banner che non serve
Nessuna richiesta ad altri siti: niente Tag Manager, niente Analytics, niente Google Fonts, niente immagini di Instagram (oggi 4,5 MB passano dal vostro server). Le foto sono in AVIF, nella misura di ogni schermo. E senza misure di terze parti la pagina non ha bisogno del banner dei cookie, che oggi, dal telefono, copre l’intera prima schermata: se servono le statistiche, si fanno di prima parte e in forma aggregata, senza banner.
Due cose, intanto, si sistemano già domattina anche sul sito di oggi, senza aspettare il resto: i due film della home con preload="none" e la loro copertina, fatti partire quando entrano in vista (sono diciotto megabyte in meno all’apertura della pagina); e i metadati della home per la condivisione, che oggi prendono il titolo e l’indirizzo della pagina dei rivenditori.
Quanto tempo, e con che cosa
Domenica 25 ottobre: il lavoro è partito alle 11:50, la pagina era pubblicata alle 13:19, e poi è venuto il collaudo, con le sue correzioni. L’ha costruita un agente di intelligenza artificiale (Claude) che lavora con Linus, il metodo con cui lavoro: prima ha studiato e misurato il sito di oggi, poi ha scritto l’analisi e il progetto, poi le prove. Un secondo agente, che fa da regia per me, ha giudicato le prove sugli scatti prima che la pagina si vestisse; un terzo, che non l’ha costruita, la collauda e rilegge ogni fatto sulla fonte. Le ore sono degli agenti: il mio lavoro sta nel metodo che seguono. Il lavoro ha coperto la home, in italiano: il resto è nell’elenco qui sotto.
Next.js, pubblicata su Vercel. In questa anteprima i testi sono scritti nel codice; un sito vero li prende dal gestore dei contenuti, e voi ne avete già uno vostro. Il tempo vero, adesso, sta nelle decisioni: che cosa deve sentire chi arriva, che cosa togliere, che cosa appartiene soltanto a MisuraEmme.
Che cosa puoi portare a MisuraEmme
- La home e le pagine delle collezioni rifatte così, nelle tre lingue che hanno già.
- I film e le foto che girate per loro usati come esperienze, leggeri e guidati da chi guarda, anche nelle schede dei prodotti.
- Il flagship e i monobrand di New York e Londra con una pagina ciascuno, con indirizzo e orari in testo e nei dati strutturati.
- Le parole con cui li cercano su Google, cabine armadio e sistemi su misura, una pagina per sistema e per lingua.
- Le visite e le richieste ai rivenditori misurate di prima parte e in forma aggregata, senza banner e senza Tag Manager.
Se vuoi vedere come si lavora così
Giovedì 29 ottobre, dalle 14 alle 17, sono alla 24ORE Business School di Milano con le agenzie, insieme a Marco Santonocito, che costruisce prodotti digitali. Organizza Alleniamo Imprese, la scuola ci ospita.
Il programma del pomeriggio (si apre in un’altra scheda)
Federico Vitiello
Alleniamo Imprese: formazione sull’intelligenza artificiale per le imprese