Blog/Design

10 Marketing-Sites, die Performance und Design beherrschten (Teardown)

11. Juni 202611 Min. Lesezeit

Die meisten „Beste Websites"-Listen sind ästhetische Rankings ohne Substanz. Diese ist anders. Wir haben echte Core Web Vitals gemessen, die Informationsarchitektur analysiert und die sich wiederholenden Muster identifiziert, die diese Sites zum Funktionieren bringen.

Was wir gemessen haben

  • LCP (Largest Contentful Paint) — mobil, gedrosseltes 4G
  • INP (Interaction to Next Paint) — Desktop
  • CLS (Cumulative Layout Shift)
  • Lighthouse Performance — mobil
  • Above-the-Fold-Struktur
  • Vertrauenssignal-Platzierung

1. Linear

LCP: 0,8s | INP: 42ms | CLS: 0,0 | Lighthouse: 98

Die Hero-Aussage ist präzise. „The issue tracking tool you'll enjoy using" benennt die Kategorie und macht eine spezifische Behauptung.

Interaktive Demo above the fold. Statt einem statischen Screenshot enthält der Hero eine live, tastaturnavigierbare Mini-Version des Produkts.

Null unnötige Animation. Jede Bewegung dient einem Zweck.

Was man mitnehmen sollte: Interaktive Produkt-Demos übertreffen statische Screenshots. Legen Sie den Beweis in den Hero.

2. Vercel

LCP: 1,1s | INP: 38ms | CLS: 0,01 | Lighthouse: 96

Social Proof nach Kategorie. Statt einer zufälligen Logo-Wand organisiert Vercel Logos nach Branchenvertikale. Relevanz erhöht das Beweisgewicht erheblich.

Dunkles Thema als Performance-Entscheidung. Dunkle Hintergründe bedeuten weniger Bytes in Bildern. Die ästhetische Wahl ist auch eine Performance-Entscheidung.

Was man mitnehmen sollte: Segmentieren Sie Ihren Social Proof nach Käuferkategorie.

3. Stripe

LCP: 1,4s | INP: 55ms | CLS: 0,0 | Lighthouse: 91

Der Hero überspringt den Pitch. Die Überschrift ist kategorie-definierend, nicht benefit-listend.

Code-Beispiele im Hero. Für ein developer-first Produkt ist funktionierender Code im Hero der direkteste Fähigkeitsbeweis.

Progressive Vertrauensoffenbarung. Claim → Code-Beweis → Logo-Wand → detaillierter Feature-Breakdown → Preis-Transparenz → Compliance-Signale → Case Studies.

Was man mitnehmen sollte: Ordnen Sie Ihren Beweis, um der Reihenfolge der Käufereinwände zu entsprechen.

4. Notion

LCP: 1,6s | INP: 71ms | Lighthouse: 88

Anwendungsfall-Navigation im Hero. Schnell-Links lassen Besucher sich selbst auswählen. Statt alle mit einer Botschaft zu konvertieren, leitet die Site verschiedene Käufer auf verschiedene Seiten.

5. Loom

LCP: 1,8s | INP: 89ms | Lighthouse: 85

Der Hero-CTA hat Spezifität. „Record a video — it's free" übertrifft „Get started" auf jeder Metrik.

Die Problem-zuerst-Struktur. Unter dem Hero führt Loom nicht mit Features — es führt mit dem Problem. Käufer, die den Schmerz fühlen, konvertieren mit höheren Raten.

6. Intercom

LCP: 2,1s | Lighthouse: 82

Intercom zeigt das Negativbeispiel: das eigene Chat-Widget verursacht ~0,5s LCP-Overhead. Ironisch für ein Chat-Unternehmen.

Was man mitnehmen sollte: Laden Sie Ihr eigenes Produkt-Widget lazy. Lassen Sie niemals Ihre eigene Produktkategorie der Grund dafür sein, dass Ihre Site langsam ist.

7. Pitch

LCP: 1,2s | Lighthouse: 94

Das Produkt ist der Hero. Der Above-the-Fold-Bereich zeigt echte Pitch-Präsentationen.

Animation ist der Beweis. Jede Animation demonstriert ein Feature. Bewegung ist keine Dekoration; sie ist Dokumentation.

8. Framer

LCP: 0,9s | Lighthouse: 99

Framers Site ist in Framer gebaut. Das ist der direktestmögliche Fähigkeitsbeweis.

Die Site ist die Demo. Besucher erleben sofort, was Framer produzieren kann — weil sie es gerade sehen.

9. Figma

LCP: 1,3s | Lighthouse: 92

Die CTA-Hierarchie ist sichtbar. Primärer CTA: „Get started — it's free." Sekundärer CTA: „Contact Sales." Visuell unterschieden in Größe, Farbe und Platzierung.

10. Raycast

LCP: 0,7s | Lighthouse: 99

Plattform-Spezifität als Designsprache. Die UI-Komponenten in den Screenshots verwenden macOS-Designmuster. Nicht-macOS-Nutzer verstehen sofort, dass dieses Produkt nicht für sie ist — macOS-Nutzer fühlen sich sofort verstanden.

Was man mitnehmen sollte: Spezifität konvertiert. Eine Site, die für Ihren genauen Käufer gebaut zu sein scheint, ist überzeugender als eine, die versucht, alle anzusprechen.

Die sich wiederholenden Muster

  1. Der Hero nennt ein Ergebnis oder beansprucht eine Kategorie — listet niemals Features auf
  2. Beweis erscheint im Hero-Viewport — nicht einen Scroll darunter
  3. Ein primärer CTA — der sekundäre ist visuell untergeordnet
  4. Social Proof steigt in Spezifität beim Scrollen — aggregiert → Logos → Zitate → ROI
  5. Performance wird als Design behandelt
  6. Wettbewerberkontext ist praktisch, nie kämpferisch

Möchten Sie wissen, was Ihre Site gut macht und wo sie zurückfällt? Starten Sie ein Gespräch — wir überprüfen Ihre aktuelle Site und geben ehrliches Feedback.

Bereit, etwas zu starten?

Wir nehmen jeden Quartal eine begrenzte Anzahl von Projekten an. Erzählen Sie uns, was Sie bauen.

Projekt starten
— Weitere Beiträge
Design10 Min. Lesezeit

Die Landing Page, die wirklich konvertiert: Anatomie einer leistungsstarken SaaS-Seite

Die meisten SaaS-Landing-Pages scheitern an denselben fünf Gründen. Hier ist die Anatomie einer, die konvertiert — Above the Fold, Social Proof, CTA-Text und Ladegeschwindigkeit als Konversionshebel.

2. Juni 2026Lesen