Au P'tit Zinc
95 op performance en 100 op toegankelijkheid voor een site vol foto's: dat was de inzet.
- Jaar
- 2026
- Ontwerp
- 3 weken
- Stack
- Next.js · React · Tailwind · Vercel
- Design
- Ontwikkeling
- Lokale SEO
- Fotografie (art direction)
Demoversie door Kayzen Web online gezet op een Vercel-adres; het definitieve domein is eigendom van de klant.
- Lighthouse-performance
- 95/100
- Lighthouse-toegankelijkheid
- 100/100
- Lighthouse-SEO
- 100/100
- permanente acties op mobiel
- 3
Wat er opgelost moest worden.
De context
Au P'tit Zinc is een bistro aan de quai Pierre-Scize, Lyon 5, geopend in 1992. Een buurtadres dat evenzeer bekendstaat om de sfeer laat op de avond als om de keuken.
De beperking
De zaak verkoopt zich via de sfeer, dus via de foto: warm licht, de toog, een volle zaal. Maar een fotogerichte restaurantwebsite is bijna altijd traag, en de helft van de bezoeken komt van een telefoon, buiten, om half acht 's avonds, om het adres te vinden en te reserveren.
Het antwoord
Beleving en snelheid laten samengaan. Het eerste scherm toont een brede afbeelding met laadprioriteit, al het overige wordt uitgesteld. De drie echte acties — reserveren, bellen, route — zijn vanaf elke plek op de pagina met één gebaar bereikbaar.
De scores bij oplevering.
Lighthouse-scores van de website in productie. Wij publiceren ze zoals ze zijn: als een score laag is, staan de oorzaak en het verbeterplan hieronder beschreven in plaats van verzwegen.
Elke keuze, en de reden erachter.
Warm donker thema
Houtskoolkleurige achtergrond, koperen accenten, foto's met een amberkleurige ondertoon. Donker is hier geen modegril: het geeft het licht van de zaak weer op het moment dat men besluit erheen te gaan.
Drie acties, altijd binnen bereik
Reserveren, bellen, route. Een vastgezette actiebalk op mobiel houdt ze tijdens het hele scrollen bereikbaar. Het is het enige waarvoor 80 % van de bezoekers komt.
Een carrousel zonder valkuil
Automatisch doorlopen standaard uitgeschakeld, bediening met het toetsenbord, pauze bij hover en volledige stop als de gebruiker om verminderde beweging heeft gevraagd. Een carrousel die vanzelf doorloopt, is de meest gehate component van het web.
Kleurenpalet van het project
Houtskool
#171412
Achtergrond
Koper
#B4763A
Accenten, actie
Ivoor
#F3EDE4
Tekst
Flessengroen
#2E4034
Secundaire secties
Typografisch systeem
Koppen
Playfair Display
Lopende tekst
Inter 400
Een serif met sterk contrast voor de naam en de koppen — de geest van de toog — en een neutrale schreefloze letter voor de kaart, die in één seconde leesbaar moet blijven.
Wat er onder de motorkap zit.
- Next.js
- React
- Tailwind
- Vercel
Eén enkele prioritaire afbeelding
De afbeelding van het eerste scherm wordt vooraf geladen en via attributen gedimensioneerd; alle andere worden uitgesteld. Zo haalt een fotowebsite 95 op performance.
Moderne formaten en passende afmetingen
Elke foto bestaat in meerdere breedtes, geserveerd via srcset. Een telefoon downloadt niet de desktopafbeelding — dat is de grootste bron van verspilling op restaurantwebsites.
Reserveren uitbesteed, maar uitgesteld
De reserveringsmodule van een externe aanbieder weegt enkele honderden kilobytes. Ze wordt pas geladen bij een klik op “Reserveren”, niet bij het laden van de pagina.
Hoe de website vindbaar wordt.
Zoekopdrachten in de buurt
“Bistrot Lyon 5”, “restaurant quai Pierre-Scize”, “waar eten in Vieux Lyon 's avonds”. Dit zijn zoekopdrachten met een directe beslissing, vaak gedaan op minder dan een kilometer van het restaurant.
Volledige Restaurant-markering
JSON-LD Restaurant met adres, coördinaten, openingstijden, prijsklasse, soort keuken en een link naar de kaart. Het is dit blok dat Google overneemt in het lokale paneel.
Consistent met het Google-bedrijfsprofiel
Naam, adres en telefoonnummer tot op het teken identiek tussen de website en het bedrijfsprofiel. Een afwijking, zelfs in de interpunctie, verzwakt de lokale vindbaarheid.
Bruikbaar voor iedereen.
Sinds juni 2025 verplicht de Europese toegankelijkheidsrichtlijn (European Accessibility Act) digitale toegankelijkheid voor een groot deel van de onlinediensten. Wij regelen dat in het ontwerp, niet achteraf.
100/100 op een donkere achtergrond
De valkuil van het donkere thema is grijze tekst op houtskool. Alle paren zijn boven 4,5:1 gebracht, en teksten op een foto krijgen een sluier die dicht genoeg is om de drempel te halen, welke afbeelding het ook is.
Wat er is opgeleverd.
- Home
- De kaart
- De zaak
- Reserveren
- Bereikbaarheid en openingstijden
- Contact
Het verloop van het project.
Art direction foto
Selectie en retouche: de website is zoveel waard als zijn beelden.
Design
Donker thema, actiebalk, beheerste carrousel.
Ontwikkeling
Prioritaire afbeelding, srcset, uitgestelde reservering.
Lokale SEO
Restaurant-markering, consistentie met het Google-bedrijfsprofiel.
Wat ons vaak gevraagd wordt.
Andere projecten
AVG/GDPR-compliance & SaaSKonsent by Kayzen
Een bannerleverancier die banners audit, is rechter en partij: onafhankelijkheid wás het product.
Offensieve cybersecurity & SaaSSentinel by Kayzen
Een securityproduct verkopen aan engineers: elke bewering moest aantoonbaar zijn.
Data & WeerdienstMétéo Climat France
358 indexeerbare pagina's, een geanimeerde kaart over 72 tijdstappen — en geen enkele regel framework.
Hetzelfde niveau van zorg, voor uw website.
Gratis audit van uw huidige website, offerte binnen 24 uur en een schriftelijke onderbouwing — zoals die u net hebt gelezen. Betaling in drie termijnen zonder extra kosten; lokale subsidies gecontroleerd vóór ondertekening.