Ein Entwickler ersetzte eine gescheiterte React-Anwendung durch eine HTML-first-Lösung. Die Zahl der abgeschlossenen Formulare verdoppelte sich sofort. Der Fall ist ein Lehrstück über Progressive Enhancement.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
HTML-first bedeutet, eine Website funktioniert zuerst ohne JavaScript und wird erst danach angereichert. Genau dieser Ansatz brachte einem britischen Versorger über Nacht doppelt so viele abgeschlossene Anträge. Der Entwickler Alistair Davidson hat den Fall öffentlich beschrieben.
Das Wichtigste in Kürze
- Ein als React-App gebautes Antragsformular wurde nach drei Tagen wegen Kundenbeschwerden wieder abgeschaltet.
- Die neue Version setzte auf Astro, HTML-Formulare und Web Components nur zur Anreicherung.
- Nach dem Start verdoppelte sich die Zahl der abgeschlossenen Formulare, sichtbar wurden Nutzer, die das JavaScript-Tracking vorher gar nicht erfasst hatte.
Was lief mit der React-Version schief?
React-App nach drei Tagen offline genommen: fehlende Barrierefreiheit, localStorage-Limits bei 5 MB und Datenverluste bei schlechter VerbindungAbgeschaltet nach drei Tagen. Die zuvor von externen Auftragnehmern gebaute React-App war drei Tage online, dann nahm eine Welle von Beschwerden sie wieder vom Netz. Die Anwendung war nicht barrierefrei und speicherte Uploads im localStorage, der bei 5 MB endet.
Daten in Gefahr. Bei schlechter Verbindung gingen Eingaben verloren. Für eine regulierte Monopol-Dienstleistung mit hohen Zufriedenheitsauflagen war das ein ernstes Risiko.
Was machte die HTML-Version besser?
Jede Seite ein Schritt. Der neue Aufbau gab jedem Schritt im Formular-Assistenten eine eigene Seite. Nach jedem Klick speicherte das Backend die Daten samt Uploads, sodass ein Nutzer das Formular sogar einen Monat nach Beginn abschließen konnte.
Validierung im Browser. Eine Web Component von unter einem Kilobyte griff die native HTML-Validierung ab und reichte Fehler an die passenden ARIA-Felder weiter. Fiel die Komponente aus, übernahm der Browser, danach die API.
Ein großes Formular mit 20 Megabyte JavaScript sortiert genau die Nutzer aus, die man erreichen müsste. Der Fall zeigt, dass solide Grundlagen oft mehr bringen als das nächste Framework.
— Markus Seyfferth, Chefredakteur Dr. Web
Was nehmen Sie für eigene Projekte mit?
Erst tragfähig, dann schön. Bauen Sie kritische Formulare so, dass sie ohne JavaScript funktionieren, und reichern Sie danach an. Das schützt Nutzer mit alten Geräten, schwacher Verbindung oder Hilfstechnologie.
Die vollständige Fallbeschreibung hat Davidson auf seinem Blog veröffentlicht. Für mehr Suchsichtbarkeit liefern unsere SEO-Grundlagen die passende Basis.
Mehr #Webdesign News
Mehr zu Progressive Enhancement
Mehr Newshunger?
