Damien Mugnier
97, 100, 100, 100: la puntuación perfecta en Lighthouse en una web con gran densidad fotográfica.
- Año
- 2026
- Diseño
- 3 semanas
- Stack
- React · Vite · Tailwind · Vercel
- Diseño
- Desarrollo
- Dirección fotográfica
- SEO local
Versión de demostración publicada por KAYZEN en una dirección de Vercel; el dominio definitivo pertenece al cliente.
- rendimiento Lighthouse
- 97/100
- accesibilidad, buenas prácticas, SEO
- 100/100
- imagen prioritaria, todas las demás diferidas
- 1
Lo que había que resolver.
El contexto
Damien Mugnier es alicatador y albañil en Beauvallon, al suroeste de Lyon. Trabaja el azulejo de gran formato, el mármol, la piedra natural y las terrazas, para una clientela de alta gama.
La limitación
El posicionamiento de alta gama solo se demuestra con la imagen: un azulejo de gran formato bien colocado se ve en las juntas y en los cortes, no en un texto. Hacía falta, por tanto, un sitio muy fotográfico, y ya se sabe que esa es la receta de un sitio lento.
La respuesta
Tratar el rendimiento como una restricción de diseño y no como una optimización final. Cada fotografía se retocó, se recortó y se preparó en varios anchos antes incluso de la integración. El resultado: 97 en rendimiento en un sitio cuyo contenido es casi exclusivamente visual, y la máxima puntuación en los otros tres ejes.
Las puntuaciones registradas en la entrega.
Puntuaciones Lighthouse del sitio en producción. Las publicamos tal cual: cuando una es baja, su causa y su plan de corrección se explican más abajo en lugar de silenciarse.
Cada decisión de diseño, y su porqué.
El material como paleta
Beige piedra, gris mármol, negro profundo. La paleta se toma de los materiales colocados; el sitio y los trabajos hablan el mismo idioma.
Imágenes grandes, encuadre cerrado
Los planos generales de una estancia diluyen el trabajo. Los encuadres se cierran sobre los cortes, las juntas y los remates, que es donde se ve la diferencia entre un instalador y un artesano.
Poco texto, muy bien escrito
Con este posicionamiento, un texto largo diluye. Cada página se resume en unas pocas frases precisas, con el vocabulario exacto de los materiales.
Paleta del proyecto
Piedra
#D9CFC0
Fondo, superficies
Mármol gris
#7F8489
Estructura
Negro profundo
#151719
Texto, contraste
Latón
#A3813F
Detalles
Sistema tipográfico
Titulares
Cormorant Garamond 600
Texto de lectura
Inter 400
Una serif fina y esbelta para el posicionamiento, una sans-serif discreta para la información. La tipografía se pone al servicio de las fotos, nunca al revés.
Lo que hay bajo el capó.
- React
- Vite
- Tailwind
- Vercel
Presupuesto de imágenes fijado antes de la integración
Se definió de entrada un peso máximo por página, y las imágenes se prepararon para respetarlo. Es lo contrario del enfoque habitual, en el que se optimiza después de constatar la lentitud.
Carga progresiva sistemática
Una sola imagen prioritaria, todas las demás diferidas, dimensiones declaradas para no tener ningún desplazamiento de la maquetación.
Ninguna librería de animación
Las transiciones son CSS puro. En un sitio en el que la imagen lo sostiene todo, añadir cien kilobytes de JavaScript de animación habría costado los puntos de rendimiento que marcan la diferencia.
Cómo se hace encontrar la web.
Búsquedas por material
«Pose carrelage grand format Lyon» (colocación de azulejo de gran formato), «marbre salle de bain sud-ouest lyonnais» (baño de mármol al suroeste de Lyon), «terrasse pierre naturelle» (terraza de piedra natural). El cliente de alta gama busca un material, no un oficio.
Imágenes descritas y nombradas
Textos alternativos descriptivos y nombres de archivo explícitos. La búsqueda de imágenes es un canal real en los oficios de acabado.
Utilizable por todo el mundo.
Desde junio de 2025, la Ley Europea de Accesibilidad (European Accessibility Act) exige la accesibilidad digital a buena parte de los servicios en línea. La abordamos desde el diseño, no como un parche posterior.
100/100 en un sitio de imágenes
Cada foto lleva una descripción útil (material, formato, estancia) en lugar de un texto alternativo vacío o duplicado. Un sitio visual no está condenado a ser inaccesible.
Lo que se entregó.
- Inicio
- Azulejo de gran formato
- Mármol y piedra natural
- Terrazas
- Trabajos realizados
- Presupuesto
El desarrollo del proyecto.
Presupuesto de rendimiento
Peso máximo por página fijado antes de la integración.
Dirección fotográfica
Selección, encuadre cerrado, preparación en varios anchos.
Diseño
Paleta de materiales, texto breve y preciso.
Desarrollo
CSS puro, carga progresiva, dimensiones declaradas.
Lo que nos preguntan a menudo.
Otros proyectos
Ciberseguridad y aplicación multiplataformaSésame
Un gestor de contraseñas que no puede leer sus contraseñas: la prueba era la arquitectura.
Ciberseguridad y aplicación webSésame Éclair
Un secreto, una lectura, cero rastro: la clave nunca sale del enlace y el servidor solo guarda un bloque ilegible.
Cumplimiento del RGPD y SaaSKonsent by Kayzen
Un proveedor de banners que audita banners es juez y parte: la independencia era el producto.
El mismo nivel de exigencia, para su web.
Auditoría gratuita de su web actual, presupuesto en 24 horas y un razonamiento por escrito, como el que acaba de leer. Pago en tres plazos sin intereses; ayudas locales verificadas antes de la firma.