Per OTO Agency · Come è fatta
Ho rifatto la home di Filippi 1971. Non per rubartelo: per farti vedere come puoi farlo tu.
Il sito di Filippi 1971 l’avete messo online ad agosto 2025, e un anno dopo, a settembre, l’avete raccontato nel vostro caso studio. È costruito per i vincoli che un’azienda così ha davvero: cinque lingue collegate bene fra loro, WordPress con un costruttore visuale perché pagine e blog si aggiornino senza uno sviluppatore, e una strategia SEO in Germania che, con ventuno articoli in tedesco, ha portato otto parole chiave in prima pagina su Google, dove l’obiettivo era cinque. È la parte difficile, e funziona. E Lighthouse gli dà 100 su 100 in accessibilità.
E dentro c’è il materiale che serve: le foto dei settori, gli interni di camper e di barche; i pannelli esplosi strato per strato; il rosso e il corsivo del marchio; i sei referenti per Paese e settore della pagina Contatti. Sono partito da lì. Foto, testi e numeri vengono dal sito di oggi, dai PDF e dai video di Filippi, e niente è inventato. Quello che rallenta la pagina non è un’idea sbagliata: è quello che il costruttore visuale si porta dietro fino al telefono. Potevo scriverlo in una mail, ma a parole non convinco nessuno, me compreso: quindi l’ho fatta.
I numeri
Il prima e il dopo, dal telefono
Lighthouse, dal telefono
Lo strumento di Google, quello di PageSpeed, col profilo del telefono: simula un telefono di fascia media su una rete lenta, per questo i suoi secondi somigliano a quelli della rete lenta qui sotto. Due passaggi: del sito di oggi tengo il migliore, dell’anteprima il peggiore.
- Il punteggio delle prestazioni
- 96 su 100
- invece di 29
- La prima cosa che si vede (FCP)
- 1,2 s
- invece di 11,7 s
- La parte principale della prima schermata (LCP)
- 2,6 s
- invece di 18,5 s
Come un telefono, in rete vera
Chrome che apre la pagina come un telefono senza cache, col processore rallentato quattro volte e la rete limitata davvero: tre giri, e la mediana.
- La parte principale della prima schermata (LCP), in 4G
- 0,94 s
- invece di 4,92 s
- La stessa, in una rete lenta
- 2,62 s
- invece di 19,56 s
- Il peso al primo caricamento
- 406 KB
- invece di 3.175 KB
- Richieste a servizi di terzi, all’apertura
- 0
- invece di 6 (iubenda e Google)
Misurato il 20 ottobre 2026 dalla stessa macchina, sul sito di oggi e sull’anteprima pubblicata. Quelli di Lighthouse li rifai in un minuto su PageSpeed; quelli della sonda, a occhio, dal tuo telefono.
Perché oggi è lenta, in una riga: la pagina pubblica carica gli script dell’editor di WordPress (circa 1,3 MB che servono solo a chi scrive), venticinque risorse bloccano il disegno, e la foto d’apertura si scarica due volte, perché il precaricamento e lo sfondo la chiedono a due indirizzi diversi. Sono cose che dall’editor non si vedono: dal computer dell’ufficio la pagina sembra a posto, al telefono in 4G aspetta.
Le scelte
Che cosa ho cambiato, e perché
Chi arriva capisce dove è
Per Linus, il metodo con cui lavoro, la pagina è di chi la visita, e chi atterra si chiede prima di tutto se è nel posto giusto. Oggi la prima schermata dice «Passione, innovazione e precisione da oltre 50 anni»; qui dice che cosa fanno e per chi, con le parole che la gente cerca, sopra l’interno vero di un camper.
Si tocca invece di leggerla
Il «feel, don’t tell» di Linus, qui: il pannello si apre strato per strato con le stratigrafie vere della loro pagina dei pannelli, la Valle Imagna si disegna coi cinque stabilimenti, e tocchi un mobile e leggi che cosa fa Filippi per quel mobile.
La persona giusta in tre tocchi
Per un costruttore tedesco la persona con cui parlerà è l’agente. La rete completa c’era già, nella pagina Contatti: l’ho portata in home, a un tocco dalla prima schermata. Chi visita risponde a «Dove lavori?» e «Per che cosa?», e la scheda gli dà il nome, i recapiti e la fiera dove trovarlo.
Veloce perché leggera
Niente script dell’editor nella pagina pubblica, niente servizi di terzi, le foto alle misure in cui si vedono, una famiglia di caratteri sola, la loro: Raleway, in tre tagli da 20 KB. Senza terzi non serve nemmeno il banner dei cookie, e i numeri qui sopra li ho presi prima e dopo con gli stessi strumenti.
Quello che Google deve leggere
Il titolo in italiano, con le parole del mestiere e del luogo: oggi quello della pagina italiana è in inglese. I dati strutturati dell’azienda, con sede, stabilimenti, marchi, filiale e punti di contatto: oggi danno al sito e all’azienda il nome di partenza del tema, «WordPress Elementor Scaffold», che si sistema in due minuti. E i numeri delle macchine scritti nella pagina: oggi nell’HTML sono zero, perché li scrive il JavaScript dei contatori.
Funziona per tutti
Ogni comando è grande almeno 44 pixel e ogni testo almeno 14, i contrasti sono misurati testo per testo, e la pagina funziona anche senza JavaScript: le scelte dei contatti, il pannello e i colori di VittEr sono fatti di solo HTML e CSS. Come fai una cosa è come fai ogni cosa, anche la pagina che non c’è: la 404 cerca con te.
Il materiale c’era già
Linus comincia dal rilievo: il marchio vettoriale l’ho estratto dalla loro scheda tecnica in PDF, il ciclo video della valle viene da uno dei tre film che hanno pubblicato su YouTube a luglio, le stratigrafie dalla pagina dei pannelli, i quindici colori di VittEr dai campioni del loro sito, la carta da OpenStreetMap. Quello che non ho trovato non l’ho scritto: è finito in un elenco di domande.
Quanto tempo, e con che cosa
Una sera
Il 20 ottobre 2026, dalle 21:19 alle 23:27, poco più di due ore fino all’anteprima pubblicata. L’ha costruita un agente di intelligenza artificiale, Claude, che lavora con Linus, il metodo con cui faccio i siti: prima ha smontato e misurato il sito di oggi, poi ha scritto l’analisi e il progetto, poi le prove, che una regia ha giudicato sugli scatti prima che la pagina si vestisse. Un secondo agente, che non l’ha costruita, la collauda, e i numeri della pagina sono riletti sulla fonte il giorno della pubblicazione.
Le ore sono degli agenti. Le mie stanno prima: nel metodo, che è lo stesso per tutte le pagine che faccio, e nel mandato. Il codice è Next.js, pubblicato su Vercel: nessun tema, nessun plugin, nessun servizio esterno. Il materiale è tutto pubblico: il sito di oggi, i loro PDF, i loro video su YouTube, OpenStreetMap.
Senza il costruttore visuale, chi aggiorna fiere, referenti e notizie? Nell’anteprima non serve, quindi non c’è; se il sito andasse online si aggiungerebbe un gestore dei contenuti che si usa dalla pagina stessa, e quelle cose le cambierebbero loro, senza uno sviluppatore.
Per il tuo cliente
Che cosa puoi portare a Filippi
- La home e le pagine dei settori rifatte così, nelle cinque lingue che il sito ha già e con gli stessi indirizzi, perché il lavoro fatto su Google in Germania resti dov’è.
- Il blog in cinque lingue può restare su WordPress, così com’è: le pagine nuove gli stanno davanti, e ne mostrano le ultime notizie.
- Le misure senza terzi: parole chiave e visite da Google le dà Search Console, che non carica niente nella pagina, e le visite del sito si contano dal server, senza cookie e senza banner.
- Il pannello che si apre come strumento di vendita: la stessa animazione sul tablet dello stand, al Caravan Salon di Düsseldorf o a SICAM.
- I tre film pubblicati a luglio messi al lavoro: qui ce n’è un ciclo di sei secondi, e c’è posto per gli altri due.
Il 29 ottobre
Come si fa, dal vivo
Giovedì 29 ottobre, dalle 14 alle 17, Marco Santonocito, che è stato Head of Product in Talent Garden, e io passiamo il pomeriggio con le agenzie in un’aula della 24ORE Business School, a Milano: l’intelligenza artificiale per fare meglio, non solo di più. Organizza Alleniamo Imprese, la scuola ci ospita.
Il programma del pomeriggio(si apre in un’altra scheda)
Federico Vitiello