Dein Kontaktformular braucht 8 Sekunden zum Laden, weil es eine riesige Validierungsbibliothek, mehrere Plugins und ein Analyse-Skript enthält. Bis das Formular bereit ist, ist die Hälfte deiner Besucher schon bei der Konkurrenz.
Die Performance von Formularen zählt. Ein langsames Formular wirkt kaputt. Ein schnelles Formular reagiert flüssig. In diesem Artikel erfährst du, wie du Ladezeiten und Eingabetempo von Formularen optimierst.
Was beeinflusst die Formular-Performance?
Die Performance eines Formulars hat zwei Teile: die Ladezeit (wie lange das Formular bis zur Anzeige braucht) und die Reaktionsgeschwindigkeit (wie flüssig es sich beim Tippen oder Klicken anfühlt).
Die Ladezeit hängt von JavaScript-Bibliotheken ab (eine große Validierungsbibliothek fügt 50 kB Code hinzu, und Validierungs-Plugins, Autocomplete-Bibliotheken und Datumsauswahlen bringen zusätzliches Gewicht), von der CSS-Dateigröße (große CSS-Dateien blockieren das Rendern, weil die Seite warten muss, bis das CSS geladen und verarbeitet ist) und von Skripten von Drittanbietern (Analysen, Tracking-Pixel, Werbung und Chat-Widgets verursachen alle zusätzliche Anfragen). Die Reaktionsgeschwindigkeit hängt von der Ausführungszeit des JavaScripts ab (läuft die Validierung bei jedem Tastendruck, muss der Browser für jedes getippte Zeichen Code verarbeiten und ausführen, was Verzögerungen verursachen kann), vom Layout-Thrashing (wer das DOM ändert und Abmessungen wiederholt ausliest, zwingt den Browser zu ständigen, teuren Neuberechnungen des Layouts) und von der Formulargröße (ein Formular mit 50 Feldern rendert langsamer als eines mit 5 Feldern).
Die JavaScript-Größe von Formularen reduzieren
JavaScript bremst die Performance am stärksten. Eine einzelne Validierungsbibliothek kann 40 kB groß sein. Eine Datumsauswahl-Bibliothek 20 kB. Ein Autocomplete 15 kB.
Erste Möglichkeit: HTML-Validierung statt JavaScript nutzen. HTML5-Eingabefelder haben eine eingebaute Validierung. type="email" prüft das E-Mail-Format. required prüft auf leere Werte. pattern prüft gegen einen regulären Ausdruck. Das funktioniert in allen modernen Browsern und braucht null JavaScript.
Zweite Möglichkeit: Programmiere eine eigene, einfache Validierung, statt eine Bibliothek zu nutzen. 50 Zeilen JavaScript ohne Bibliothek sind leichter als eine Bibliothek mit 40 kB.
Dritte Möglichkeit: Lade Validierungsbibliotheken verzögert und erst, wenn der Nutzer absenden will. Die meisten Nutzer beginnen sofort nach dem Laden der Seite zu tippen, also lade die Validierung im Hintergrund, sobald die Seite bedienbar ist, mit window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
Critical CSS für Formulare
Binde das kritische CSS direkt ein, damit das Formular sofort sichtbar ist. Critical CSS ist das Minimum an Gestaltung, das für die Anzeige des Formulars nötig ist, etwa <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. So wird das Formular sofort gerendert, während das restliche CSS asynchron nachlädt, mit <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">. Das lädt das Stylesheet, ohne das Rendern der Seite zu blockieren.
Nicht kritische Skripte verzögern
Verschiebe Analysen, Tracking-Pixel und andere nicht kritische Skripte ans Seitenende oder verzögere sie. Nutze <script async src="/analytics.js"></script>: async lädt das Skript parallel zur Seite und blockiert das Rendern nicht. Alternativ nutzt du <script defer src="/analytics.js"></script>: defer lädt das Skript nach dem Seiteninhalt, sodass das Formular verfügbar ist, bevor die Analyse lädt.
Die Reaktionsgeschwindigkeit der Eingaben optimieren
Läuft die JavaScript-Validierung bei jedem Tastendruck, fühlt sich das Formular träge an. Nutze Debouncing: Die Validierung läuft erst, wenn der Nutzer einen Moment lang nicht tippt, mit let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. Die Validierung läuft 300 ms, nachdem der Nutzer aufgehört hat zu tippen, sodass sich das Formular beim Tippen flüssig anfühlt und die Validierung im Hintergrund passiert.
Die Zahl der Formularfelder reduzieren
Mehr Felder = langsameres Formular. Ein Formular mit 50 Feldern hat mehr DOM-Elemente, mehr CSS zu berechnen und mehr JavaScript auszuführen.
Frag dich: Brauche ich dieses Feld wirklich? Lautet die Antwort „vielleicht“ oder „wäre schön“, entferne es. Kürzere Formulare laden schneller und konvertieren besser.
Erweiterungen von Formularen verzögert laden
Nicht jedes Formularfeld braucht beim Laden der Seite eine aufwendige Datumsauswahl oder ein Autocomplete. Lade diese Erweiterungen erst, wenn der Nutzer sie braucht, mit <input type="date" id="date-field"> und if (!supportDate()) { loadDatePickerLibrary(); }. So laden Browser, die die native Datumseingabe unterstützen, keine zusätzliche Bibliothek herunter.
Kennzahlen zur Formular-Performance
Nutze performance.mark(), um formularspezifische Kennzahlen zu messen, etwa performance.mark('form-_blocked_-start'); performance.mark('form-_blocked_-end'); performance.measure('form-_blocked_', 'form-_blocked_-start', 'form-_blocked_-end'); const timing = performance.getEntriesByName('form-_blocked_')[0]; console.log('Form rendered in ' + timing.duration + 'ms');. Miss auch die Verzögerung bei Eingaben mit performance.measure(), um zu sehen, wie lange die Validierung pro Tastendruck dauert.
Die Formular-Performance testen
Nutze die Chrome DevTools, um Ladezeit und Reaktionsgeschwindigkeit des Formulars zu messen. Öffne den Tab Performance. Zeichne eine Sitzung auf, in der du die Seite lädst und mit dem Formular interagierst. Achte auf lange Tasks, die Interaktionen blockieren. Achte auf Layout-Thrashing (schnelle Neuberechnungen).
Teste in langsamen Netzen mit Drosselung (Chrome DevTools > Network > slow 3G). Ein Formular, das sich auf deinem Computer schnell anfühlt, kann sich für jemanden mit wackeliger mobiler Verbindung langsam anfühlen.
So optimiert WEMASY die Formular-Performance
WEMASY-Formulare sind auf Tempo gebaut. Minimales JavaScript. Schrittweise Erweiterung. Verzögertes Laden von Erweiterungen. Serverseitiges Rendern, wo möglich. Formulare laden in unter 1 Sekunde, auch in langsamen Netzen.
Sieh dir die Performance-Funktionen in deinem WEMASY-Tarif an.