Per 4 zeta
Ho rifatto la home di ALV Group. Non per rubartelo: per farti vedere come puoi farlo tu.
ALV Group non sa niente di questa pagina: nessuno l’ha contattato.
Il sito che porta il tuo «Credits» è del 2022 (quasi tutti i file sono stati caricati fra settembre 2021 e aprile 2022, e nel febbraio 2024 il catalogo ha avuto un articolo nuovo, in carta FSC), su WordPress con Elementor, in italiano e in inglese. Dentro c’è una cosa che molti siti industriali non hanno: un catalogo vero. Nella pagina «Prodotti» ci sono settantasei articoli, quasi tutti fotografati nello stesso modo, una curva sola su bianco, ognuno col suo nome; le finiture sono spiegate una per una, e la SEO tecnica di Lighthouse dà 100.
Quel catalogo è il cuore della home rifatta. I fatti vengono tutti dal sito di oggi, e i testi nuovi (il titolo per Google, le righe delle famiglie, le parole del bozzetto del nastro) stanno in un elenco, da far approvare ad ALV se la usi. Quello che pesa sulla pagina di oggi non è il progetto: è il video dell’apertura (7,7 MB, che Lighthouse vede scaricare per intero anche dal telefono), e quello che si portano dietro il tema, i plugin e i servizi di Google.
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, e scarica anche il video: per questo i suoi numeri 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
- 95 su 100invece di 61
- La prima schermata (LCP)
- 2,9 sinvece di 4,9 s
- Il peso che scarica
- 910 KBinvece di 10,3 MB
- Le richieste
- 27invece di 101
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 e le richieste li conta lei, su tutto il primo caricamento, video escluso.
- La prima schermata (LCP), in 4G
- 0,8 sinvece di 2,3 s
- La stessa, in una rete lenta
- 2,9 sinvece di 7,4 s
- Il peso al primo caricamento
- 622 KBinvece di 2,6 MB
- Le richieste ad altri siti
- 0invece di 9
Misurato il 26/10/2026 dalla stessa macchina, a meno di un'ora l'uno dall'altro, con la misura anonima delle visite di questa anteprima (va al sito di Alleniamo Imprese) fermata e non contata. Quelli della sonda li ritrovi, a occhio, dal tuo telefono.
Che cosa ho cambiato, e perché
Il catalogo che c’era già, nella prima schermata
Oggi la prima schermata è un video (un pacco col fiocco, le mascherine, i sacchetti, i lacci delle scarpe): dice dove finiscono gli articoli, ma non li fa vedere. Qui la prima cosa sono gli articoli veri: le foto del catalogo, scontornate dal bianco, galleggiano sull’azzurro delle due pennellate del marchio, a profondità diverse. Muovi il mouse o scorri, e i vicini si spostano più dei lontani. È il principio con cui lavoro, «feel, don’t tell»: chi arriva vede la materia prima di leggere «Corde e nastri personalizzati».
Il preventivo che si prova
Oggi, in fondo alla pagina, sotto «Richiedi un Preventivo», il tasto «Contattaci» apre il modulo di contatto in una finestra. Qui, prima del modulo, scrivi il tuo marchio e lo vedi stampato su un nastro che scorre come sotto la macchina: scegli il colore (preso dalle loro foto), la stampa (le cinque della pagina «Finiture»: oro e argento metallici, tono su tono, sublimatica, quadricromia) e il taglio, e accanto vedi la foto vera di quella stampa. Alla fine la richiesta è già scritta, con l’articolo descritto. In anteprima non spedisce niente: sul sito vero partirebbe col modulo che c’è già.
Le foto che c’erano e non si vedevano
La facciata del complesso Bellora col camino e la scritta ALV, l’incisione d’epoca del complesso, le scatole col marchio pronte a partire: sul sito di oggi stanno dietro i testi, come sfondi velati. Qui raccontano il 1923 e «Ogni spedizione viene controllata», con le loro parole.
Il marchio, i caratteri e un dettaglio che vendono
Il colore pieno è l’azzurro delle due pennellate del marchio, e il marchio sta sulla testata senza il riquadro. I caratteri sono la famiglia Roboto del tuo tema, nelle sue forme variabili: Roboto Serif nei titoli, che a quella misura si avvicina all’ALV del marchio, e Roboto Flex stretto nelle etichette, al posto del Roboto Condensed. I tasti e le etichette finiscono col taglio obliquo dei loro nastri, una delle finiture che vendono.
Google e chi legge
Il titolo e la descrizione con le parole di chi cerca (corde e nastri personalizzati, Gallarate), i dati strutturati dell’azienda con l’indirizzo e il catalogo, l’anteprima del link col campionario. I testi a basso contrasto, che oggi Lighthouse segnala in venti punti della home, qui sono sopra la soglia, e ogni tasto è grande abbastanza per un dito.
La velocità
Niente video in apertura, niente Tag Manager, reCAPTCHA e banner dei cookie (la pagina non usa cookie): le foto nelle misure che servono a ogni schermo e i caratteri serviti dal sito stesso. Il confronto non è alla pari su tutto: l’anteprima non ha l’inglese, il modulo che spedisce davvero e le misure di Google. Se ad ALV servono si rimettono, e il conto si rifà con loro.
Una cosa, intanto, si sistema già domani sul sito di oggi, senza aspettare il resto: la home dichiara due volte il titolo per l’anteprima dei link, e il primo è «Home». È quello che può comparire quando qualcuno manda la pagina su WhatsApp o su LinkedIn.
Quanto tempo, e con che cosa
Lunedì 26 ottobre, dalle 17:05 alla pubblicazione, alle 18:22. Prima c’era stata la ricerca: un altro agente aveva scelto 4 zeta e ALV Group fra i siti dei freelance intorno a Milano, e scritto che cosa doveva sentire chi lo visita. 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 il progetto, e alle 17:27 le prime schermate di prova. Un secondo agente, che fa da regia per me, le ha giudicate prima che si disegnasse il resto; 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, pubblicata su Vercel. La decisione di che cosa far sentire (il catalogo in apertura, il nastro da provare, il complesso del 1923) l’hanno presa gli agenti col metodo, sul materiale guardato tutto: per questo non è un tema con le foto cambiate. La decisione resta il lavoro; quello che è cambiato è quanto costa la manodopera, dopo.
Che cosa puoi portare ad ALV
- Il filtro per famiglia e la scheda di ogni articolo ci sono già: ci si aggiungono il materiale (riciclato, organico, GOTS) e il colore, e le schede diventano cartelle campionario.
- Il bozzetto del nastro collegato al modulo vero: la richiesta arriva con l’articolo già descritto, e ad ALV risparmia il primo giro di email.
- Lo stesso per corde e lacci: il puntale, la ceratura, il colore, scelti prima di scrivere.
- La versione inglese allineata a quella italiana, con gli stessi numeri di velocità.
- Il gestore dei contenuti sulla pagina stessa: un articolo nuovo nel catalogo lo aggiunge chi lo produce, con la sua foto, senza aprire WordPress.
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
Il tuo nome l’ho preso dal sito di 4 zeta, che è pubblico. Come uso questi dati e come dirmi di no ↗ (si apre in un’altra scheda)
P.S.Nell’anteprima di ALV Group ci sono tre cose che quasi nessuno vede. Se le hai già trovate, le ho nascoste male; se no, apri qui.
Il nastro già annodato
Nella home, scendi fino al nastro col tuo marchio stampato. Sotto il nastro, a destra, c’è una riga sottile: «Lo vuoi già annodato?». Toccala: sotto il nastro compaiono i loro fiocchi, già fatti.
PerchéI fiocchi premontati sono uno degli articoli della pagina «Prodotti», in mezzo ai nastri: qui compaiono quando servono, cioè quando hai appena scelto il tuo nastro.
Il campionario che si muove con te
Al computer, nella prima schermata della home, muovi il mouse piano da un lato all’altro: i nastri vicini si spostano più dei lontani, come oggetti sospesi a distanze diverse. Al telefono succede scorrendo: i vicini salgono più in fretta.
PerchéÈ il campionario di ALV, con le loro foto vere, guardato come si guarda una cartella colori: girandoci intorno.
Questo nastro finisce qui
Nella barra degli indirizzi scrivi per-4zeta.alleniamoimprese.it/prodotti/nastri, un indirizzo che il sito di oggi ha e l’anteprima no. Si apre la pagina che compare quando un indirizzo non esiste: i loro due nastri col taglio obliquo e «Questo nastro finisce qui.», con la strada per tornare al campionario.
PerchéIl taglio obliquo è una delle finiture che ALV vende, ed è il segno di tutta la pagina: sui tasti, sulle etichette, e qui sulla pagina che non c’è.