Je contactformulier doet er 8 seconden over om te laden, omdat het een enorme validatiebibliotheek bevat, meerdere jQuery-plugins en een analyticsscript. Tegen de tijd dat het formulier klaar is, is de helft van je bezoekers al doorgegaan naar de concurrent.
Snelheid van formulieren is belangrijk. Een traag formulier voelt kapot. Een snel formulier voelt responsief. In dit artikel lees je hoe je laadtijden en invoersnelheid van formulieren verbetert.
Wat beïnvloedt de snelheid van een formulier?
Formuliersnelheid heeft twee delen: laadtijd (hoe lang het duurt voordat het formulier verschijnt) en reactiesnelheid (hoe responsief het aanvoelt als je typt of klikt).
De laadtijd wordt beïnvloed door JavaScript-bibliotheken (een grote validatiebibliotheek voegt 50kb code toe, en validatieplugins, bibliotheken voor automatisch aanvullen en datumkiezers maken het allemaal zwaarder), de grootte van CSS-bestanden (grote CSS-bestanden blokkeren het weergeven, omdat de pagina wacht tot de CSS is gedownload en verwerkt voordat hij kan worden getoond) en scripts van derden (analytics, trackingpixels, advertenties en chatwidgets voegen allemaal verzoeken toe). De reactiesnelheid wordt beïnvloed door de uitvoertijd van JavaScript (draait validatie bij elke toetsaanslag, dan moet de browser voor elk getypt teken code verwerken en uitvoeren, wat vertraging kan geven), layout thrashing (steeds de DOM wijzigen en afmetingen uitlezen dwingt de browser de opmaak opnieuw te berekenen, en dat is duur) en een groot formulier (een formulier met 50 velden wordt trager getoond dan een formulier met 5 velden).
De JavaScript van je formulier verkleinen
JavaScript is de grootste rem op de snelheid. Eén validatiebibliotheek kan 40kb zijn. Een bibliotheek voor een datumkiezer kan 20kb zijn. Automatisch aanvullen kan 15kb zijn.
Eerste optie: gebruik HTML-validatie in plaats van JavaScript. HTML5-invoervelden hebben ingebouwde validatie. type="email" controleert het e-mailformaat. required controleert op lege waarden. pattern valideert tegen een reguliere expressie. Dit werkt in alle moderne browsers en vereist geen JavaScript.
Tweede optie: schrijf zelf een eenvoudige validatie in plaats van een bibliotheek te gebruiken. 50 regels gewone JavaScript-validatie zijn lichter dan een bibliotheek van 40kb.
Derde optie is validatiebibliotheken uitgesteld laden, pas nadat de gebruiker probeert te versturen. De meeste formulieren worden pas verstuurd nadat de gebruiker al is gaan typen. Laad validatie op de achtergrond nadat de pagina bruikbaar is, met window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
Kritieke CSS voor formulieren
Zet kritieke CSS inline, zodat het formulier direct zichtbaar is. Kritieke CSS is de minimale opmaak die nodig is om het formulier te tonen, zoals <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. Zo verschijnt het formulier direct, terwijl de rest van de CSS asynchroon laadt met <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">, waarmee het stijlblad laadt zonder het weergeven van de pagina te blokkeren.
Niet-kritieke scripts uitstellen
Verplaats analytics, trackingpixels en andere niet-kritieke scripts naar het einde van de pagina of stel ze uit. Gebruik <script async src="/analytics.js"></script>, waarbij async het script parallel aan de pagina laadt en het weergeven niet blokkeert. Of gebruik <script defer src="/analytics.js"></script>, waarbij defer het script laadt na de inhoud van de pagina, zodat het formulier beschikbaar is voordat analytics laadt.
De reactiesnelheid bij het invullen verbeteren
Draait JavaScript-validatie bij elke toetsaanslag, dan voelt het formulier traag. Stel validatie uit (debounce), zodat die pas draait nadat de gebruiker even stopt met typen, met let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. Validatie draait 300 ms nadat de gebruiker stopt met typen, zodat het formulier tijdens het typen responsief aanvoelt en de validatie op de achtergrond gebeurt.
Minder velden in het formulier
Meer velden = trager formulier. Een formulier met 50 velden heeft meer DOM-elementen, meer CSS om te berekenen en meer JavaScript om uit te voeren.
Vraag jezelf af: heb ik dit veld echt nodig? Is het antwoord "misschien" of "het zou fijn zijn", haal het dan weg. Kortere formulieren laden sneller en converteren beter.
Verbeteringen van het formulier uitgesteld laden
Niet elk formulierveld heeft bij het laden van de pagina een fraaie datumkiezer of automatisch aanvullen nodig. Laad deze verbeteringen pas als de gebruiker ze nodig heeft, met <input type="date" id="date-field"> en if (!supportDate()) { loadDatePickerLibrary(); }. Zo downloaden browsers die een eigen datumveld ondersteunen geen extra bibliotheek.
Meetwaarden voor formuliersnelheid
Gebruik performance.mark() om meetwaarden voor je formulier te meten, zoals 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');. Meet ook de vertraging bij het typen met performance.measure() om te volgen hoe lang validatie per toetsaanslag duurt.
De snelheid van formulieren testen
Gebruik Chrome DevTools om de laadtijd en reactiesnelheid van je formulier te meten. Open het tabblad Performance. Neem een sessie op waarin je de pagina laadt en met het formulier werkt. Zoek naar lange taken die de interactie blokkeren. Zoek naar layout thrashing (snelle herberekeningen).
Test op trage netwerken met throttling (Chrome DevTools > Network > slow 3G). Een formulier dat op je eigen computer snel aanvoelt, kan traag zijn voor iemand op mobiel met een wisselende verbinding.
Hoe WEMASY de snelheid van formulieren optimaliseert
WEMASY-formulieren zijn gebouwd op snelheid. Minimaal JavaScript. Progressive enhancement. Verbeteringen worden uitgesteld geladen. Waar mogelijk weergave op de server. Formulieren laden in minder dan 1 seconde, ook op trage netwerken.
Bekijk de snelheidsfuncties in jouw WEMASY-abonnement.