Apri il cofano del sito di Visit Torino di Sangro: perché è veloce, perché rispetta la tua privacy, perché funziona anche senza segnale, e chi l'ha costruito. Senza marketese — con numeri verificati.
Quando hai aperto questa pagina, il tuo browser ha scaricato circa 100 KB di font fatti su misura, ha letto un foglio di stile inline nel <head>, e ha mostrato la prima parola in meno di un secondo. Le immagini si sono caricate solo quando ne avevi bisogno. Nessun cookie ti ha seguito.
~100KBFont self-hosted
< 1sPrima parola visibile
0Cookie pre-consenso
§
Non è un caso. È una scelta.
Crediamo che un piccolo paese abruzzese meriti la stessa qualità tecnica di una piattaforma turistica internazionale — anzi, di più: perché ogni millisecondo in meno significa un visitatore in più che resta a leggere la storia del trabocco, dell'antica chiesa di San Salvatore, della Riserva del Lecceta.
↓
Questa pagina spiega come è fatto.
Misurato, non promesso
I numeri che contano
Otto metriche verificate sul sito reale. Le ottieni anche tu in dieci secondi: apri DevTools → Lighthouse, oppure misura su PageSpeed Insights di Google.
100/100SEO LighthousePunteggio massimo desktop e mobile su tutte le pagine.
100/100AccessibilitàLighthouse al massimo desktop e mobile. Target WCAG 2.1 AA, axe-core CI nightly, pagina /accessibilita su schema AGID.
100/100Best PracticesZero errori console, HTTPS strict, MIME corretti, no librerie con CVE note, no document.write.
91 / 75Performance desktop/mobileHome page. Su /dietro-le-quinte e archivi si arriva a 99/81. LCP reale-utente sotto i 500ms.
< 70 msTime To First ByteMisurato real-user. Cache edge Caddy (fast-path 1-3 ms su HIT) + Cloudflare CDN con stale-while-revalidate.
< 0.01CLS — Cumulative Layout ShiftSostanzialmente zero "salti" durante il caricamento. Mobile 0.002, desktop 0.011 (soglia "buono" Google: 0.1).
21Sezioni GDPR attiveConsensi, DSAR, RoPA, Data Breach.
0Tracker pre-consensoNessun cookie analytics/marketing o tracker terzo prima del tuo OK.
HTTP/3Protocollo modernoQUIC sul reverse proxy, connessioni più veloci e resilienti. PWA installabile su mobile con offline-first.
Sei scelte tecniche, sei vantaggi reali
Cosa rende questo sito diverso
Ogni punto è spiegato due volte: una versione semplice per chi vuole capire perché conta, e una versione tecnica per chi vuole sapere come funziona sotto.
Performance
Veloce davvero, anche in 4G
In parole semplici
Il sito si apre subito. Anche con connessione lenta in spiaggia o in una valle senza copertura piena. Non perdi un visitatore perché "caricava troppo".
Sotto il cofano
Caddy 2 con fast-path su cache hit (1-3 ms), CDN edge Cloudflare con stale-while-revalidate, immagini AVIF/WebP responsive via Optimole, font self-hosted Inter + Fraunces subsettati (–70% sul peso originale, italic preloaded), critical CSS inline nel <head>, chat-widget e cookie banner caricati al primo segnale di interazione utente, defer dei CSS below-fold, HTTP/3 + QUIC. Numeri misurati 18/05/2026 (mediana 6 run PSI): home Lighthouse desktop 91 / mobile 75, /dietro-le-quinte 99/81, LCP real-user 250-500 ms, CLS sotto 0.011 ovunque. Sul perché mobile non arriva a 100 vedi la nota tecnica subito sotto i numeri.
Nessun tracker di terze parti o identificatore persistente ti segue prima che tu dia il consenso. I cookie non tecnici si attivano solo se accetti, e il sito ricorda la tua scelta. Anche le richieste di accesso ai dati personali (art. 15-22) sono gestite da un modulo dedicato.
Sotto il cofano
Tracker analytics interno completamente consent-gated: niente sessionStorage / localStorage / chiamate al server finché non concedi il consenso "Statistiche" (gate sia lato JavaScript sia server-side via header X-VTDS-Consent). Plugin di compliance custom con 21 sezioni: Records of Consent (con IP/UA/User hash + URL pagina), Document Versioning, Script Blocker pre-consenso, Cookie Scanner automatico, RoPA art. 30, DSAR art. 15-22, Data Breach art. 33-34, TCF v2.2, bridge opzionali Complianz/Cookiebot/Iubenda. Google Consent Mode v2 implementato. Privacy & Cookie Policy elencano nel dettaglio ogni dimensione raccolta (lingua browser, regione CF, OS/browser family, segmenti comportamentali aggregati).
Hardenizzato come un servizio bancario, leggibile come un sito turistico
In parole semplici
Il sito accetta connessioni solo cifrate (HTTPS), è dietro la rete Cloudflare che blocca DDoS e bot prima ancora che raggiungano il server, e applica le mitigazioni OWASP per le 10 vulnerabilità più diffuse. L'accesso amministrativo richiede password forte + autenticazione a due fattori, gli URL di login sono nascosti, e i tentativi falliti vengono ban-nati automaticamente. Ogni deploy salva uno snapshot del database prima di partire e — se qualcosa va storto — il sistema torna da solo alla versione precedente in pochi secondi. Niente notti in piedi a riparare.
Sotto il cofano
TLS 1.3 + HSTS preload 2 anni + 0-RTT su Cloudflare; HTTP/3 con QUIC. Content-Security-Policy in modalità enforcement (whitelist esplicita per ogni origine, report-uri attivo). Header completi via Caddy: X-Content-Type-Options nosniff, X-Frame-Options SAMEORIGIN, Referrer-Policy strict-origin-when-cross-origin, Permissions-Policy bloccata su geolocation/camera/microphone, Cross-Origin-Opener/Resource-Policy isolate. WordPress hardened: DISALLOW_FILE_EDIT + DISALLOW_FILE_MODS (zero install/update plugin da UI), XML-RPC off, anti user enumeration REST + ?author=, Application Passwords disabilitati (eliminato vettore esfiltrazione token), Clear-Site-Data header al logout, generic login error, WPS Hide Login, Two Factor TOTP/email/U2F, Limit Login Attempts. PHP disable_functions su exec/shell_exec/system/popen/pcntl_exec (post-exploit shell rotta). fail2ban + ufw a livello VM. CSP report endpoint con rate limit + referer check (anti-flood). Rate limit applicativo su /track (120/min) e /search (60/min). File integrity check giornaliero. DB snapshot pre-deploy gz retention 7gg + smoke test post-deploy su /health (6×5s) + rollback automatico al commit precedente. Sensitive paths bloccati a Caddy: .git, .env, wp-config.php, xmlrpc.php, readme.html. /.well-known/security.txt pubblicato (RFC 9116).
Il sito si naviga con la sola tastiera, parla bene con gli screen reader (VoiceOver, NVDA, JAWS), rispetta chi ha bisogno di testo ingrandito, e mette in pausa le animazioni se l'utente lo chiede al sistema operativo. Ogni immagine ha una descrizione testuale alternativa, ogni link spiega dove porta, ogni grafico ha anche una tabella leggibile. La pagina dedicata segue lo schema AGID richiesto dalle pubbliche amministrazioni italiane.
Sotto il cofano
Target WCAG 2.1 AA (Direttiva UE 2016/2102, recepita in Italia dalla Legge Stanca aggiornata). Contrast ratio verificato ≥ 4.5:1 su tutta la palette adriatico/ocra/terra/lecceta. Skip-link al main content come primo elemento focusable. Focus-visible rinforzato (outline terra #a04030) — distingue navigazione mouse da tastiera. prefers-reduced-motion safety-net globale che annulla anche le animazioni di plugin terzi e blocchi Gutenberg. Alt fallback dinamico sulle immagini esterne (formato "<nome POI> — foto N"). Lightbox gallery con role=dialog + aria-modal + focus trap + Esc/Arrow keys. Calendar eventi con aria-expanded/aria-controls/aria-labelledby coerenti, navigazione mese con aria-live=polite. Dashboard Insight server-side: heatmap traffico con <caption> sr-only + scope=col/row + aria-label parlato ("Lunedì ore 14:00 — 42 sessioni"); grafici SVG con tabella SR-only collegata via aria-describedby (no canvas inaccessibile, nessun Chart.js); barre stacked con role=group + aria-label per gruppo e singola barra; emoji decorative nei heading wrappati in <span aria-hidden="true"> per non essere lette ad alta voce. Frecce di trend ↑↓→ con aria-label parlato ("in crescita: 18% rispetto al periodo precedente"). Form upload con <label for> esplicito + aria-describedby. CI nightly su axe-core + pa11y (WCAG2AA standard, 8 pagine pubbliche). Pagina /accessibilita allineata allo schema AGID, da validare tramite flusso istituzionale quando richiesto.
La mappa che vedi non costa nulla in licenze: usa OpenStreetMap, è italianissima nei dettagli (sentieri, trabocchi, vicoli), e non c'è il rischio di sorprese in bolletta quando il sito diventa popolare.
Sotto il cofano
Leaflet 1.9.4 + MarkerCluster 1.5.3 + Carto basemap + OpenStreetMap. Sei preset estetici (light/voyager/positron/satellite/outdoor), 18 campi popup card per ogni POI, geocoding Nominatim cachato con retry degradativo, polyline tratteggiata + marker numerati per gli itinerari, cluster colorato terra. Schema.org TouristAttraction auto-generato.
L'AI è usata con misura: "Tonino" parte dai contenuti pubblici e risponde localmente quando può, le audioguide leggono le storie con voce naturale, le traduzioni IT→EN→DE restano assistite e una dashboard interna suggerisce alla redazione quali contenuti mancano o vanno tradotti. L'AI assiste, non sostituisce: ogni risposta cita le fonti, e l'editor del Comune ha sempre l'ultima parola.
Sotto il cofano
Stack local-first: Tonino usa prima regole PHP, cache, POI/eventi/contatti WordPress e crawler settimanale del sito istituzionale; Groq Llama 3.1 8B è solo opt-in per domande libere, con budget giornaliero server-side e nessun fallback 70B/OpenAI. Web Speech API + OpenAI TTS opzionale solo per MP3 audioguide. DeepL Free via WP-CLI `vtds translate-missing` per i batch EN/DE. OG image SVG dinamica /wp-json/visit-tds/v1/og-image (CDN-cached 30gg). Insights Engine: dashboard wp-admin con gap analysis, query zero-result e suggerimenti AI.
Sui telefoni recenti puoi "scaricare" il sito come una vera app, e funziona offline. Utile quando sei in spiaggia, nella riserva o tra i vicoli del centro storico, dove la rete è capricciosa.
Sotto il cofano
Service Worker offline-first, manifest con shortcuts (mappa/itinerari/eventi), pagina /offline minimale, shortcode `[vtds_offline_download]` per precachare la app shell e 50 POI selezionati. Web Share API + Web Speech API (TTS "ascolta la storia") + .ics calendar export per gli eventi.
Cloud serio: Google Cloud + edge globale Cloudflare
In parole semplici
Il sito gira su Google Cloud Platform — la stessa infrastruttura che fa girare YouTube e Gmail. Davanti c'è Cloudflare con CDN in 300+ città del mondo: un visitatore dall'Olanda, dal Giappone o dalla California riceve l'HTML dal nodo più vicino, non dall'Italia. E se qualcosa si rompe in produzione, il sistema se ne accorge da solo e torna automaticamente alla versione precedente, in pochi secondi. Niente notti in piedi a riparare.
Sotto il cofano
Google Compute Engine (zona europe-west1-b) con Docker Compose multi-container: Caddy 2 (reverse proxy + ACME automatico) + WordPress PHP-FPM + MariaDB 11 + Redis 7 (object cache). Cloudflare CDN edge: HTTP/3 + QUIC, 0-RTT TLS 1.3, Brotli, Polish/Mirage Pro per immagini. CI/CD: GitHub Actions su push main → DB snapshot pre-deploy (gz, retention 7gg) → zero-downtime con `caddy reload` → smoke test su /health → rollback automatico al commit precedente se 6×5s falliscono. WP-Cron orchestrato via systemd timer (no thundering herd), Lighthouse CI + axe-core/pa11y nightly, file integrity check giornaliero, IndexNow per Bing/Yandex, monitoring esterno UptimeRobot/BetterStack.
Ogni voce ha molto altro da raccontare — architettura, scelte di stack, trade-off, numeri sul campo. Se stai pensando a un sito simile per il tuo Comune, regione o azienda, parliamone.
Nessun lock-in vendor. Tutto basato su standard aperti, codice ispezionabile, formati portabili. Se un domani cambi fornitore, puoi prenderti i contenuti e ripartire altrove.
WordPressCMS familiare per la redazione del Comune
La redazione del Comune e della Pro Loco aggiorna contenuti con il block editor di WordPress: lo stesso strumento che usa un redattore in tutto il mondo. Nessun page builder pesante, nessun corso di formazione di tre giorni. Aggiungere un POI o un evento è come pubblicare un articolo.
Nessun lock-in: contenuti in WordPress, esportabili in qualsiasi momento (XML, REST API).
REST API pronta: app mobili, totem, integrazioni esterne possono leggere i POI senza chiederci nulla.
SEO automatica: meta tag, Schema.org, sitemap e OG image dinamica generati a partire dal contenuto.
Traduzioni assistite: comando WP-CLI con DeepL per riempire le versioni EN/DE in pochi minuti.
Sviluppato da
Make it digital. Make it happen. Studio digitale di Roma. Dalla strategia al codice, dal brand all'AI: accompagniamo Comuni, regioni e operatori privati verso una consapevolezza più digitale, intercettando nuovi scenari e raggiungendo insieme gli obiettivi.