Damien Mugnier
97, 100, 100, 100: l'en plein Lighthouse su un sito ad alta densità fotografica.
- Anno
- 2026
- Progettazione
- 3 settimane
- Stack
- React · Vite · Tailwind · Vercel
- Design
- Sviluppo
- Direzione fotografica
- SEO locale
Versione dimostrativa pubblicata da KAYZEN su un indirizzo Vercel; il dominio definitivo appartiene al cliente.
- performance Lighthouse
- 97/100
- accessibilità, best practice, SEO
- 100/100
- immagine prioritaria, tutte le altre differite
- 1
Cosa c'era da risolvere.
Il contesto
Damien Mugnier è piastrellista e muratore a Beauvallon, nel sud-ovest lionese. Lavora piastrelle di grande formato, marmo, pietra naturale e terrazze, per una clientela di fascia alta.
Il vincolo
Il posizionamento di fascia alta si dimostra esclusivamente con le immagini: una piastrella di grande formato posata bene si vede nelle fughe e nei tagli, non in un testo. Serviva quindi un sito molto fotografico, e si sa che è la ricetta di un sito lento.
La risposta
Trattare la performance come un vincolo di progettazione anziché come un'ottimizzazione finale. Ogni fotografia è stata rielaborata, ritagliata e servita in più larghezze prima ancora dell'integrazione. Il risultato: 97 in performance su un sito il cui contenuto è quasi solo visivo, e il punteggio pieno sugli altri tre assi.
I punteggi rilevati alla consegna.
Punteggi Lighthouse del sito in produzione. Li pubblichiamo così come sono: quando uno è basso, la causa e il piano di correzione sono spiegati più sotto invece di essere taciuti.
Ogni scelta di design, e il suo perché.
Il materiale come palette
Beige pietra, grigio marmo, nero profondo. La palette è presa dai materiali posati: il sito e i lavori parlano la stessa lingua.
Grandi immagini, inquadrature strette
Le inquadrature larghe di un ambiente annegano il lavoro. Le inquadrature sono strette su tagli, fughe e raccordi: è lì che si vede la differenza tra un posatore e un artigiano.
Poco testo, scritto molto bene
Con questo posizionamento, un testo lungo diluisce. Ogni pagina si regge su poche frasi precise, con il vocabolario esatto dei materiali.
Palette del progetto
Pietra
#D9CFC0
Sfondo, superfici
Marmo grigio
#7F8489
Struttura
Nero profondo
#151719
Testo, contrasto
Ottone
#A3813F
Dettagli
Sistema tipografico
Titoli
Cormorant Garamond 600
Testo corrente
Inter 400
Un serif sottile e slanciato per il posizionamento, un sans-serif discreto per l'informazione. La tipografia è al servizio delle foto, mai il contrario.
Cosa c'è sotto il cofano.
- React
- Vite
- Tailwind
- Vercel
Budget immagini fissato prima dell'integrazione
Un peso massimo per pagina è stato definito all'inizio; le immagini sono state preparate per rispettarlo. È l'opposto dell'approccio abituale, in cui si ottimizza dopo aver constatato la lentezza.
Caricamento progressivo sistematico
Una sola immagine prioritaria, tutte le altre differite, dimensioni dichiarate per non avere alcuno spostamento del layout.
Nessuna libreria di animazione
Le transizioni sono in puro CSS. Su un sito in cui l'immagine regge tutto, aggiungere cento kilobyte di JavaScript di animazione sarebbe costato proprio i punti di performance che fanno la differenza.
Come il sito si fa trovare.
Ricerche per materiale
«Pose carrelage grand format Lyon» (posa di piastrelle di grande formato), «marbre salle de bain sud-ouest lyonnais» (marmo per il bagno), «terrasse pierre naturelle» (terrazza in pietra naturale). Il cliente di fascia alta cerca un materiale, non un mestiere.
Immagini descritte e nominate
Testi alternativi descrittivi e nomi di file espliciti. La ricerca per immagini è un canale reale per i mestieri di finitura.
Utilizzabile da tutti.
Da giugno 2025 l'Atto europeo sull'accessibilità (European Accessibility Act) impone l'accessibilità digitale a una larga parte dei servizi online. La affrontiamo in fase di progettazione, non come rimedio a posteriori.
100/100 su un sito di immagini
Ogni foto ha una descrizione utile (materiale, formato, ambiente) invece di un testo alternativo vuoto o duplicato. Un sito visivo non è condannato a essere inaccessibile.
Cosa è stato consegnato.
- Home
- Piastrelle di grande formato
- Marmo e pietra naturale
- Terrazze
- Lavori realizzati
- Preventivo
Lo svolgimento del progetto.
Budget di performance
Peso massimo per pagina fissato prima dell'integrazione.
Direzione fotografica
Selezione, inquadrature strette, preparazione in più larghezze.
Design
Palette dei materiali, testo breve e preciso.
Sviluppo
Puro CSS, caricamento progressivo, dimensioni dichiarate.
Cosa ci chiedono spesso.
Altri lavori
Cybersicurezza e app multipiattaformaSésame
Un password manager che non può leggere le tue password: la prova era l'architettura.
Cybersicurezza e app webSésame Éclair
Un segreto, una lettura, zero tracce: la chiave non lascia mai il link, il server conserva solo un blocco illeggibile.
Conformità GDPR e SaaSKonsent by Kayzen
Un fornitore di banner che verifica i banner è giudice e parte: l'indipendenza era il prodotto.
Lo stesso livello di rigore, per il tuo sito.
Audit gratuito del tuo sito attuale, preventivo entro 24 ore e un ragionamento scritto, come quello che hai appena letto. Pagamento in tre rate senza interessi; agevolazioni locali verificate prima della firma.