Per Luca Bargigia
Ho rifatto la home dell’Hotel Montanara. 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, quella che firmi in fondo, «Website made with ♥ by Luca Bargigia». L’Hotel Montanara non sa niente di questa pagina: nessuno l’ha contattato.
Il sito che hai fatto per loro nel 2023, in WordPress con Divi e col motore di prenotazione Slope dell’albergo, ha cose che molti siti d’albergo non hanno: la prenotazione diretta in home, nel verde del sito; un servizio fotografico vero, di Roberto De Pellegrin, con le camere, la colazione, la terrazza e le persone; la storia della famiglia dal 1951-1952; e una promessa giusta nel titolo, «Come a casa, ma sulle Dolomiti». Ho tenuto quello che è loro: il segno delle tre cime, il verde, i caratteri dei titoli e del testo, le foto; i testi sono i loro, qua e là accorciati.
L’idea regge. Quello che oggi la tradisce, dal telefono, è il modo di caricare: per Lighthouse la prima foto dello slider arriva dopo quattordici secondi; il banner dei cookie copre quasi metà della prima schermata; appena si apre la pagina partono 29 richieste verso altri siti (caratteri, recensioni, statistiche, librerie); lo zoom è bloccato (Divi lo scrive di serie nel viewport), e a chi legge male toglie la lente. E le camere hanno le emoji al posto delle icone, che ogni telefono disegna a modo suo.
Il prima e il dopo, dal telefono
Su PageSpeed (Lighthouse, dal telefono)
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, invece di rallentarli davvero, e il voto oscilla di qualche punto: qui ci sono tutti e due i passaggi, presi nello stesso giro sulle due pagine.
- Il voto delle prestazioni, nei due passaggi
- 82 e 96 su 100invece di 39 e 58
- La prima schermata (LCP), nei due passaggi
- 2,4 e 2,8 sinvece di 14,6 e 21,6 s
In Chrome, come da un telefono, con la 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 Chrome. L’anteprima non carica statistiche, recensioni né banner dei cookie: sul sito vero si decidono con l’albergo.
- La prima schermata (LCP), in 4G
- 0,8 sinvece di 4,0 s
- La stessa, in una rete lenta
- 2,0 sinvece di 22,6 s
- Il peso al primo caricamento
- 366 KBinvece di 4 MB
- Le richieste ad altri siti
- 0invece di 29
- Quanto si sposta mentre carica (CLS)
- 0,00invece di 0,12
Misurato il 25/10/2026 sull’anteprima pubblicata fra le 13:51 e le 13:54, e sul sito di oggi alle 12:27 (peso e prima schermata con la rete rallentata) e fra le 13:56 e le 13:58 (Lighthouse). I numeri di PageSpeed li rifai in un minuto su pagespeed.web.dev; la differenza di quelli di Chrome la senti aprendo le due pagine dal tuo telefono.
Che cosa ho cambiato, e perché
La promessa, camminata
«Come a casa, ma sulle Dolomiti» oggi è il titolo della scheda del browser, e in pagina torna, senza il «ma», come titolo delle camere. Qui è la pagina: si apre in una camera doppia di legno, e scorrendo si cammina fino alla porta del balcone; dentro la porta compare la vista da un balcone dell’albergo sulle Pale, e quando le montagne hanno preso lo schermo arriva la seconda metà della frase. È il principio con cui lavoro, feel, don’t tell: la pagina fa vivere la promessa invece di scriverla. Sono due foto del servizio del 2023 (due camere diverse: quali guardano le Pale è una domanda per l’albergo), un foglio di stile e poche righe di script: niente librerie.
Le date al centro
La prenotazione diretta in home era la scelta giusta, e qui è il filo della pagina: «Le date» è l’unico tasto pieno della testata, a fine cammino entra «Scegliete le date», e si sceglie in tre tocchi: quanti siete nelle camere, poi l’arrivo e la partenza subito sotto. Il numero di persone sceglie anche la camera, e accende i posti letto dove sono nella foto. In anteprima il tasto finale non parte: sul sito vero porterebbe al motore dell’albergo, con le date già scritte se Slope le accetta da un link.
Il marchio, e le sue cifre
Il segno delle tre cime, tracciato dal file del logo, sta in testata, nel piede e nella pagina che non c’è. Il verde è quello del sito, dei tasti e del motore delle date; i caratteri sono quelli che il sito usa già, Tsukimi Rounded per i titoli (somiglia alla scritta del logo) e Poppins per il testo, serviti dal sito stesso. Le cifre arrotondate del Tsukimi contano tutto quello che conta: le persone, i posti letto accesi nella foto al posto delle emoji, i giorni, gli anni della storia.
Le foto, grandi
Molte foto del servizio di Roberto De Pellegrin oggi stanno in gallerie a miniature (la colazione, le pagine della terrazza e delle camere). Qui fanno la pagina: la camera e il balcone nell’apertura, le tre camere nel selettore, la colazione a tessere grandi. E la terrazza passa dal giorno alla sera mentre scorri, con due foto della stessa terrazza che il sito ha già.
Google e la condivisione
La descrizione per Google era già buona, e resta la loro, parola per parola; il titolo l’ho solo ritoccato, col nome del paese. Cambia quello che sta sotto: un titolo principale che oggi manca, e i dati strutturati di un albergo (le tre stelle, l’indirizzo, le 27 camere, le dotazioni, e B&B La Montanara come nome alternativo) al posto di quelli generici del plugin SEO; e l’anteprima del link col balcone sulle Pale.
La velocità, e chi legge male
La prima foto arriva per prima e ferma, le altre quando servono, nelle misure di ogni schermo. Con la pagina non parte nessuna richiesta verso altri siti: i caratteri sono in casa, e recensioni, chat e statistiche, sul sito vero, si decidono con l’albergo e si caricano al primo tocco o col consenso. Lo zoom è libero, ogni tasto è grande almeno 44 pixel, e con «riduci movimento» la pagina sta ferma e tutto il testo resta.
Due cose, intanto, si sistemano già domattina anche sul sito di oggi, senza aspettare il resto: togliere dal viewport maximum-scale=1.0, user-scalable=0, così chi legge male può ingrandire; e far portare «Prenota ora» dello slider al motore delle date, che sta poco sotto, invece che al modulo dei contatti in fondo alla pagina.
Quanto tempo, e con che cosa
Un pomeriggio, quello di domenica 25 ottobre: il lavoro è partito alle 12:18, ed era pubblicato alle 13:52. 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 prime schermate prima che si facesse il resto; un terzo, che non l’ha costruita, la collauda e rilegge ogni fatto sul sito di oggi. Il mio lavoro sta nel metodo che seguono. Il pomeriggio ha coperto la home, in italiano: le altre pagine portano a quelle di oggi.
Next.js, pubblicata su Vercel. Se diventa il sito vero, si aggiunge il gestore dei contenuti: l’albergo cambia da sé testi e foto dalla pagina stessa, con la cronologia di ogni modifica e senza poter rompere la grafica. In questa anteprima non c’è. Il tempo vero, adesso, sta nelle decisioni: che cosa deve sentire chi arriva, che cosa togliere, che cosa appartiene soltanto a loro.
Che cosa puoi portare all’Hotel Montanara
- La home rifatta così, in italiano e in inglese come oggi.
- La prenotazione diretta al centro, col motore che l’albergo usa già: le date sotto il pollice in ogni pagina.
- Le camere col selettore delle persone anche nella loro pagina, con tutte le foto del servizio.
- La Terrazza Montanara con la sua pagina, dal giorno alla sera, e il numero per prenotarla.
- Le parole con cui si cerca un albergo lì: San Martino di Castrozza, le Pale, il centro del paese, in due lingue.
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.
Il programma del pomeriggio (si apre in un’altra scheda)
Federico Vitiello
Alleniamo Imprese: formazione sull’intelligenza artificiale per le imprese