Din kontaktformular bruger 8 sekunder på at indlæses, fordi den indeholder et stort bibliotek til validering, flere JavaScript-plugins og et analyse-script. Når formularen er klar, er halvdelen af dine besøgende gået videre til en konkurrent.
Formularens hastighed betyder noget. En langsom formular føles ødelagt. En hurtig formular føles responsiv. Her gennemgår vi, hvordan du optimerer indlæsningstid og hastighed i felterne.
Hvad påvirker formularens hastighed?
Formularens hastighed har to dele: indlæsningstid (hvor lang tid der går, før formularen vises) og hastighed i brug (hvor hurtigt den reagerer, når du skriver eller klikker).
Indlæsningstiden påvirkes af JavaScript-biblioteker (et stort valideringsbibliotek lægger 50 kb kode oven i, og plugins til validering, autoudfyld og datovælgere vejer også), størrelsen på CSS-filer (store CSS-filer blokerer visningen, mens siden venter på, at CSS bliver hentet og læst, før noget kan vises) og scripts fra tredjepart (analytics, sporingspixels, reklamer og chatwidgets giver alle ekstra forespørgsler). Hastigheden i brug påvirkes af, hvor lang tid JavaScript tager at køre (hvis validering kører ved hvert tastetryk, må browseren læse og køre kode for hvert tegn, der skrives, og det kan give forsinkelse), layout thrashing (hvis du ændrer DOM og læser mål igen og igen, må browseren genberegne layoutet hele tiden, og det er dyrt) og formularens størrelse (en formular med 50 felter vises langsommere end en med 5 felter).
Skær ned på mængden af JavaScript
JavaScript er det, der bremser mest. Et enkelt valideringsbibliotek kan fylde 40 kb. Et bibliotek til datovælger kan fylde 20 kb. Autoudfyld kan fylde 15 kb.
Første mulighed: Brug HTML-validering i stedet for JavaScript. HTML5-felter har indbygget validering. type="email" tjekker formatet på e-mail. required tjekker for tomme værdier. pattern validerer mod et regulært udtryk. Det virker i alle moderne browsere og kræver slet ingen JavaScript.
Anden mulighed: Skriv din egen enkle validering i stedet for at bruge et bibliotek. 50 linjer validering i almindeligt JavaScript er lettere end et bibliotek på 40 kb.
Tredje mulighed er at indlæse valideringsbiblioteker sent, så de først hentes, når brugeren prøver at sende. De fleste begynder at skrive, så snart siden er indlæst, så på det tidspunkt er brugeren allerede i gang. Indlæs validering i baggrunden, når siden er klar til brug, med window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
Kritisk CSS til formularer
Læg den kritiske CSS direkte i siden, så formularen kan ses med det samme. Kritisk CSS er det mindste design, formularen skal bruge for at kunne vises, som <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. Så vises formularen med det samme, mens resten af CSS'en indlæses ved siden af med <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">, som henter stilarket uden at blokere for visningen af siden.
Udskyd scripts, der ikke er kritiske
Flyt analytics, sporingspixels og andre scripts, der ikke er kritiske, til bunden af siden, eller udskyd dem. Brug <script async src="/analytics.js"></script>, hvor async henter scriptet samtidig med siden og ikke blokerer visningen. Eller brug <script defer src="/analytics.js"></script>, hvor defer henter scriptet, efter sidens indhold er indlæst, så formularen er klar, før analytics hentes.
Gør felterne mere responsive
Hvis JavaScript-validering kører ved hvert tastetryk, føles formularen langsom. Brug debounce, så validering først kører, når brugeren har holdt en lille pause i skrivningen, med let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. Valideringen kører 300 ms efter, at brugeren holder op med at skrive, så formularen føles hurtig, mens man skriver, og valideringen sker i baggrunden.
Færre felter
Flere felter = langsommere formular. En formular med 50 felter har flere DOM-elementer, mere CSS at regne på og mere JavaScript at køre.
Spørg dig selv: har jeg virkelig brug for det her felt? Hvis svaret er "måske" eller "det ville være rart", så fjern det. Kortere formularer indlæses hurtigere og giver flere konverteringer.
Indlæs forbedringer af formularen sent
Ikke alle formularfelter har brug for en smart datovælger eller autoudfyld, når siden indlæses. Indlæs kun forbedringerne, når brugeren har brug for dem, med <input type="date" id="date-field"> og if (!supportDate()) { loadDatePickerLibrary(); }. På den måde henter browsere, der selv kan vise datofelter, ikke et ekstra bibliotek.
Mål formularens hastighed
Brug performance.mark() til at måle tal for formularen, for eksempel 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');. Mål også forsinkelsen i felterne med performance.measure() for at se, hvor lang tid validering tager pr. tastetryk.
Test formularens hastighed
Brug Chrome DevTools til at måle indlæsningstid og hvor hurtigt formularen reagerer. Åbn fanen Performance. Optag en session, hvor du indlæser siden og bruger formularen. Kig efter lange opgaver, der blokerer for brugen. Kig efter layout thrashing (hurtige genberegninger).
Test på langsomme netværk med throttling (Chrome DevTools > Network > slow 3G). En formular, der føles hurtig på din computer, kan føles langsom for en, der sidder på mobil med dårlig forbindelse.
Sådan optimerer WEMASY hastigheden i formularer
WEMASY-formularer er lavet til hastighed. Minimalt JavaScript. Progressiv forbedring. Forbedringer, der indlæses sent. Rendering på serveren, hvor det er muligt.
Se de funktioner, der gør formularer hurtige, i din WEMASY-plan.