Au P'tit Zinc
95 en performance et 100 en accessibilité sur un site à dominante photo : c'était l'enjeu.
- Année
- 2026
- Conception
- 3 semaines
- Stack
- Next.js · React · Tailwind · Vercel
- Design
- Développement
- SEO local
- Photographie (direction)
Version de démonstration mise en ligne par Kayzen Web sur une adresse Vercel ; le domaine définitif appartient au client.
- performance Lighthouse
- 95/100
- accessibilité Lighthouse
- 100/100
- SEO Lighthouse
- 100/100
- actions permanentes sur mobile
- 3
Ce qu'il fallait résoudre.
Le contexte
Au P'tit Zinc est un bistrot du quai Pierre-Scize, Lyon 5, ouvert depuis 1992. Une adresse de quartier connue pour son ambiance de fin de soirée autant que pour sa cuisine.
La contrainte
Le lieu se vend par l'atmosphère, donc par la photo : lumière chaude, comptoir, salle pleine. Or un site de restaurant photographique est presque toujours lent, et la moitié des visites arrivent depuis un téléphone, dehors, à 19 h 30, pour trouver l'adresse et réserver.
La réponse
Faire coexister l'immersion et la vitesse. Le premier écran affiche une image large en priorité de chargement, tout le reste est différé. Les trois actions réelles — réserver, appeler, itinéraire — sont accessibles en un geste depuis n'importe quel endroit de la page.
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.
Thème sombre chaleureux
Fond charbon, accents cuivre, photographies à dominante ambrée. Le sombre n'est pas une mode ici : il reproduit la lumière du lieu à l'heure où l'on décide d'y aller.
Trois actions, toujours à portée
Réserver, appeler, itinéraire. Une barre d'action collante sur mobile les maintient accessibles pendant tout le défilement. C'est la seule chose que 80 % des visiteurs viennent faire.
Carrousel sans piège
Défilement automatique désactivé par défaut, contrôles au clavier, pause au survol et arrêt total si l'utilisateur a demandé un mouvement réduit. Un carrousel qui avance tout seul est le composant le plus universellement détesté du web.
Palette du projet
Charbon
#171412
Fond
Cuivre
#B4763A
Accents, action
Ivoire
#F3EDE4
Texte
Vert bouteille
#2E4034
Sections secondaires
Système typographique
Titrage
Playfair Display
Texte courant
Inter 400
Une serif à fort contraste pour le nom et les titres — l'esprit du zinc — et une sans-serif neutre pour la carte, qui doit rester lisible en une seconde.
Ce qu'il y a sous le capot.
- Next.js
- React
- Tailwind
- Vercel
Une seule image prioritaire
L'image du premier écran est préchargée et dimensionnée par attribut ; toutes les autres sont différées. C'est ce qui permet 95 en performance sur un site de photographies.
Formats modernes et tailles servies
Chaque photo existe en plusieurs largeurs, servies via srcset. Un téléphone ne télécharge pas l'image de bureau — c'est la première source de gaspillage sur les sites de restaurant.
Réservation déléguée mais différée
Le module de réservation d'un prestataire tiers pèse plusieurs centaines de kilooctets. Il n'est chargé qu'au clic sur « Réserver », pas au chargement de la page.
Comment le site se rend trouvable.
Requêtes de proximité
« Bistrot Lyon 5 », « restaurant quai Pierre-Scize », « où manger Vieux Lyon le soir ». Ce sont des requêtes de décision immédiate, souvent formulées à moins d'un kilomètre du restaurant.
Balisage Restaurant complet
JSON-LD Restaurant avec adresse, coordonnées, horaires, gamme de prix, type de cuisine et lien vers la carte. C'est ce bloc que Google reprend dans le panneau local.
Cohérence avec la fiche Google
Nom, adresse et téléphone strictement identiques au caractère près entre le site et la fiche établissement. Une divergence, même de ponctuation, affaiblit le référencement local.
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 fond sombre
Le piège du thème sombre est le texte gris sur charbon. Toutes les paires ont été remontées au-dessus de 4,5:1, et les textes posés sur photo passent par un voile assez dense pour tenir le seuil quelle que soit l'image.
Ce qui a été livré.
- Accueil
- La carte
- Le lieu
- Réserver
- Accès et horaires
- Contact
Le déroulé du projet.
Direction photo
Sélection et retouche : le site vaut ce que valent ses images.
Design
Thème sombre, barre d'action, carrousel maîtrisé.
Développement
Image prioritaire, srcset, réservation différée.
SEO local
Balisage Restaurant, cohérence avec la fiche Google.
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.