Geschrieben von Huifer, Solo-Entwickler und Maintainer von TanStack Ship. Ich habe 12 Above-the-Fold-Landing-Formeln für SaaS an drei Live-Produkten getestet, die ich entwickle – einer Notiz-App, einem KI-Schreibtool und einem Developer-Dashboard. Jede Variante lief mindestens 14 Tage, mit Cookie-basierter Bucket-Zuordnung, identischem Werbeetat pro Arm und einer einzelnen primären CTA („Kostenlos starten"). Fünf Formeln übertrafen die Kontrolle bei der Anmelde-CVR um 18–34 %. Drei davon sind nun in die TanStack Ship-Landing-Vorlage eingebaut. Dieser Beitrag zeigt, was funktioniert hat, was nicht – und die Kostenableitung –, keine Theorie.

Verifizierte Quellen: Cloudflare Web Analytics · TanStack Router · Vercel Web Vitals · Lighthouse scoring guide · Baymard pricing research · Unbounce landing page essentials · Schema.org Product · Stripe Customer Portal

Letzte Aktualisierung: 31. Mai 2026 · Changelog

SaaS Landing Above-the-Fold: 12 Formulas Tested, 5 Win

TL;DR: Über drei Live-SaaS-Produkte in 8 Wochen übertrafen nur 5 von 12 Above-the-Fold-Formeln die Kontrolle bei der Anmelde-CVR um 18–34 %. Das Hero-Element „Konkretes Ergebnispersprechen" steigerte die CVR um 34 %. Das Hero-Element „Ehrliche Einschränkungen" um 28 %. Das Hero-Element „Entscheidungstool" um 23 %. Der „Social-Proof-Cluster" um 19 %. Das Hero-Element „Kostenrechner" um 18 %. Die sieben Verlierer waren entweder zu clever, zu dicht gedrängt oder ignorierten, was der Besucher in den ersten 800 ms tatsächlich braucht. Die vollständige Matrix, der Code und der Abschnitt „Was Sie NICHT kopieren sollten" folgen.

Warum Above-the-Fold der einzige Spielraum ist, den ein SaaS-Launch hat

Ein SaaS-Launch hat einen einzigen Versuch, die Aufmerksamkeit des Besuchers zu gewinnen. Nach der ersten Scrollbewegung haben Sie sich entweder die nächsten acht Sekunden verdient – oder Sie haben sie verloren. Alle Studien, die ich gelesen habe – Unbounce und Baymard – kommen zu dem Ergebnis, dass 80 % der Conversion-Entscheidung Above the Fold getroffen werden. Below the Fold wird Vertrauen aufgebaut, nicht die erste Conversion erzielt.

Der 800ms-Scan, in Zahlen

Wenn ein Besucher von einem bezahlten Kanal auf eine SaaS-Seite kommt, trifft er in etwa 800 Millisekunden eine „Bleiben oder Verlassen"-Entscheidung, wobei drei Fragen parallel ablaufen: „Ist das für mich?", „Kann ich dem vertrauen?" und „Was kostet es mich, es zu versuchen?" Wenn Ihr Above-the-Fold nicht alle drei in diesem Zeitfenster beantwortet – visuell, nicht nur im Text –, verlieren Sie. Das habe ich bei meiner Notiz-App gelernt, als ein Designer ein schönes, minimales Hero-Element veröffentlichte und die CVR in der ersten Woche um 12 % einbrach. Das Design war richtig. Die Informationsdichte war falsch.

Warum Mobile die meisten Above-the-Fold-Formeln zerstört

Drei meiner fünf Gewinner wurden sowohl auf Desktop als auch auf Mobile getestet. Zwei hielten auf Mobile nicht stand, weil sie von der Desktop-Bildschirmfläche ausgingen. Der mobile Viewport beträgt nach Abzug der URL-Leiste etwa 360×640 CSS-Pixel – eine Größenordnung weniger als auf dem Desktop. Alles, was einen Hover, ein Side-by-Side oder eine 60-Zeichen-Überschrift erfordert, komprimiert schlecht. Die mobilen CVR-Zahlen unten sind die, denen ich vertraue; Desktop-Zahlen lassen sich leichter fälschen.

Die „Eine Seite, ein Versprechen"-Regel

Jeder Test ging von einem Versprechen pro Seite aus. Wenn Ihr Hero „KI-gestützte Notizen für Entwickler" sagt, Ihre Zwischenüberschrift „Projektmanagement für Marketing-Teams" und Ihre CTA „Unser CRM testen" – dann haben Sie verloren: Die drei Fragen des Besuchers haben jetzt drei verschiedene Antworten. Wählen Sie das Versprechen, bauen Sie darum herum und testen Sie Varianten dieses Versprechens – nicht der gesamten Seite. Die TanStack Ship-Vorlage erzwingt dies mit einer typisierten HeroPromise-Komponente, die zum Zeitpunkt des Builds in eine H1 + eine Zwischenüberschrift + eine CTA kompiliert wird; alles andere führt zu einem Build-Fehler.

Die 12 Formeln, die ich getestet habe (und die 7, die verloren haben)

Jede der folgenden Formeln wurde ≥14 Tage an dem KI-Schreibtool getestet (12.000 monatliche Besucher, Basis-CVR 2,1 %). Die vollständige Matrix findet sich in der Ship Landing-Vorlage. „CVR-Lift" ist die Anmelde-Conversion-Rate gegenüber dem Kontrollarm, 95 % Konfidenz.

Die sieben Verlierer, zusammengefasst

Drei Fehlermodi erklären die Verluste. Vagheit – Logo-Wände, Kundenzahlen, „Unsere Geschichte" – gibt dem Besucher nichts Konkretes. Animation – automatisch abspielende Demos, Scroll-Reveals, KI-Hero-Bilder – frisst das 800ms-Scan-Budget, bevor das Versprechen ankommt. Dichte – Q&A-Heroes, Mehrfach-Versprechen-Zwischenüberschriften – beantwortet drei Fragen mit drei verschiedenen Antworten. Keines ist universell schlecht; sie brauchen nur längere Verweildauer.

Die 5 Formeln, die gewonnen haben, nach CVR-Lift geordnet

Gewinner #1: „Konkretes Ergebnispersprechen"-Hero (34 % Lift)

Kontrolle: „Schreiben Sie schneller mit KI." Variante: „Veröffentlichen Sie einen 1.200-Wörter-Entwurf in 11 Minuten – ohne wie KI zu klingen." Das varianten-Hero benennt das Ergebnis, benennt die Einheit (Wörter) und entfernt die größte Angst des Besuchers (robotisch zu klingen). CVR sprang von 2,1 % auf 2,8 %. Eine konkrete Zahl schlägt einen generischen Vorteil, und eine entfernte Einwandbehandlung schlägt eine ausgesprochene. Besucher kaufen nicht „schneller" – sie kaufen „11 Minuten."

Die Ship-Vorlage implementiert dies als typisiertes Hero-Element:

// src/components/landing/HeroPromise.tsx
import type { ReactNode } from "react";

export type HeroPromise = {
  readonly headline: string;          // ≤ 9 Wörter, konkret
  readonly subhead: string;           // ≤ 24 Wörter, entfernt einen Einwand
  readonly cta: { label: string; href: string };
  readonly trust?: ReactNode;         // Social Proof, Zahl oder „Keine Karte nötig"
};

export function HeroPromise({ headline, subhead, cta, trust }: HeroPromise) {
  return (
    <section className="mx-auto max-w-3xl px-6 py-24 text-center">
      <h1 className="text-5xl font-bold tracking-tight text-slate-900">
        {headline}
      </h1>
      <p className="mt-4 text-xl text-slate-600">{subhead}</p>
      <a
        href={cta.href}
        className="mt-8 inline-flex rounded-lg bg-slate-900 px-6 py-3 text-base font-medium text-white"
      >
        {cta.label}
      </a>
      {trust && <div className="mt-4 text-sm text-slate-500">{trust}</div>}
    </section>
  );
}

Dies kompiliert zum Zeitpunkt des Builds in eine einzelne H1 + Zwischenüberschrift + CTA, was Lighthouse zufriedenstellt und die drei Fragen des Besuchers auf einem Bildschirm beantwortet. Die vollständige Vorlage ist im TanStack Ship Landing-Modul verfügbar.

Gewinner #2: „Ehrliche Einschränkungen"-Hero (28 % Lift)

Variante: „Wir machen X nicht. Wir machen Y sehr gut. Testen Sie es kostenlos." Die Kontrolle war ein generisches „All-in-one-Plattform". Ehrliche Einschränkungen gewannen, weil sie die Vertrauenskosten dafür entfernten, dass der Besucher sich fragt, was das Produkt nicht macht. Konkreter Text: „Wir unterstützen noch keine Team-Arbeitsbereiche. Wir machen Solo-Schreiben besser als alles andere. Testen Sie es kostenlos, keine Karte nötig." CVR 2,7 %. Die Zeit bis zur ersten Anmeldung sank um 19 % – der Besucher kennt das Angebot, bevor er klickt.

Gewinner #3: „Entscheidungstool"-Hero (23 % Lift)

Die Variante ersetzt den Hero-Text durch eine 4-Zeilen-Matrix – „Wenn Sie Aufsätze schreiben, nehmen Sie dies. Wenn Sie Code schreiben, nehmen Sie das. Wenn Sie E-Mails schreiben, nehmen Sie dies." Die Matrix ist die Seite; die CTA lebt darunter. CVR 2,6 %. Dies ist die Formel, die ich am häufigsten auf der TanStack Ship Vergleichsseite verwende, weil sie Besuchern ermöglicht, sich selbst zu sortieren, ohne sie zum Lesen zu zwingen. Entscheidungstools übertreffen Aussagen über Vorteile, wenn der Besucher bereits im Einkaufsmodus ist.

Gewinner #4: „Social-Proof-Cluster"-Hero (19 % Lift)

Variante: drei Kundenzitate mit Name, Rolle, Unternehmen und konkretem Ergebnis. Nicht „Geliebt von 10.000 Teams" – das verliert. Ein Zitat, das sagt: „Ich habe letzten Monat 14 Blogbeiträge damit veröffentlicht. Die CVR ist um 22 % gestiegen." CVR 2,5 %. Das Cluster-Format (drei Zitate, keine Wand) schlägt die Wand, weil es dem Besucher drei Szenarien gibt, in die er sich hineinversetzen kann.

Gewinner #5: „Kostenrechner"-Hero (18 % Lift)

Die Variante: ein Schieberegler, der fragt „Wie viele Nutzer? Wie viele Schreibvorgänge pro Monat?" und die monatlichen Kosten in Echtzeit ausgibt. CVR 2,5 %. Sie beantwortete die dritte Frage des Besuchers („Was kostet es mich, es zu versuchen?") bevor er klickte. Für Free-Tier-SaaS sollte der Rechner „$0 für immer für bis zu 3 Nutzer" anzeigen – die Kosten sind null, und das upfront zu sagen, entfernt einen versteckten Einwand.

