Au P'tit Zinc
95 en rendimiento y 100 en accesibilidad en una web dominada por la fotografía: ese era el reto.
- Año
- 2026
- Diseño
- 3 semanas
- Stack
- Next.js · React · Tailwind · Vercel
- Diseño
- Desarrollo
- SEO local
- Fotografía (dirección)
Versión de demostración publicada por KAYZEN en una dirección de Vercel; el dominio definitivo pertenece al cliente.
- rendimiento Lighthouse
- 95/100
- accesibilidad Lighthouse
- 100/100
- SEO Lighthouse
- 100/100
- acciones permanentes en el móvil
- 3
Lo que había que resolver.
El contexto
Au P'tit Zinc es un bistró del quai Pierre-Scize, en el distrito 5 de Lyon, abierto desde 1992. Un local de barrio conocido tanto por su ambiente a última hora como por su cocina.
La limitación
El local se vende por su atmósfera y, por tanto, por la foto: luz cálida, barra, sala llena. Pero la web de un restaurante muy fotográfico casi siempre es lenta, y la mitad de las visitas llegan desde un teléfono, en la calle, a las 19:30, para encontrar la dirección y reservar.
La respuesta
Hacer convivir la inmersión y la velocidad. La primera pantalla muestra una imagen amplia con prioridad de carga; todo lo demás se difiere. Las tres acciones reales (reservar, llamar, cómo llegar) están a un gesto desde cualquier punto de la página.
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é.
Tema oscuro y cálido
Fondo carbón, acentos cobre, fotografías de dominante ámbar. Aquí lo oscuro no es una moda: reproduce la luz del local a la hora en que se decide ir.
Tres acciones, siempre a mano
Reservar, llamar, cómo llegar. Una barra de acción fija en el móvil las mantiene accesibles durante todo el desplazamiento. Es lo único que viene a hacer el 80 % de los visitantes.
Un carrusel sin trampas
Avance automático desactivado por defecto, controles con teclado, pausa al pasar el ratón y parada total si el usuario ha pedido movimiento reducido. Un carrusel que avanza solo es el componente más universalmente detestado de la web.
Paleta del proyecto
Carbón
#171412
Fondo
Cobre
#B4763A
Acentos, acción
Marfil
#F3EDE4
Texto
Verde botella
#2E4034
Secciones secundarias
Sistema tipográfico
Titulares
Playfair Display
Texto de lectura
Inter 400
Una serif de alto contraste para el nombre y los títulos, con el espíritu del zinc, y una sans-serif neutra para la carta, que debe leerse en un segundo.
Lo que hay bajo el capó.
- Next.js
- React
- Tailwind
- Vercel
Una sola imagen prioritaria
La imagen de la primera pantalla se precarga y se dimensiona mediante atributos; todas las demás se difieren. Es lo que permite un 95 en rendimiento en un sitio de fotografías.
Formatos modernos y tamaños adecuados
Cada foto existe en varios anchos, servidos mediante srcset. Un teléfono no descarga la imagen de escritorio: es la primera fuente de derroche en las webs de restaurantes.
Reserva delegada, pero diferida
El módulo de reservas de un proveedor externo pesa varios cientos de kilobytes. Solo se carga al hacer clic en «Reservar», no al cargar la página.
Cómo se hace encontrar la web.
Búsquedas de proximidad
«Bistrot Lyon 5», «restaurant quai Pierre-Scize», «où manger Vieux Lyon le soir» (dónde cenar en el Vieux Lyon). Son búsquedas de decisión inmediata, a menudo formuladas a menos de un kilómetro del restaurante.
Marcado Restaurant completo
JSON-LD Restaurant con dirección, datos de contacto, horarios, rango de precios, tipo de cocina y enlace a la carta. Es el bloque que Google recoge en el panel local.
Coherencia con la ficha de Google
Nombre, dirección y teléfono estrictamente idénticos, carácter por carácter, entre el sitio y la ficha del establecimiento. Una discrepancia, aunque sea de puntuación, debilita el posicionamiento local.
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 sobre fondo oscuro
La trampa del tema oscuro es el texto gris sobre carbón. Todos los pares se subieron por encima de 4,5:1, y los textos sobre foto pasan por un velo lo bastante denso para mantener el umbral sea cual sea la imagen.
Lo que se entregó.
- Inicio
- La carta
- El local
- Reservar
- Cómo llegar y horarios
- Contacto
El desarrollo del proyecto.
Dirección fotográfica
Selección y retoque: el sitio vale lo que valen sus imágenes.
Diseño
Tema oscuro, barra de acción, carrusel bajo control.
Desarrollo
Imagen prioritaria, srcset, reserva diferida.
SEO local
Marcado Restaurant, coherencia con la ficha de Google.
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.