Au P'tit Zinc
95 bei der Performance und 100 bei der Barrierefreiheit auf einer bildlastigen Website: Darum ging es.
- Jahr
- 2026
- Umsetzung
- 3 Wochen
- Stack
- Next.js · React · Tailwind · Vercel
- Design
- Entwicklung
- Lokales SEO
- Fotografie (Regie)
Demoversion, von Kayzen Web unter einer Vercel-Adresse veröffentlicht; die endgültige Domain gehört dem Kunden.
- Lighthouse-Performance
- 95/100
- Lighthouse-Barrierefreiheit
- 100/100
- Lighthouse-SEO
- 100/100
- dauerhafte Handlungen auf dem Smartphone
- 3
Was gelöst werden musste.
Der Kontext
Au P'tit Zinc ist ein Bistro am Quai Pierre-Scize in Lyon 5, geöffnet seit 1992. Eine Adresse im Viertel, bekannt für ihre Spätabendstimmung ebenso wie für ihre Küche.
Die Einschränkung
Der Ort verkauft sich über die Atmosphäre, also über das Foto: warmes Licht, Tresen, voller Saal. Eine fotolastige Restaurant-Website ist aber fast immer langsam, und die Hälfte der Besuche kommt vom Smartphone, draußen, um 19:30 Uhr, um die Adresse zu finden und zu reservieren.
Die Antwort
Immersion und Geschwindigkeit miteinander vereinen. Der erste Bildschirm zeigt ein breites Bild mit Ladepriorität, alles andere wird verzögert geladen. Die drei tatsächlichen Handlungen – reservieren, anrufen, Route – sind von jeder Stelle der Seite aus mit einer Geste erreichbar.
Die Werte bei der Auslieferung.
Lighthouse-Werte der Live-Website. Wir veröffentlichen sie unverändert: Ist einer niedrig, stehen Ursache und Korrekturplan weiter unten, statt verschwiegen zu werden.
Jede gestalterische Entscheidung – und ihr Grund.
Warmes dunkles Theme
Anthrazitfarbener Hintergrund, Kupferakzente, Fotos mit bernsteinfarbener Grundstimmung. Das Dunkle ist hier keine Mode: Es gibt das Licht des Ortes zu der Stunde wieder, in der man sich entscheidet hinzugehen.
Drei Handlungen, immer griffbereit
Reservieren, anrufen, Route. Eine fixierte Aktionsleiste auf dem Smartphone hält sie beim Scrollen jederzeit erreichbar. Das ist das Einzige, wofür 80 % der Besucher kommen.
Karussell ohne Falle
Automatischer Bildwechsel standardmäßig deaktiviert, Tastatursteuerung, Pause beim Überfahren und vollständiger Stopp, wenn der Nutzer reduzierte Bewegung eingestellt hat. Ein Karussell, das von selbst weiterläuft, ist die meistgehasste Komponente des Webs.
Farbpalette des Projekts
Anthrazit
#171412
Hintergrund
Kupfer
#B4763A
Akzente, Handlung
Elfenbein
#F3EDE4
Text
Flaschengrün
#2E4034
Sekundäre Bereiche
Typografisches System
Überschriften
Playfair Display
Fließtext
Inter 400
Eine kontrastreiche Serifenschrift für Namen und Titel – der Geist des Zinktresens – und eine neutrale Sans-Serif für die Speisekarte, die in einer Sekunde lesbar sein muss.
Was unter der Haube steckt.
- Next.js
- React
- Tailwind
- Vercel
Ein einziges priorisiertes Bild
Das Bild des ersten Bildschirms wird vorgeladen und per Attribut dimensioniert; alle anderen werden verzögert geladen. Das ermöglicht 95 in der Performance auf einer Foto-Website.
Moderne Formate und passende Größen
Jedes Foto existiert in mehreren Breiten, ausgeliefert über srcset. Ein Smartphone lädt nicht das Desktop-Bild herunter – die größte Verschwendungsquelle auf Restaurant-Websites.
Externes, aber verzögertes Reservierungsmodul
Das Reservierungsmodul eines Drittanbieters wiegt mehrere hundert Kilobyte. Es wird erst beim Klick auf „Reservieren“ geladen, nicht beim Laden der Seite.
Wie die Website gefunden wird.
Suchanfragen in der Nähe
„Bistro Lyon 5“, „Restaurant Quai Pierre-Scize“, „wo abends essen Vieux Lyon“. Das sind Suchanfragen mit sofortiger Entscheidung, oft weniger als einen Kilometer vom Restaurant entfernt gestellt.
Vollständiges Restaurant-Markup
JSON-LD Restaurant mit Adresse, Koordinaten, Öffnungszeiten, Preisklasse, Küchenrichtung und Link zur Speisekarte. Diesen Block übernimmt Google in das lokale Panel.
Übereinstimmung mit dem Google-Eintrag
Name, Adresse und Telefon zeichengenau identisch zwischen Website und Unternehmensprofil. Jede Abweichung, selbst bei der Zeichensetzung, schwächt das lokale SEO.
Für alle nutzbar.
Seit Juni 2025 schreibt der European Accessibility Act (EU-Richtlinie 2019/882) für einen großen Teil der Online-Dienste digitale Barrierefreiheit vor. Wir berücksichtigen sie schon bei der Konzeption, nicht erst im Nachhinein.
100/100 auf dunklem Hintergrund
Die Falle des dunklen Themes ist grauer Text auf Anthrazit. Alle Farbpaare wurden über 4,5:1 angehoben, und Texte auf Fotos liegen über einem Schleier, der dicht genug ist, um den Schwellenwert bei jedem Bild zu halten.
Was ausgeliefert wurde.
- Startseite
- Die Speisekarte
- Der Ort
- Reservieren
- Anfahrt und Öffnungszeiten
- Kontakt
Der Projektablauf.
Bildregie
Auswahl und Retusche: Die Website ist so gut wie ihre Bilder.
Design
Dunkles Theme, Aktionsleiste, kontrolliertes Karussell.
Entwicklung
Priorisiertes Bild, srcset, verzögerte Reservierung.
Lokales SEO
Restaurant-Markup, Übereinstimmung mit dem Google-Eintrag.
Was man uns oft fragt.
Weitere Referenzen
DSGVO-Compliance & SaaSKonsent by Kayzen
Ein Banner-Anbieter, der Banner prüft, ist Richter in eigener Sache: Unabhängigkeit war das Produkt.
Offensive Cybersicherheit & SaaSSentinel by Kayzen
Ein Sicherheitsprodukt an Ingenieure verkaufen: Jede Aussage musste nachweisbar sein.
Daten & WetterdienstMétéo Climat France
358 indexierbare Seiten, eine animierte Karte über 72 Zeitpunkte – und keine einzige Zeile Framework.
Derselbe Anspruch, für Ihre Website.
Kostenloses Audit Ihrer aktuellen Website, Angebot innerhalb von 24 Stunden und eine schriftliche Begründung – wie die, die Sie gerade gelesen haben. Zahlung in drei Raten ohne Aufpreis; lokale Förderungen werden vor der Unterschrift geprüft.