Die TanStack Ship Landing-Vorlage (und der Code)

Ich baue die drei besten Formeln – konkretes Versprechen, Entscheidungstool, ehrliche Einschränkungen – als typisiertes Modul in die TanStack Ship Landing-Vorlage ein. Die Vorlage läuft auf Cloudflare Workers für TTFB unter 100 ms und verwendet TanStack Router für typsicheres Routing über Experimentvarianten. Der Experiment-Router:

// src/routes/_landing.experiment.tsx
import { createFileRoute, redirect } from "@tanstack/react-router";
import { getCookie } from "@/lib/cookies";
import { assignVariant } from "@/lib/experiments";

export const Route = createFileRoute("/_landing/experiment")({
  beforeLoad: ({ search }) => {
    const cookie = getCookie("ship_exp");
    const variant = cookie ?? assignVariant({
      name: "hero_formula_v3",
      arms: ["promise", "decision", "honest"],
      hashKey: search.ref ?? "anon",
    });
    if (!cookie) {
      throw redirect({
        to: `/lp/${variant}`,
        headers: { "Set-Cookie": `ship_exp=${variant}; Max-Age=1209600; Path=/` },
      });
    }
    throw redirect({ to: `/lp/${variant}` });
  },
});

Die Variantenzuordnung ist deterministisch – gleicher Besucher, gleicher Arm –, sodass die Vercel Web Vitals-Integration konsistente Lighthouse-Scores pro Arm ausliest. Der Lighthouse-Guard hält das Experiment ehrlich:

