Damien Mugnier
97, 100, 100, 100: um Lighthouse irrepreensível num site com forte densidade fotográfica.
- Ano
- 2026
- Conceção
- 3 semanas
- Stack
- React · Vite · Tailwind · Vercel
- Design
- Desenvolvimento
- Direção fotográfica
- SEO local
Versão de demonstração publicada pela KAYZEN num endereço Vercel; o domínio definitivo pertence ao cliente.
- desempenho Lighthouse
- 97/100
- acessibilidade, boas práticas, SEO
- 100/100
- imagem prioritária, todas as outras diferidas
- 1
O que era preciso resolver.
O contexto
Damien Mugnier é ladrilhador e pedreiro em Beauvallon, no sudoeste de Lyon. Trabalha cerâmica de grande formato, mármore, pedra natural e terraços, para uma clientela de gama alta.
A restrição
O posicionamento de gama alta prova-se exclusivamente pela imagem: um mosaico de grande formato bem assente vê-se nas juntas e nos cortes, não num texto. Era preciso, portanto, um site muito fotográfico — e sabe-se que essa é a receita de um site lento.
A resposta
Tratar o desempenho como uma restrição de conceção, e não como uma otimização final. Cada fotografia foi retrabalhada, recortada e servida em várias larguras antes mesmo da integração. O resultado: 97 em desempenho num site cujo conteúdo é quase exclusivamente visual — e pontuação máxima nos outros três eixos.
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.
O material como paleta
Bege pedra, cinzento mármore, preto profundo. A paleta é recolhida dos materiais aplicados; o site e os trabalhos falam a mesma língua.
Imagens grandes, enquadramento apertado
Os planos abertos da divisão afogam o trabalho. Os enquadramentos são apertados nos cortes, nas juntas e nas uniões — onde se vê a diferença entre um aplicador e um artesão.
Pouco texto, muito bem escrito
Neste posicionamento, um texto longo dilui. Cada página cabe em poucas frases precisas, com o vocabulário exato dos materiais.
Paleta do projeto
Pedra
#D9CFC0
Fundo, superfícies
Mármore cinzento
#7F8489
Estrutura
Preto profundo
#151719
Texto, contraste
Latão
#A3813F
Pormenores
Sistema tipográfico
Títulos
Cormorant Garamond 600
Texto corrido
Inter 400
Uma serifada fina e alta para o posicionamento, uma sem serifa discreta para a informação. A tipografia está ao serviço das fotografias, nunca o contrário.
O que está por baixo do capô.
- React
- Vite
- Tailwind
- Vercel
Orçamento de imagens fixado antes da integração
Foi definido à partida um peso máximo por página; as imagens foram preparadas para o respeitar. É o inverso da abordagem habitual, em que se otimiza depois de constatar a lentidão.
Carregamento progressivo sistemático
Uma única imagem prioritária, todas as outras diferidas, dimensões declaradas para não haver qualquer deslocamento de layout.
Nenhuma biblioteca de animação
As transições são em CSS puro. Num site em que a imagem carrega tudo, acrescentar cem kilobytes de JavaScript de animação teria custado os pontos de desempenho que fazem a diferença.
Como o site se torna encontrável.
Pesquisas por material
«Pose carrelage grand format Lyon» (assentamento de cerâmica de grande formato), «marbre salle de bain sud-ouest lyonnais» (mármore para casa de banho), «terrasse pierre naturelle» (terraço em pedra natural). O cliente de gama alta procura um material, não uma profissão.
Imagens descritas e nomeadas
Textos alternativos descritivos e nomes de ficheiro explícitos. A pesquisa de imagens é um canal real nas profissões de acabamento.
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 num site de imagens
Cada fotografia tem uma descrição útil — material, formato, divisão — em vez de um texto alternativo vazio ou duplicado. Um site visual não está condenado a ser inacessível.
O que foi entregue.
- Início
- Cerâmica de grande formato
- Mármore e pedra natural
- Terraços
- Trabalhos
- Orçamento
As etapas do projeto.
Orçamento de desempenho
Peso máximo por página fixado antes da integração.
Direção fotográfica
Seleção, enquadramento apertado, preparação em várias larguras.
Design
Paleta de materiais, texto curto e preciso.
Desenvolvimento
CSS puro, carregamento progressivo, dimensões declaradas.
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.