Yhteydenottolomakkeesi latautuu 8 sekuntia, koska siinä on valtava lomakkeen tarkistuskirjasto, useita JavaScript-lisäosia ja analytiikkaskripti. Kun lomake on valmis, puolet kävijöistäsi on jo siirtynyt kilpailijasi sivulle.
Lomakkeen suorituskyky on tärkeää. Hidas lomake tuntuu rikkinäiseltä. Nopea lomake tuntuu reagoivalta. Tässä artikkelissa kerrotaan, miten optimoit lomakkeen latausajat ja syötön nopeuden.
Mikä vaikuttaa lomakkeen suorituskykyyn?
Lomakkeen suorituskyky koostuu kahdesta osasta: latausajasta (kuinka kauan lomakkeen näkymiseen menee) ja vuorovaikutusnopeudesta (kuinka reagoivalta se tuntuu, kun kirjoitat tai napsautat).
Latausaikaan vaikuttavat JavaScript-kirjastot (iso lomakkeen tarkistuskirjasto lisää 50 kt koodia, ja tarkistuslisäosat, automaattisen täytön kirjastot ja päivämäärävalitsimet lisäävät kaikki painoa), CSS-tiedoston koko (suuret CSS-tiedostot estävät sivun piirtämisen, kun sivu odottaa CSS:n latautumista ja jäsentämistä ennen näyttämistä) ja kolmannen osapuolen skriptit (analytiikka, seurantapikselit, mainokset ja chat-widgetit lisäävät kaikki pyyntöjä). Vuorovaikutusnopeuteen vaikuttavat JavaScriptin suoritusaika (jos tarkistus ajetaan jokaisella näppäilyllä, selaimen pitää jäsentää ja suorittaa koodi jokaiselle kirjoitetulle merkille, mikä voi aiheuttaa viivettä), asettelun toistuva laskenta (DOMin muuttaminen ja mittojen lukeminen toistuvasti pakottaa selaimen laskemaan asettelun uudelleen, mikä on raskasta) ja lomakkeen suuri koko (50 kentän lomake piirtyy hitaammin kuin 5 kentän lomake).
Lomakkeen JavaScriptin koon pienentäminen
JavaScript on suurin suorituskyvyn jarru. Yksi tarkistuskirjasto voi olla 40 kt. Päivämäärävalitsimen kirjasto voi olla 20 kt. Automaattinen täyttö voi olla 15 kt.
Ensimmäinen vaihtoehto: Käytä JavaScriptin sijaan HTML-tarkistusta. HTML5-lomakekentissä on sisäänrakennettu tarkistus. type="email" tarkistaa sähköpostin muodon. required tarkistaa tyhjät arvot. pattern tarkistaa säännöllisen lausekkeen mukaan. Tämä toimii kaikissa nykyaikaisissa selaimissa eikä vaadi lainkaan JavaScriptiä.
Toinen vaihtoehto: Koodaa oma yksinkertainen tarkistus kirjaston käytön sijaan. 50 rivin puhdas JavaScript-tarkistus on kevyempi kuin 40 kt:n kirjasto.
Kolmas vaihtoehto on ladata tarkistuskirjastot laiskasti vasta, kun käyttäjä yrittää lähettää lomakkeen. Useimmat lähetykset tapahtuvat heti sivun latautumisen jälkeen, joten silloin käyttäjä jo kirjoittaa. Lataa tarkistus taustalla, kun sivu on käyttövalmis: window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
Kriittinen CSS lomakkeille
Lisää kriittinen CSS suoraan sivuun, jotta lomake näkyy heti. Kriittinen CSS on vähimmäismuotoilu, jota lomake tarvitsee näkyäkseen, esimerkiksi <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. Tämä piirtää lomakkeen heti, kun loppu CSS latautuu asynkronisesti näin: <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">. Tämä lataa tyylitiedoston estämättä sivun piirtämistä.
Ei-kriittisten skriptien lykkääminen
Siirrä analytiikka, seurantapikselit ja muut ei-kriittiset skriptit sivun loppuun tai lykkää niitä. Käytä <script async src="/analytics.js"></script>, jossa async lataa skriptin rinnakkain sivun kanssa eikä estä piirtämistä. Vaihtoehtoisesti käytä <script defer src="/analytics.js"></script>, jossa defer lataa skriptin sivun sisällön jälkeen, jolloin lomake on käytettävissä ennen analytiikan latautumista.
Lomakkeen syötön reagointinopeuden optimointi
Jos JavaScript-tarkistus ajetaan jokaisella näppäilyllä, lomake tuntuu hitaalta. Viivästä tarkistusta niin, että se ajetaan vasta, kun käyttäjä lopettaa kirjoittamisen hetkeksi: let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. Tarkistus ajetaan 300 ms sen jälkeen, kun käyttäjä lopettaa kirjoittamisen, joten lomake tuntuu reagoivalta kirjoittaessa ja tarkistus tapahtuu taustalla.
Lomakkeen kenttien määrän vähentäminen
Enemmän kenttiä = hitaampi lomake. 50 kentän lomakkeessa on enemmän DOM-elementtejä, enemmän laskettavaa CSS:ää ja enemmän suoritettavaa JavaScriptiä.
Kysy itseltäsi: tarvitsenko tätä kenttää oikeasti? Jos vastaus on "ehkä" tai "olisi kiva", poista se. Lyhyemmät lomakkeet latautuvat nopeammin ja konvertoivat paremmin.
Lomakkeen lisäosien laiska lataus
Jokainen lomakekenttä ei tarvitse hienoa päivämäärävalitsinta tai automaattista täyttöä sivun latautuessa. Lataa nämä lisäosat vasta, kun käyttäjä tarvitsee niitä: <input type="date" id="date-field"> ja if (!supportDate()) { loadDatePickerLibrary(); }. Näin selaimet, jotka tukevat natiivia päivämääräkenttää, eivät lataa ylimääräistä kirjastoa.
Lomakkeen suorituskykymittarit
Käytä performance.mark()-funktiota mitataksesi lomakekohtaisia mittareita, esimerkiksi 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');. Mittaa myös syötön viivettä performance.measure()-funktiolla nähdäksesi, kuinka kauan tarkistus kestää yhtä näppäilyä kohden.
Lomakkeen suorituskyvyn testaus
Käytä Chrome DevToolsia lomakkeen latausajan ja syötön reagointinopeuden mittaamiseen. Avaa Performance-välilehti. Tallenna istunto, jossa lataat sivun ja käytät lomaketta. Etsi pitkiä tehtäviä, jotka estävät vuorovaikutuksen. Etsi asettelun toistuvaa laskentaa (nopeita uudelleenlaskentoja).
Testaa hitailla verkoilla kuristuksen avulla (Chrome DevTools > Network > slow 3G). Lomake, joka tuntuu nopealta omalla tietokoneellasi, voi tuntua hitaalta mobiilissa heikolla yhteydellä olevalle.
Näin WEMASY optimoi lomakkeen suorituskyvyn
WEMASY-lomakkeet on tehty nopeiksi. Mahdollisimman vähän JavaScriptiä. Asteittainen parantaminen. Lisäosien laiska lataus. Palvelinpuolen piirto aina kun mahdollista.
Katso suorituskykyominaisuudet WEMASY-paketistasi.