Au P'tit Zinc
95 em desempenho e 100 em acessibilidade num site dominado pela fotografia: era esse o desafio.
- Ano
- 2026
- Conceção
- 3 semanas
- Stack
- Next.js · React · Tailwind · Vercel
- Design
- Desenvolvimento
- SEO local
- Fotografia (direção)
Versão de demonstração publicada pela KAYZEN num endereço Vercel; o domínio definitivo pertence ao cliente.
- desempenho Lighthouse
- 95/100
- acessibilidade Lighthouse
- 100/100
- SEO Lighthouse
- 100/100
- ações permanentes no telemóvel
- 3
O que era preciso resolver.
O contexto
O Au P'tit Zinc é um bistrô do quai Pierre-Scize, Lyon 5, aberto desde 1992. Um endereço de bairro conhecido tanto pelo ambiente de fim de noite como pela cozinha.
A restrição
O espaço vende-se pela atmosfera e, portanto, pela fotografia: luz quente, balcão, sala cheia. Ora, um site de restaurante fotográfico é quase sempre lento, e metade das visitas chega de um telemóvel, na rua, às 19h30, para encontrar a morada e reservar.
A resposta
Fazer coexistir imersão e velocidade. O primeiro ecrã apresenta uma imagem ampla com prioridade de carregamento; tudo o resto é diferido. As três ações reais — reservar, telefonar, obter o itinerário — estão acessíveis com um só gesto a partir de qualquer ponto da página.
As pontuações registadas na entrega.
Pontuações Lighthouse do site em produção. Publicamo-las tal como estão: quando uma delas é baixa, a causa e o plano de correção estão descritos mais abaixo, em vez de serem omitidos.
Cada opção, e a sua razão.
Tema escuro acolhedor
Fundo carvão, destaques em cobre, fotografias de dominante âmbar. O escuro não é aqui uma moda: reproduz a luz do espaço à hora a que se decide ir lá.
Três ações, sempre ao alcance
Reservar, telefonar, itinerário. Uma barra de ação fixa no telemóvel mantém-nas acessíveis durante todo o deslocamento da página. É a única coisa que 80 % dos visitantes vêm fazer.
Carrossel sem armadilhas
Avanço automático desativado por predefinição, controlos por teclado, pausa ao passar o rato e paragem total se o utilizador tiver pedido movimento reduzido. Um carrossel que avança sozinho é o componente mais universalmente detestado da web.
Paleta do projeto
Carvão
#171412
Fundo
Cobre
#B4763A
Destaques, ação
Marfim
#F3EDE4
Texto
Verde-garrafa
#2E4034
Secções secundárias
Sistema tipográfico
Títulos
Playfair Display
Texto corrido
Inter 400
Uma serifada de alto contraste para o nome e os títulos — o espírito do balcão de zinco — e uma sem serifa neutra para o menu, que tem de se ler num segundo.
O que está por baixo do capô.
- Next.js
- React
- Tailwind
- Vercel
Uma única imagem prioritária
A imagem do primeiro ecrã é pré-carregada e dimensionada por atributo; todas as outras são diferidas. É isso que permite 95 em desempenho num site de fotografias.
Formatos modernos e tamanhos adequados
Cada fotografia existe em várias larguras, servidas via srcset. Um telemóvel não descarrega a imagem do computador — é a principal fonte de desperdício nos sites de restaurantes.
Reserva externa, mas diferida
O módulo de reservas de um fornecedor externo pesa várias centenas de kilobytes. Só é carregado no clique em «Reservar», não no carregamento da página.
Como o site se torna encontrável.
Pesquisas de proximidade
«Bistrot Lyon 5», «restaurant quai Pierre-Scize», «où manger Vieux Lyon le soir» (onde jantar no Vieux Lyon). São pesquisas de decisão imediata, muitas vezes feitas a menos de um quilómetro do restaurante.
Marcação Restaurant completa
JSON-LD Restaurant com morada, contactos, horários, gama de preços, tipo de cozinha e link para o menu. É este bloco que o Google retoma no painel local.
Coerência com a ficha Google
Nome, morada e telefone rigorosamente idênticos, carácter a carácter, entre o site e a ficha do Google Business Profile. Uma divergência, mesmo de pontuação, enfraquece o SEO local.
Utilizável por todos.
Desde junho de 2025, o Ato Europeu da Acessibilidade exige a acessibilidade digital a uma grande parte dos serviços online. Tratamo-la na conceção, não como correção posterior.
100/100 sobre fundo escuro
A armadilha do tema escuro é o texto cinzento sobre carvão. Todos os pares foram elevados acima de 4,5:1, e os textos sobre fotografia passam por um véu suficientemente denso para respeitar o limiar seja qual for a imagem.
O que foi entregue.
- Início
- O menu
- O espaço
- Reservar
- Acesso e horários
- Contacto
As etapas do projeto.
Direção fotográfica
Seleção e retoque: o site vale o que valem as suas imagens.
Design
Tema escuro, barra de ação, carrossel controlado.
Desenvolvimento
Imagem prioritária, srcset, reserva diferida.
SEO local
Marcação Restaurant, coerência com a ficha Google.
O que nos perguntam com frequência.
Outros projetos
Cibersegurança & Aplicação multiplataformaSésame
Um gestor de palavras-passe que não consegue ler as suas palavras-passe: a prova era a arquitetura.
Cibersegurança & Aplicação webSésame Éclair
Um segredo, uma leitura, nenhum rasto: a chave nunca sai da ligação, o servidor só guarda um bloco ilegível.
Conformidade RGPD & SaaSKonsent by Kayzen
Um editor de banners que audita banners é juiz em causa própria: a independência era o produto.
O mesmo nível de exigência, para o seu site.
Auditoria gratuita do seu site atual, orçamento em 24 h e um raciocínio por escrito — como o que acabou de ler. Pagamento em três prestações sem juros; apoios locais verificados antes da assinatura.