Damien Mugnier
97, 100, 100, 100: der fehlerfreie Lighthouse-Durchlauf auf einer Website mit hoher Bilddichte.
- Jahr
- 2026
- Umsetzung
- 3 Wochen
- Stack
- React · Vite · Tailwind · Vercel
- Design
- Entwicklung
- Bildregie
- Lokales SEO
Demoversion, von Kayzen Web unter einer Vercel-Adresse veröffentlicht; die endgültige Domain gehört dem Kunden.
- Lighthouse-Performance
- 97/100
- Barrierefreiheit, Best Practices, SEO
- 100/100
- priorisiertes Bild, alle anderen verzögert
- 1
Was gelöst werden musste.
Der Kontext
Damien Mugnier ist Fliesenleger und Maurer in Beauvallon im Südwesten von Lyon. Er arbeitet mit Großformatfliesen, Marmor, Naturstein und Terrassen für eine gehobene Kundschaft.
Die Einschränkung
Die Positionierung im oberen Preissegment lässt sich ausschließlich über Bilder belegen: Gut verlegte Großformatfliesen erkennt man an Fugen und Schnitten, nicht an einem Text. Es brauchte also eine sehr fotolastige Website – bekanntlich das Rezept für eine langsame Website.
Die Antwort
Performance als Gestaltungsvorgabe behandeln statt als abschließende Optimierung. Jedes Foto wurde schon vor der Integration nachbearbeitet, zugeschnitten und in mehreren Breiten bereitgestellt. Das Ergebnis: 97 in der Performance auf einer Website, deren Inhalt fast ausschließlich visuell ist – und die volle Punktzahl in den drei anderen Kategorien.
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.
Das Material als Palette
Steinbeige, Marmorgrau, tiefes Schwarz. Die Palette ist den verlegten Materialien entnommen; Website und Referenzen sprechen dieselbe Sprache.
Große Bilder, enger Ausschnitt
Weite Raumaufnahmen lassen die Arbeit untergehen. Die Ausschnitte sind eng auf Schnitte, Fugen und Anschlüsse gesetzt – dort, wo man den Unterschied zwischen einem Verleger und einem Handwerker sieht.
Wenig Text, sehr gut geschrieben
Bei dieser Positionierung verwässert ein langer Text. Jede Seite kommt mit wenigen präzisen Sätzen aus, im exakten Vokabular der Materialien.
Farbpalette des Projekts
Stein
#D9CFC0
Hintergrund, Flächen
Marmorgrau
#7F8489
Struktur
Tiefschwarz
#151719
Text, Kontrast
Messing
#A3813F
Details
Typografisches System
Überschriften
Cormorant Garamond 600
Fließtext
Inter 400
Eine feine, hohe Serifenschrift für die Positionierung, eine dezente Sans-Serif für die Information. Die Typografie dient den Fotos, niemals umgekehrt.
Was unter der Haube steckt.
- React
- Vite
- Tailwind
- Vercel
Bildbudget vor der Integration festgelegt
Zu Beginn wurde ein maximales Gewicht pro Seite definiert; die Bilder wurden so vorbereitet, dass sie es einhalten. Das ist das Gegenteil des üblichen Vorgehens, bei dem man erst optimiert, nachdem man die Langsamkeit bemerkt hat.
Konsequentes Lazy Loading
Ein einziges priorisiertes Bild, alle anderen verzögert, Abmessungen angegeben, damit es keinerlei Layoutverschiebung gibt.
Keine Animationsbibliothek
Die Übergänge sind reines CSS. Auf einer Website, bei der das Bild alles trägt, hätten hundert Kilobyte Animations-JavaScript genau die Performance-Punkte gekostet, die den Unterschied machen.
Wie die Website gefunden wird.
Suchanfragen nach Material
„Großformatfliesen verlegen Lyon“, „Marmor Bad Südwesten Lyon“, „Terrasse Naturstein“. Der anspruchsvolle Kunde sucht ein Material, nicht ein Gewerk.
Beschriebene und benannte Bilder
Beschreibende Alternativtexte und aussagekräftige Dateinamen. Die Bildersuche ist bei Ausbaugewerken ein echter Kanal.
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 einer Bilder-Website
Jedes Foto trägt eine nützliche Beschreibung – Material, Format, Raum – statt eines leeren oder doppelten Alternativtexts. Eine visuelle Website ist nicht dazu verurteilt, unzugänglich zu sein.
Was ausgeliefert wurde.
- Startseite
- Großformatfliesen
- Marmor und Naturstein
- Terrassen
- Referenzen
- Angebot
Der Projektablauf.
Performance-Budget
Maximales Gewicht pro Seite vor der Integration festgelegt.
Bildregie
Auswahl, enger Ausschnitt, Aufbereitung in mehreren Breiten.
Design
Materialpalette, kurze und präzise Texte.
Entwicklung
Reines CSS, Lazy Loading, angegebene Abmessungen.
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.