Das Problem mit dem Applaus
Aufwendige Markenwebsites folgen oft demselben Muster: ein Ladebildschirm, dann ein Canvas, in dem auch die Texte gezeichnet werden, dazu ein Scrollverhalten, das der Website gehört statt dem Besucher. In Jurybewertungen funktioniert das. In der Suche, bei Screenreadern und auf einem Mittelklasse-Smartphone im Mobilfunknetz oft nicht.
Die Folgen sind messbar. Laut Web Almanac 2025 bestehen nur 48 % der mobilen Websites alle drei Core Web Vitals. Die WebAIM-Million-Analyse 2026 findet auf 95,9 % der untersuchten Startseiten automatisch erkennbare Barrierefreiheitsfehler. Und Seiten, deren HTML erst per JavaScript entsteht, bleiben für KI-Crawler wie GPTBot oder ClaudeBot weitgehend leer: Sie führen kein JavaScript aus. Google rendert zwar JavaScript, empfiehlt aber weiterhin serverseitiges Rendern oder vorab erzeugtes HTML.
Die drei Messwerte, die zählen
| Wert | Misst | Gut bis |
|---|---|---|
| LCP (Largest Contentful Paint) | Wann das größte sichtbare Element steht | 2,5 s |
| INP (Interaction to Next Paint) | Wie schnell die Seite auf Eingaben reagiert | 200 ms |
| CLS (Cumulative Layout Shift) | Wie stark der Inhalt beim Laden springt | 0,1 |
Bewertet wird jeweils das 75. Perzentil echter Besuche, getrennt nach Mobil und Desktop. Ein Canvas zählt übrigens nicht als LCP-Element. Wer den Hero-Text ins Canvas verlegt, verschiebt den LCP auf irgendein späteres Element.
Sechs Regeln für Inszenierung mit Substanz
1. Inhalt zuerst ins HTML
Überschriften, Texte und Links stehen im ausgelieferten HTML: als echte Überschriften und als <a href>. Effekte legen sich darüber. Wer JavaScript abschaltet, verliert die Inszenierung, aber keine Information.
2. Text ist das LCP-Element
Die Hauptaussage ist echter Text in einer vorab geladenen Schrift mit metrisch angepasster Ersatzschrift. So steht sie sofort und springt beim Schriftwechsel nicht.
3. Effekte kommen nach dem Inhalt
Die 3D-Engine wird erst geladen, wenn die Seite fertig ist und der Browser Luft hat. Bis dahin ist die Seite vollständig bedienbar.
4. Geräte und Menschen respektieren
Leistungsstufen je Gerät, begrenzte Pixeldichte, Abschalten bei Datensparmodus und Software-Rendering, Pause im Hintergrund. Wer in seinem System „reduzierte Bewegung“ gewählt hat, bekommt ein ruhiges Standbild. Und weil sich die Animation dauerhaft bewegt, gibt es einen sichtbaren Schalter zum Anhalten, wie es WCAG 2.2 im Kriterium 2.2.2 verlangt.
5. Scrollen gehört dem Besucher
Kein Scroll-Kapern, keine Einrast-Folien. Animationen folgen dem nativen Scrollen, sie steuern es nicht. Einblendungen, die an Skripte gebunden sind, verstecken im Fehlerfall Inhalt. Deshalb laufen sie hier als reine CSS-Scroll-Animationen: Wo der Browser sie nicht kann, steht der Text einfach da.
6. Ein Budget, das gemessen wird
Jede Datei hat eine Obergrenze, und jede Änderung wird gegen sie geprüft. Was sein Gewicht nicht rechtfertigt, fliegt raus.
Wie diese Website gebaut ist
Die Glyphenwelt im Hintergrund zeichnet bis zu 26.000 Punkte im Raum, rechnet sie in ein Raster aus Schriftzeichen um und lässt sie beim Scrollen zu neuen Formen wandern: dem Raumbyte-Zeichen, einem Server-Rack, einem Schutzraum, der Umrisslinie Deutschlands. Trotzdem gilt:
- Statisch erzeugtes HTML für jede Seite, ohne Framework und ohne Client-Rendering.
- Rund 25 KB Stylesheet für alle Seiten, 20 KB Bedienlogik und 13 KB für die gesamte 3D-Engine, jeweils komprimiert, ohne Fremdbibliothek und beim Bauen gemessen.
- Zwei variable Schriften, auf die deutschen Zeichen reduziert und selbst gehostet; vorab geladen wird nur die, die die Hauptaussage trägt.
- Null Anfragen an Dritte und kein Cookie ohne Ihre Wahl, im Seitenfuß live nachgemessen.
- Strenge Content-Security-Policy: Skripte, Stile und Schriften nur vom eigenen Server.
Checkliste für Ihr nächstes Projekt
- Quelltext ohne JavaScript ansehen: Stehen alle Inhalte und Links darin?
- LCP-Element bestimmen: Ist es Text oder ein kleines Bild?
- Effekte erst nach dem Laden starten und bei reduzierter Bewegung abschalten.
- Einen sichtbaren Pause-Schalter für dauerhafte Animation einbauen.
- Natives Scrollen behalten.
- Auf einem Mittelklasse-Smartphone im Mobilfunknetz testen, nicht nur am Entwicklerrechner.
Quellen
- web.dev: Web Vitals (31. Oktober 2024)
- HTTP Archive: Web Almanac 2025, Kapitel Performance (2025)
- WebAIM: The WebAIM Million 2026 (2026)
- Vercel: The rise of the AI crawler (17. Dezember 2024)
- Google Search Central: Understand JavaScript SEO Basics (Stand 4. März 2026)
- W3C: Understanding Success Criterion 2.2.2 Pause, Stop, Hide (WCAG 2.2)
HinweisDieser Artikel gibt den Stand vom 18. Oktober 2026 wieder und ist keine Rechtsberatung.