Ditt kontaktformulär tar 8 sekunder att ladda eftersom det innehåller ett stort bibliotek för validering, flera jQuery-tillägg och ett analysskript. När formuläret är klart har hälften av dina besökare gått vidare till en konkurrent.
Formulärens prestanda spelar roll. Ett långsamt formulär känns trasigt. Ett snabbt formulär känns responsivt. Den här artikeln går igenom hur du optimerar formulärens laddtider och hastighet vid inmatning.
Vad påverkar formulärens prestanda?
Formulärens prestanda har två delar: laddtid (hur lång tid det tar innan formuläret visas) och interaktionshastighet (hur responsivt det känns när du skriver eller klickar).
Laddtiden påverkas av JavaScript-bibliotek (ett stort valideringsbibliotek lägger till 50 kB kod, och valideringstillägg, bibliotek för autofyll och datumväljare tillför alla vikt), CSS-filens storlek (stora CSS-filer blockerar visningen medan sidan väntar på att CSS ska laddas ner och tolkas innan den kan visas) och skript från tredje part (analys, spårningspixlar, annonser och chattwidgetar lägger alla till förfrågningar). Interaktionshastigheten påverkas av körtiden för JavaScript (körs validering vid varje tangenttryckning måste webbläsaren tolka och köra kod för varje tecken som skrivs, vilket kan ge fördröjning), layoutstrul (att ändra DOM och läsa av mått om och om igen tvingar webbläsaren att räkna om layouten, vilket är dyrt) och formulärets storlek (ett formulär med 50 fält visas långsammare än ett med 5 fält).
Minska storleken på formulärets JavaScript
JavaScript är det som drar ner prestandan mest. Ett enda valideringsbibliotek kan vara 40 kB. Ett bibliotek för datumväljare kan vara 20 kB. Autofyll kan vara 15 kB.
Första alternativet: Använd HTML-validering i stället för JavaScript. HTML5-fält har inbyggd validering. type="email" kontrollerar formatet på e-post. required kontrollerar tomma värden. pattern validerar mot ett reguljärt uttryck. Det fungerar i alla moderna webbläsare och kräver noll JavaScript.
Andra alternativet: Skriv din egen enkla validering i stället för att använda ett bibliotek. 50 rader vanlig JavaScript-validering är lättare än ett bibliotek på 40 kB.
Tredje alternativet är att ladda valideringsbibliotek lat genom att ladda dem först när användaren försöker skicka. De flesta inskick sker strax efter att sidan laddats, så då skriver användaren redan. Ladda validering i bakgrunden när sidan är interaktiv med window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
Kritisk CSS för formulär
Lägg kritisk CSS direkt i sidan så att formuläret syns omedelbart. Kritisk CSS är den minsta stil som behövs för att formuläret ska visas, till exempel <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. Då visas formuläret direkt medan resten av CSS laddas asynkront med <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">, som laddar formatmallen utan att blockera visningen av sidan.
Skjuta upp skript som inte är kritiska
Flytta analys, spårningspixlar och andra skript som inte är kritiska till slutet av sidan eller skjut upp dem. Använd <script async src="/analytics.js"></script>, där async laddar skriptet parallellt med sidan och inte blockerar visningen. Alternativt använder du <script defer src="/analytics.js"></script>, där defer laddar skriptet efter sidans innehåll så att formuläret är tillgängligt innan analysen laddas.
Optimera formulärfältens responsivitet
Körs JavaScript-validering vid varje tangenttryckning känns formuläret långsamt. Fördröj valideringen genom att bara köra den när användaren slutat skriva en stund med let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. Valideringen körs 300 ms efter att användaren slutat skriva, så formuläret känns responsivt medan man skriver och valideringen sker i bakgrunden.
Minska antalet fält
Fler fält = långsammare formulär. Ett formulär med 50 fält har fler DOM-element, mer CSS att räkna ut och mer JavaScript att köra.
Fråga dig själv: behöver jag verkligen det här fältet? Är svaret "kanske" eller "det vore bra", ta bort det. Kortare formulär laddas snabbare och konverterar bättre.
Ladda förbättringar av formulär lat
Inte varje formulärfält behöver en snygg datumväljare eller autofyll när sidan laddas. Ladda de här förbättringarna först när användaren behöver dem med <input type="date" id="date-field"> och if (!supportDate()) { loadDatePickerLibrary(); }. På så vis laddar webbläsare som stöder inbyggd datuminmatning inte ner något extra bibliotek.
Mått för formulärens prestanda
Använd performance.mark() för att mäta formulärspecifika mått, till exempel 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ät också fördröjningen vid inmatning med performance.measure() för att följa hur lång tid validering tar per tangenttryckning.
Testa formulärens prestanda
Använd Chrome DevTools för att mäta formulärets laddtid och responsivitet vid inmatning. Öppna fliken Performance. Spela in en session där du laddar sidan och använder formuläret. Leta efter långa uppgifter som blockerar interaktionen. Leta efter layoutstrul (snabba omräkningar).
Testa på långsamma nätverk med strypning (Chrome DevTools > Network > slow 3G). Ett formulär som känns snabbt på din dator kan kännas långsamt för någon på mobil med ojämn anslutning.
Så optimerar WEMASY formulärens prestanda
WEMASY-formulär är byggda för hastighet. Minimal JavaScript. Progressiv förbättring. Lat laddning av förbättringar. Rendering på servern där det går. Formulär laddas på under 1 sekund även på långsamma nätverk.
Se funktionerna för prestanda i ditt WEMASY-abonnemang.