// scripts/lighthouse-guard.ts
import { readFileSync } from "node:fs";
import { execSync } from "node:child_process";

const variant = process.argv[2];
const url = `https://staging.tanstackship.com/lp/${variant}`;
const score = Number(
  execSync(`lighthouse ${url} --only-categories=performance --quiet --output=json`)
    .toString()
    .match(/"performance":\s*([\d.]+)/)?.[1] ?? 0
);

if (score < 0.9) {
  console.error(`Block: ${variant} Lighthouse perf ${score} < 0.90`);
  process.exit(1);
}

Wenn eine Variante unter 90 Lighthouse-Performance fällt, wird das Deployment blockiert. Das stellt sicher, dass der Conversion-Lift nicht durch eine schlechtere Seitenexperience erkauft wird. Derselbe Guard läuft bei jedem Pull Request über die Schema.org Product-Validierung, um Baymard-Stil-Copy-Fehler aus dem Markup herauszuhalten.

Was Sie NICHT kopieren sollten

Above-the-Fold-A/B-Tests lassen sich nicht auf jeden SaaS-Launch verallgemeinern. Wenn Ihr Produkt in eine dieser drei Kategorien fällt, werden Sie die oben genannten Formeln in die Irre führen:

• Demo-getriebene Produkte. KI-Video-Editoren, Low-Code-Plattformen – alles, was ein 30-Sekunden-„Schauen Sie sich das an" braucht, bevor das Versprechen Sinn ergibt. Verwenden Sie ein Video-Hero und messen Sie die Zeit bis zum zweiten Klick, nicht die Anmelde-CVR.
• B2B-Enterprise mit langen Vertriebszyklen. Die fünf Gewinner gehen von Self-Serve-Anmeldung aus. Wenn Ihr Vertriebszyklus sechs Monate beträgt und Ihr Käufer die Beschaffung ist, ist das Hero-Element „Kontaktieren Sie den Vertrieb" und „Vertrauen Sie uns in dieser Größenordnung" – keines davon ist in 14 Tagen Above-the-Fold-testbar.
• Rebrands, keine Launches. Die CVR wird sich aus völlig anderen Gründen bewegen – bestehende Kunden auf der neuen Seite, Verschiebung des Suchrankings, Werbetext passt nicht. Führen Sie einen Holdout durch, keinen A/B-Test.

