Ein Lighthouse-Score von 95+ ist kein Zufall — er ist das Ergebnis systematischer Optimierung. Bei defuse. ist 90+ unser Mindeststandard, 95+ unser Ziel für jedes Projekt. In diesem Artikel teilen wir unser komplettes Playbook — die exakten Techniken, die wir bei jedem Projekt anwenden.
Das Fundament: Die richtige Architektur
Performance beginnt nicht beim Optimieren — sie beginnt bei der Architekturwahl. Next.js mit App Router, Vercel Edge Network, Tailwind CSS — dieses Stack liefert out of the box: Server-Side Rendering und Static Site Generation, automatisches Code-Splitting pro Route, Image-Optimierung mit dem Next.js Image-Loader, Edge-Deployment mit <50ms TTFB weltweit.
Bilder: Der #1 Performance-Hebel
Bilder machen durchschnittlich 50–70% der Seitengröße aus. Unsere Strategie: Next.js Image-Komponente für automatische WebP/AVIF-Konvertierung, sizes-Attribut auf jedem Bild (verhindert Überladung auf kleinen Screens), priority nur für das LCP-Element (Hero-Bild), blur placeholder für wahrgenommene Geschwindigkeit und keine Bilder über 200KB in der finalen Auslieferung.
Fonts: Self-Hosting ist Pflicht
Google Fonts über CDN? Nie wieder. Wir nutzen next/font für automatisches Self-Hosting. Das eliminiert externe DNS-Lookups, TLS-Handshakes und die DSGVO-Problematik in einem Schritt. Wir laden nur die Weights, die tatsächlich verwendet werden (nicht 100–900, sondern z.B. 400, 600, 700) und nutzen font-display: swap um FOIT zu verhindern.
JavaScript-Budget: Weniger ist mehr
| Optimierung | Einsparung | Technik |
|---|---|---|
| Kein jQuery | –85KB | Vanilla JS / React |
| Kein Moment.js | –67KB | date-fns oder Intl API |
| Tree Shaking | –30–50% | Named Imports statt Default |
| Dynamic Imports | –40–60% initial | next/dynamic für Below-the-Fold-Komponenten |
| Kein Analytics-Overhead | –45KB | Server-side oder Lightweight-Alternative |
CSS: Tailwind als Performance-Garantie
Tailwind CSS purged unbenutztes CSS automatisch beim Build. Das Ergebnis: Eine typische Tailwind-Website liefert 8–15KB CSS statt 200KB+ bei traditionellen CSS-Frameworks. Kein unbenutzter Bootstrap-Overhead, keine vergessenen Styles aus gelöschten Komponenten.
Unsere Lighthouse-Scores (letzte 10 Projekte)
| Projekt | Performance | Accessibility | Best Practices | SEO |
|---|---|---|---|---|
| Pension Website | 97 | 100 | 100 | 100 |
| Handwerker-Seite | 98 | 98 | 100 | 100 |
| Agentur-Website | 96 | 100 | 100 | 100 |
| SaaS Landing Page | 99 | 97 | 100 | 100 |
| Portfolio-Seite | 98 | 100 | 100 | 100 |
| Blog mit 50+ Posts | 95 | 98 | 100 | 100 |
| Restaurant-Website | 97 | 100 | 100 | 100 |
| Arztpraxis | 96 | 100 | 100 | 100 |
| E-Commerce LP | 94 | 97 | 100 | 100 |
| Multi-Page CMS | 95 | 99 | 100 | 100 |
Lighthouse CI: Performance automatisch überwachen
Wir messen nicht einmal — wir messen bei jedem Deployment. Mit Lighthouse CI als GitHub Action wird jeder Pull Request automatisch gegen Performance-Schwellenwerte geprüft. Fällt der Score unter 90, wird das Deployment blockiert. So stellen wir sicher, dass Performance nie degradiert — auch nicht nach dem 50. Content-Update.
// lighthouserc.js
module.exports = {
ci: {
collect: {
url: [
'http://localhost:3000/',
'http://localhost:3000/leistungen',
'http://localhost:3000/blog',
],
numberOfRuns: 3,
},
assert: {
assertions: {
'categories:performance': ['error', { minScore: 0.9 }],
'categories:accessibility': ['warn', { minScore: 0.9 }],
'categories:seo': ['error', { minScore: 0.9 }],
},
},
},
};Performance ist kein Feature — es ist eine Designentscheidung. Und wir treffen sie bei jedem Projekt von der ersten Zeile Code an. Wenn Sie wissen wollen, wie Ihre Website performt, schicken Sie uns die URL — wir liefern Ihnen einen kostenlosen Lighthouse-Report innerhalb von 24 Stunden.
