Velocità mobile hotel: LCP, CLS, INP e booking widget
Perché conta per un hotel
L'ospite è su 4G, in viaggio, con poca pazienza. Tre secondi di caricamento e chiude. Booking si apre in un secondo.
Le tre metriche Core Web Vitals
LCP misura quanto impiega la foto hero a renderizzarsi. CLS misura quanto si sposta il layout mentre l'utente sta per cliccare. INP misura la reattività del sito ai clic. Per ognuna: soglie Google, cause specifiche per siti hotel, soluzioni concrete.
Le cause più frequenti sui siti hotel
Hero image da 4MB. Gallery in JPEG non compresso. Slider JS con quattro librerie. Booking widget in iframe sincrono. Si ripetono sempre le stesse.
Come misurare gratis
PageSpeed Insights dà LCP, CLS e INP in trenta secondi. Come leggere i risultati senza impazzire.
Sul 4G in autostrada, il sito hotel lento non esiste
Luglio. Un ospite sta guidando verso Bibione con la famiglia. La moglie apre il sito dell'hotel per controllare le indicazioni. La foto hero inizia a caricarsi, lentamente, a strisce. Quattro secondi. Cinque. Chiude. Apre Booking. La scheda dell'hotel è già lì, in meno di un secondo. Ottimizzata, funziona su qualsiasi connessione, su qualsiasi telefono.
Non è un caso estremo. È lo scenario normale per un hotel al mare in estate: traffico intenso, connessione variabile, ospiti in movimento. Vale per chi cerca un hotel sulle Dolomiti con tre tacche di segnale, o per chi controlla la disponibilità dal treno verso Mestre. Il sito lento non perde punti, non li ottiene neanche.
LCP hotel: quanto impiega la foto hero a comparire
LCP, Largest Contentful Paint. Quanto tempo impiega l'elemento più grande nella schermata iniziale a renderizzarsi completamente. Per quasi tutti i siti hotel, quell'elemento è la foto hero. L'esterno dell'hotel, la piscina, il panorama sulle Dolomiti.
Le soglie Google:
- ≤2,5 secondi, buono
- 2,5-4 secondi, da migliorare
- ≥4 secondi, scarso
Una hero image da 4MB in JPEG su connessione 4G media porta il LCP a 6-8 secondi. Stessa immagine in WebP a 280KB: LCP sotto i 2 secondi. Stessa foto, stessa qualità visiva, peso 15 volte inferiore. Il LCP è la metrica che l'ospite percepisce direttamente. «Il sito si apre lento» non è un'impressione vaga, è LCP alto.
CLS hotel: il layout che si sposta mentre l'ospite sta per prenotare
CLS, Cumulative Layout Shift. Misura quanto gli elementi della pagina si spostano durante il caricamento. L'ospite vede il pulsante «Invia richiesta». Sta per cliccare. Un'immagine si carica sopra, tutto scende di 200 pixel. Il tap finisce sul link sbagliato.
Soglia buona: ≤0,1. Sopra 0,25 è considerato scarso.
Le cause più comuni su siti hotel:
- Immagini senza dimensioni nel codice. Se il tag
non ha width e height, il browser non sa quanto spazio riservare prima che l'immagine arrivi. Quando arriva, spinge tutto il contenuto sotto. Soluzione banale: aggiungere le dimensioni nel tag.
- Cookie banner che appare in ritardo. Il banner di consenso si materializza dopo due secondi e sposta l'intera pagina verso il basso. Si risolve riservando lo spazio nel layout prima che appaia.
- Booking widget caricato tardi. L'iframe del motore di prenotazione arriva dopo il resto della pagina e inserisce un blocco dove prima non c'era niente. Tutto quello sotto si sposta.
INP hotel: la pausa che l'ospite percepisce come lag
INP, Interaction to Next Paint. Ha sostituito FID come metrica Core Web Vitals ufficiale da marzo 2024. Misura quanto impiega la pagina a rispondere dopo un clic, un tap, una selezione.
Soglie:
- ≤200ms, buono
- 200-500ms, da migliorare
- ≥500ms, scarso
Sul sito hotel si manifesta così: l'ospite clicca su «Camere». La pagina impiega 600ms a rispondere. Non sembra molto, ma su mobile, nel momento in cui l'ospite sta valutando se restare sul sito o tornare a Booking, quella pausa erode la fiducia.
La causa principale è il JavaScript pesante. Script di terze parti che girano sul thread principale del browser: booking engine, chat live, analytics, social feed, cookie manager. Ognuno occupa il processore del telefono. Quando l'ospite clicca, il browser sta ancora elaborando.
Soluzione di base: audit degli script di terze parti. Rimuovere quelli non essenziali. Caricare gli altri con attributo async o defer, invece che in modo sincrono.
LCP, CLS e INP: come Google misura l'esperienza del sito hotel
LCP, CLS e INP sono le tre gambe della stessa valutazione. Un sito può avere LCP ottimo, immagini ben ottimizzate, ma CLS alto per il cookie banner e INP scarso per troppi script JS attivi in contemporanea.
Google le valuta insieme nell'esperienza della pagina, come segnale di ranking dal Page Experience Update del 2021. Non serve la perfezione su tutte e tre. Serve uscire dalla zona rossa su tutte e tre. Il sito pronto per hotel di montagna che vedi qui ha camere, gallery, pacchetti e servizi. Esattamente il tipo di pagina che diventa un camion se immagini e script partono tutti insieme.
Le quattro cause di lentezza che si ripetono sui siti hotel italiani
Dopo aver analizzato siti hotel in Veneto, le cause di lentezza tornano sempre uguali.
Le più frequenti:
- Hero image non compressa, foto dell'esterno caricata direttamente dal fotografo, 4,2MB in JPEG
- Gallery senza lazy loading, venti immagini che si caricano tutte all'apertura, anche quelle che l'ospite non vedrà mai
- Slider/carosello JS, il plugin porta con sé una o due librerie JavaScript pesanti, causa INP alto e spesso CLS
- Hero video come sfondo, trenta secondi di video 1080p; su desktop con fibra regge, su 4G non si carica prima che l'ospite abbia chiuso la scheda
Un caso concreto sul primo punto: conversione in WebP più resize a 1600px. Il file da 4,2MB scende a 230KB. Il LCP passa da 7 secondi a 1,8.
Questi quattro problemi coprono l'80% dei casi che vediamo. Per capire come strutturare un sito hotel veloce già in fase di costruzione: un sito web per hotel veloce da mobile.
Se la lentezza nasce da tema grafico, plugin, struttura vecchia e codice difficile da sistemare, non basta comprimere le immagini: può servire il rifacimento di un sito web lento.
Gallery fotografica dell'hotel: ottimizzare le immagini senza perdere qualità
La gallery è il cuore del sito hotel, e il principale rischio per la performance.
Il formato giusto è WebP. Non JPEG, non PNG. WebP pesa il 25-35% in meno di JPEG a parità di qualità visiva. Un file da 2MB in JPEG diventa 1,2-1,4MB in WebP. Su venti foto, significa 15-20MB in meno caricati a ogni apertura della pagina.
Per le dimensioni, ≥1200px sul lato lungo è sufficiente. Non serve l'originale da 6000px uscito dalla macchina fotografica, nessun ospite lo vedrà a quella risoluzione su uno schermo mobile.
L'attributo width e height su ogni immagine nel codice serve per il CLS: il browser sa quanto spazio riservare prima che l'immagine arrivi, niente spostamenti di layout a sorpresa.
Per sapere quali foto usare e come organizzare la pagina camere: gallery e foto senza appesantire.
Il booking widget dell'hotel: quando aiuta e quando affossa la performance
Un booking engine ben implementato si carica in modo leggero. Uno mal configurato è tra i peggiori nemici della performance.
Il problema tecnico: molti widget per hotel italiani vengono distribuiti come iframe con script JavaScript caricati in modo sincrono. Il browser aspetta che quello script finisca prima di rendere il resto della pagina. Se lo script impiega 2 secondi, il sito aspetta 2 secondi.
La soluzione non è necessariamente cambiare booking engine. È caricare lo script con attributo async o defer, così il browser non si blocca. O, in alcuni casi, caricare il widget solo quando l'utente clicca su un pulsante dedicato, il pattern «inizia la prenotazione».
Per strutture più piccole dove il booking engine è overengineering: una form di richiesta semplice non carica script esterni, non causa CLS, non impatta l'INP. Per scegliere il meccanismo di conversione giusto in base alle dimensioni della struttura: widget di prenotazione e velocità.
Come misurare la velocità del sito hotel: tre strumenti gratuiti
Non serve essere sviluppatori. Servono dieci minuti e l'URL del sito.
PageSpeed Insights (pagespeed.web.dev). Inserisci l'URL, seleziona mobile. In trenta secondi hai LCP, CLS e INP con le soglie colorate e un elenco di suggerimenti specifici. Ci sono due sezioni, «Dati di campo» (esperienza reale degli utenti, basata su Chrome UX Report) e «Dati di laboratorio» (test simulato in condizioni ideali). I dati di campo sono più affidabili. Il dato di laboratorio può sembrare migliore perché non riproduce la variabilità reale della rete.
Google Search Console → Esperienza della pagina. Se il sito è registrato in Search Console, questa sezione mostra l'andamento dei Core Web Vitals nel tempo per tutto il sito. Utile per verificare se un'ottimizzazione ha avuto effetto o se un aggiornamento ha peggiorato qualcosa.
Web Vitals Extension per Chrome. Estensione gratuita: mentre navighi il sito, mostra LCP, CLS e INP in tempo reale nell'angolo dello schermo. Utile per testare pagine specifiche, la pagina camere, la pagina offerte, non solo la home.
Regola pratica: testa sempre da mobile, non da desktop. E testa la pagina camere, non solo la home, è quasi sempre quella con più immagini e più script attivi.
Domande frequenti
Domande frequenti sulla velocità mobile per siti hotel
Il mio sito va bene su desktop ma è lento su mobile. Perché?
Desktop e mobile sono ambienti diversi. PageSpeed Insights testa con una connessione 4G simulata e un dispositivo di fascia media, non con la fibra e il computer del grafico che ha costruito il sito. Il problema più comune è che il sito è stato testato solo dal browser in modalità responsive, che non simula la banda ridotta né la CPU limitata di un telefono reale.
Costa molto ottimizzare la velocità di un sito hotel?
Dipende interamente da dove si parte. I problemi più comuni, hero image non compressa, gallery senza lazy loading, script sincroni, hanno soluzioni tecniche precise e non richiedono una riscrittura del sito. La conversione in WebP e il lazy loading si implementano in poche ore. Stimare il costo senza aver visto il sito non ha senso: un'analisi con PageSpeed prima è il punto di partenza.
Devo cambiare CMS per avere un sito hotel veloce?
No. La velocità dipende da come il CMS è configurato, non dal CMS in sé. WordPress con immagini da 4MB è lento. WordPress con immagini ottimizzate e cache configurata è veloce. Il CMS è un contenitore, quello che conta è come è stato costruito e cosa ci è stato messo dentro.
I Core Web Vitals influenzano davvero il posizionamento su Google?
Sì, dal Page Experience Update del 2021. Non sono il fattore dominante, un sito con contenuto rilevante e link autorevoli può rankare anche con vitals mediocri. Ma a parità di altri segnali, un sito nella zona verde su LCP, CLS e INP può avere un vantaggio, soprattutto perché offre un'esperienza migliore all'ospite mobile. Per un hotel che compete su ricerche locali e brand search, la differenza può vedersi soprattutto nel comportamento degli utenti: meno attesa, meno abbandoni, più richieste completate.
Cosa guardo per prima cosa se PageSpeed dà un punteggio basso?
In questo ordine:
- LCP, qual è l'elemento che lo causa? Quasi sempre la hero image. Formato JPEG o WebP? Quanto pesa in KB?
- Render-blocking resources, script o CSS caricati in modo sincrono che bloccano la pagina prima che si renda
- CLS, ci sono immagini senza attributi width e height? Il cookie banner è incluso nel layout iniziale?
- INP, quanti script di terze parti girano sulla pagina? Booking engine, chat, analytics, social widget
Con che frequenza devo controllare i Core Web Vitals?
Dopo ogni aggiornamento significativo, nuove foto, nuovi plugin, cambio del booking engine. E almeno una volta a stagione: i picchi di traffico estivo possono rivelare problemi che non si vedono in bassa stagione. Google Search Console aggiorna i dati di campo ogni 28 giorni, quindi un controllo mensile è sufficiente in condizioni normali.
Una cosa da dire chiaramente sulla velocità dei CMS
Drupal non è lento. È lento se mal configurato, come qualsiasi CMS. Con cache Varnish, aggregazione CSS/JS e immagini ottimizzate via Image API, un sito Drupal per hotel compete con qualsiasi altra piattaforma sul mercato.
Il problema quasi sempre non è il CMS, è come è stato costruito.
E non promettiamo «sito dieci volte più veloce»: spieghiamo cosa rallenta e cosa cambia se lo sistemiamo. Il risultato dipende da dove si parte.
Quando costruiamo un sito hotel in Drupal, queste scelte non arrivano alla fine come “ottimizzazione”: entrano nella struttura della pagina. Formati immagine, lazy loading, cache, peso dei widget esterni, ordine degli script. La velocità non si sistema con un plugin. Si progetta prima.
Ho analizzato siti hotel con PageSpeed score di 18 su 100 su mobile. La causa era sempre la stessa: hero image da 5MB in JPEG, gallery senza lazy loading, slider con tre librerie JS. Non è cattiva volontà di chi ha costruito il sito, è che nessuno aveva spiegato perché quelle scelte hanno effetti concreti sull'ospite che aspetta che la pagina si apra.
Altri articoli sul sito web per hotel
- Il sito del tuo hotel è a norma? CIN, dati obbligatori e accessibilità
- SEO locale per hotel: Google Maps, brand search e zone senza pagine inutili
- Offerte stagionali e pacchetti hotel: come strutturarli senza creare confusione
- Il sito ufficiale di un hotel non deve sempre vendere diretto
- Recensioni, fiducia e FAQ nel sito hotel: cosa mostrare senza sembrare finti