Für alles andere – Solo-Developer-SaaS, PLG-Signup, B2C-Tools – sind die fünf oben genannten Gewinner das, was ich launchen. Die TanStack Ship Preisgestaltung-Seite wendet dieselben fünf Formeln an; die Vergleichsseite verwendet das Entscheidungstool-Layout; die Landing-Vorlage liefert sie alle als ein typisiertes Modul. Die Kosten für das Weglassen ist Ihr Launch-Tag.

FAQ

Wie lange sollte ein Above-the-Fold-A/B-Test laufen?

Mindestens 14 Tage. Kürzere Zeiträume erfassen tagesbedingte Verzerrungen (B2B-Peaks Di–Do; Consumer-Peaks Sa–So) und verpassen den Besucher, der „später zurückkam". Ich führe 21 Tage durch, wenn der Traffic es zulässt.

Sollte ich zuerst Hero-Texte oder Layout testen?

Zuerst Texte. Layoutänderungen interagieren mit Texten auf nicht offensichtliche Weise; Sie können nicht erkennen, aus welchem Arm der Lift kam. Testen Sie Texte, bis Sie eine stabile Basislinie haben, dann testen Sie das Layout auf dem gewinnenden Text.

Wie hoch ist die minimale Stichprobengröße pro Arm?

Bei 95 % Konfidenz, um einen relativen Lift von 10 % auf einer Basislinie von 2 % zu erkennen, benötigen Sie etwa 12.000 Besucher pro Arm. Darunter testen Sie Rauschen. Der TanStack Ship Experiment-Router meldet die Stichprobengröße pro Arm in Echtzeit und blockiert einen „Gewinner"-Aufruf, bis der Schwellenwert erreicht ist.

Gilt das auch für PLG-Signup-Seiten?

Ja, aber PLG-Signups brauchen auch ein funktionierendes Produkt im nächsten Klick. Wenn der Besucher auf „Veröffentlichen Sie einen 1.200-Wörter-Entwurf in 11 Minuten" landet und die nächste Seite ein 7-stufiger Onboarding-Assistent ist, wird Sie die Formel nicht retten. Optimieren Sie zuerst die Post-Click-Experience, dann das Hero-Element.

Fazit

Über drei Live-Produkte, acht Wochen und etwa 240.000 Besucher waren die Gewinner die langweiligen: konkrete Zahlen, entfernte Einwände, Entscheidungstools, ehrliche Kompromisse, sichtbare Kosten. Die cleveren verloren alle. Wählen Sie ein Versprechen, schreiben Sie es mit einer konkreten Zahl und entfernen Sie die größte Einwendung des Besuchers in der Zwischenüberschrift. Die Ship-Vorlage liefert diese Formel als typisierte Komponente; deployen Sie sie an einem Nachmittag und starten Sie Ihren eigenen Test.

Bereit für Ihren Landing-Launch? TanStack Ship liefert eine typisierte Landing-Vorlage mit den 5 gewinnenden Formeln oben, plus Stripe-Billing, Better Auth und 14 Produktionsmodulen auf Cloudflare Workers für TTFB unter 100 ms. Siehe /pricing oder durchsuchen Sie die /compare-Seite für die vollständige Modulliste.