Damien Mugnier
97, 100, 100, 100: een foutloze Lighthouse-score op een site met veel fotografie.
- Jaar
- 2026
- Ontwerp
- 3 weken
- Stack
- React · Vite · Tailwind · Vercel
- Design
- Ontwikkeling
- Art direction foto
- Lokale SEO
Demoversie door Kayzen Web online gezet op een Vercel-adres; het definitieve domein is eigendom van de klant.
- Lighthouse-performance
- 97/100
- toegankelijkheid, best practices, SEO
- 100/100
- prioritaire afbeelding, alle andere uitgesteld
- 1
Wat er opgelost moest worden.
De context
Damien Mugnier is tegelzetter en metselaar in Beauvallon, in het zuidwesten van de regio Lyon. Hij werkt met grootformaattegels, marmer, natuursteen en terrassen, voor een klantenkring in het hogere segment.
De beperking
Een positionering in het hogere segment bewijs je uitsluitend met beeld: een goed gelegde grootformaattegel zie je aan de voegen en de snedes, niet in een tekst. Er was dus een zeer fotografische website nodig — en we weten dat dat het recept is voor een trage website.
Het antwoord
Performance behandelen als een ontwerpbeperking in plaats van als een laatste optimalisatie. Elke foto is bewerkt, bijgesneden en in meerdere breedtes geserveerd nog vóór de integratie. Het resultaat: 97 op performance voor een website waarvan de inhoud bijna uitsluitend visueel is — en een foutloze score op de drie andere assen.
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.
Het materiaal als palet
Steenbeige, marmergrijs, diep zwart. Het palet is overgenomen van de gelegde materialen; de website en de realisaties spreken dezelfde taal.
Grote beelden, strakke kadrering
Brede opnamen van een ruimte verdrinken het werk. De kadrering zit strak op de snedes, de voegen en de aansluitingen — daar zie je het verschil tussen een plaatser en een vakman.
Weinig tekst, zeer goed geschreven
Bij deze positionering verwatert een lange tekst. Elke pagina past in enkele precieze zinnen, met de exacte woordenschat van de materialen.
Kleurenpalet van het project
Steen
#D9CFC0
Achtergrond, vlakken
Grijs marmer
#7F8489
Structuur
Diep zwart
#151719
Tekst, contrast
Messing
#A3813F
Details
Typografisch systeem
Koppen
Cormorant Garamond 600
Lopende tekst
Inter 400
Een fijne, hoge serif voor de positionering, een discrete schreefloze letter voor de informatie. De typografie staat in dienst van de foto's, nooit omgekeerd.
Wat er onder de motorkap zit.
- React
- Vite
- Tailwind
- Vercel
Beeldbudget vastgelegd vóór de integratie
Een maximaal gewicht per pagina werd vooraf bepaald; de afbeeldingen zijn voorbereid om daarbinnen te blijven. Dat is het omgekeerde van de gebruikelijke aanpak, waarbij men optimaliseert nadat de traagheid is vastgesteld.
Systematisch progressief laden
Eén enkele prioritaire afbeelding, alle andere uitgesteld, afmetingen gedeclareerd zodat er geen enkele layoutverschuiving is.
Geen enkele animatiebibliotheek
De overgangen zijn in pure CSS. Op een website waar het beeld alles draagt, had honderd kilobyte aan animatie-JavaScript precies de performancepunten gekost die het verschil maken.
Hoe de website vindbaar wordt.
Zoekopdrachten naar materiaal
“Pose carrelage grand format Lyon”, “marbre salle de bain sud-ouest lyonnais”, “terrasse pierre naturelle”. De klant in het hogere segment zoekt een materiaal, geen vak.
Beschreven en benoemde afbeeldingen
Beschrijvende alternatieve teksten en duidelijke bestandsnamen. Zoeken naar afbeeldingen is een reëel kanaal voor afwerkingsvakken.
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 beeldwebsite
Elke foto heeft een nuttige beschrijving — materiaal, formaat, ruimte — in plaats van een lege of gedupliceerde alternatieve tekst. Een visuele website is niet gedoemd ontoegankelijk te zijn.
Wat er is opgeleverd.
- Home
- Grootformaattegels
- Marmer en natuursteen
- Terrassen
- Realisaties
- Offerte
Het verloop van het project.
Performancebudget
Maximaal gewicht per pagina vastgelegd vóór de integratie.
Art direction foto
Selectie, strakke kadrering, voorbereiding in meerdere breedtes.
Design
Materialenpalet, korte en precieze tekst.
Ontwikkeling
Pure CSS, progressief laden, gedeclareerde afmetingen.
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.