Damien Mugnier
97, 100, 100, 100 : le sans-faute Lighthouse sur un site à forte densité photographique.
- Année
- 2026
- Conception
- 3 semaines
- Stack
- React · Vite · Tailwind · Vercel
- Design
- Développement
- Direction photo
- SEO local
Version de démonstration mise en ligne par Kayzen Web sur une adresse Vercel ; le domaine définitif appartient au client.
- performance Lighthouse
- 97/100
- accessibilité, bonnes pratiques, SEO
- 100/100
- image prioritaire, toutes les autres différées
- 1
Ce qu'il fallait résoudre.
Le contexte
Damien Mugnier est carreleur et maçon à Beauvallon, dans le sud-ouest lyonnais. Il travaille le carrelage grand format, le marbre, la pierre naturelle et les terrasses, sur une clientèle haut de gamme.
La contrainte
Le positionnement haut de gamme se prouve exclusivement par l'image : un carrelage grand format bien posé se voit dans les joints et les coupes, pas dans un texte. Il fallait donc un site très photographique — et l'on sait que c'est la recette d'un site lent.
La réponse
Traiter la performance comme une contrainte de conception plutôt que comme une optimisation finale. Chaque photographie a été retravaillée, recadrée et servie en plusieurs largeurs avant même l'intégration. Le résultat : 97 en performance sur un site dont le contenu est presque uniquement visuel — et le sans-faute sur les trois autres axes.
Les scores relevés à la livraison.
Scores Lighthouse du site en production. Nous les publions tels quels : quand l'un d'eux est bas, sa cause et son plan de correction sont écrits plus bas plutôt que passés sous silence.
Chaque parti pris, et sa raison.
Le matériau comme palette
Beige pierre, gris marbre, noir profond. La palette est prélevée sur les matériaux posés ; le site et les réalisations parlent la même langue.
Grandes images, cadrage serré
Les plans larges de pièce noient le travail. Les cadrages sont serrés sur les coupes, les joints et les raccords — là où se voit l'écart entre un poseur et un artisan.
Peu de texte, très bien écrit
Sur ce positionnement, un texte long dilue. Chaque page tient en quelques phrases précises, avec le vocabulaire exact des matériaux.
Palette du projet
Pierre
#D9CFC0
Fond, surfaces
Marbre gris
#7F8489
Structure
Noir profond
#151719
Texte, contraste
Laiton
#A3813F
Détails
Système typographique
Titrage
Cormorant Garamond 600
Texte courant
Inter 400
Une serif fine et haute pour le positionnement, une sans-serif discrète pour l'information. La typographie se met au service des photos, jamais l'inverse.
Ce qu'il y a sous le capot.
- React
- Vite
- Tailwind
- Vercel
Budget d'images fixé avant l'intégration
Un poids maximal par page a été défini au départ ; les images ont été préparées pour le tenir. C'est l'inverse de la démarche habituelle, où l'on optimise après avoir constaté la lenteur.
Chargement progressif systématique
Une seule image prioritaire, toutes les autres différées, dimensions déclarées pour n'avoir aucun décalage de mise en page.
Aucune bibliothèque d'animation
Les transitions sont en CSS pur. Sur un site où l'image porte tout, ajouter cent kilooctets de JavaScript d'animation aurait coûté les points de performance qui font la différence.
Comment le site se rend trouvable.
Requêtes de matériau
« Pose carrelage grand format Lyon », « marbre salle de bain sud-ouest lyonnais », « terrasse pierre naturelle ». Le client haut de gamme cherche un matériau, pas un métier.
Images décrites et nommées
Textes alternatifs descriptifs et noms de fichiers explicites. La recherche d'images est un canal réel sur les métiers de finition.
Utilisable par tout le monde.
Depuis juin 2025, l'European Accessibility Act impose l'accessibilité numérique à une large part des services en ligne. Nous la traitons à la conception, pas en rattrapage.
100/100 sur un site d'images
Chaque photo porte une description utile — matériau, format, pièce — plutôt qu'un texte alternatif vide ou dupliqué. Un site visuel n'est pas condamné à être inaccessible.
Ce qui a été livré.
- Accueil
- Carrelage grand format
- Marbre et pierre naturelle
- Terrasses
- Réalisations
- Devis
Le déroulé du projet.
Budget de performance
Poids maximal par page fixé avant l'intégration.
Direction photo
Sélection, cadrage serré, préparation multi-largeurs.
Design
Palette matériaux, texte court et précis.
Développement
CSS pur, chargement progressif, dimensions déclarées.
Ce qu'on nous demande souvent.
D'autres réalisations
Conformité RGPD & SaaSKonsent by Kayzen
Un éditeur de bandeau qui audite les bandeaux est juge et partie : l'indépendance était le produit.
Cybersécurité offensive & SaaSSentinel by Kayzen
Vendre un produit de sécurité à des ingénieurs : chaque affirmation devait être démontrable.
Data & Service météoMétéo Climat France
358 pages indexables, une carte animée sur 72 échéances — et pas une seule ligne de framework.
Le même niveau d'exigence, pour votre site.
Audit gratuit de votre site actuel, devis sous 24 h et un raisonnement écrit — comme celui que vous venez de lire. Paiement en trois fois sans frais, aides locales vérifiées avant signature.