A kapcsolatfelvételi űrlapod 8 másodpercig tölt, mert tartalmaz egy hatalmas űrlapellenőrző könyvtárat, több JavaScript-bővítményt és egy analitikai szkriptet. Mire az űrlap kész, a látogatóid fele már átment a versenytársadhoz.
Az űrlap teljesítménye számít. A lassú űrlap elromlottnak érződik. A gyors űrlap reagálónak. Ez a cikk bemutatja, hogyan optimalizáld az űrlapok betöltési idejét és a bevitel sebességét.
Mi befolyásolja az űrlap teljesítményét?
Az űrlap teljesítményének két része van: a betöltési idő (mennyi idő alatt jelenik meg az űrlap) és az interakciós sebesség (mennyire érződik reagálónak gépeléskor vagy kattintáskor).
A betöltési időt befolyásolják a JavaScript-könyvtárak (egy nagy űrlapellenőrző könyvtár 50 kb kódot ad hozzá, az ellenőrző bővítmények, az automatikus kiegészítő könyvtárak és a dátumválasztók mind súlyt adnak), a CSS-fájl mérete (a nagy CSS-fájlok blokkolják a megjelenítést, mert az oldal megvárja a CSS letöltését és feldolgozását, mielőtt megjelenítene bármit), és a külső szkriptek (analitika, követőpixelek, hirdetések és chat widgetek mind további kéréseket adnak). Az interakciós sebességet befolyásolja a JavaScript végrehajtási ideje (ha az ellenőrzés minden billentyűleütésnél lefut, a böngészőnek minden begépelt karakterhez kódot kell értelmeznie és végrehajtania, ami késést okozhat), az elrendezés ismételt újraszámítása (ha többször módosítod a DOM-ot és olvasod a méreteket, a böngésző kénytelen újraszámolni az elrendezést, ami költséges), és az űrlap nagy mérete (az 50 mezős űrlap lassabban jelenik meg, mint az 5 mezős).
Az űrlap JavaScript-méretének csökkentése
A JavaScript a legnagyobb teljesítménycsökkentő. Egyetlen ellenőrző könyvtár lehet 40 kb. Egy dátumválasztó könyvtár lehet 20 kb. Egy automatikus kiegészítő lehet 15 kb.
Első lehetőség: használj HTML-es ellenőrzést JavaScript helyett. A HTML5 űrlapmezőknek beépített ellenőrzésük van. A type="email" az e-mail formátumát ellenőrzi. A required az üres értékeket. A pattern reguláris kifejezés alapján érvényesít. Ez minden modern böngészőben működik, és nulla JavaScriptet igényel.
Második lehetőség: írj saját egyszerű ellenőrzést könyvtár használata helyett. 50 sor egyszerű JavaScript-ellenőrzés könnyebb, mint egy 40 kb-os könyvtár.
A harmadik lehetőség az ellenőrző könyvtárak késleltetett betöltése: csak azután töltsd be őket, hogy a felhasználó megpróbálja beküldeni az űrlapot. A legtöbb űrlapbeküldés nem azonnal az oldal betöltése után történik, addigra a felhasználó már gépel. Töltsd be az ellenőrzést a háttérben, miután az oldal interaktívvá vált, ezzel: window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
Kritikus CSS az űrlapokhoz
Ágyazd be a kritikus CSS-t, hogy az űrlap azonnal látható legyen. A kritikus CSS az a minimális stílus, amely az űrlap megjelenéséhez kell, például: <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. Ez azonnal megjeleníti az űrlapot, miközben a többi CSS aszinkron módon töltődik be ezzel: <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">, amely az oldal megjelenítésének blokkolása nélkül tölti be a stíluslapot.
A nem kritikus szkriptek késleltetése
Told át az analitikát, a követőpixeleket és a többi nem kritikus szkriptet az oldal végére, vagy késleltesd őket. Használd ezt: <script async src="/analytics.js"></script>, ahol az async az oldallal párhuzamosan tölti be a szkriptet, és nem blokkolja a megjelenítést. Vagy használd ezt: <script defer src="/analytics.js"></script>, ahol a defer az oldal tartalma után tölti be a szkriptet, így az űrlap elérhető, mielőtt az analitika betöltődne.
Az űrlapbevitel reagálóképességének optimalizálása
Ha a JavaScript-ellenőrzés minden billentyűleütésnél lefut, az űrlap lassúnak érződik. Használj debounce-t: az ellenőrzés csak azután fusson le, hogy a felhasználó egy pillanatra abbahagyta a gépelést, ezzel: let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. Az ellenőrzés 300 ms-mal azután fut, hogy a felhasználó abbahagyta a gépelést, így az űrlap gépelés közben reagálónak érződik, az ellenőrzés pedig a háttérben történik.
Az űrlapmezők számának csökkentése
Több mező = lassabb űrlap. Az 50 mezős űrlapnak több DOM-eleme van, több CSS-t kell kiszámítani, és több JavaScriptet kell futtatni.
Kérdezd meg magadtól: tényleg szükségem van erre a mezőre? Ha a válasz „talán” vagy „jó lenne”, vedd ki. A rövidebb űrlapok gyorsabban töltődnek be, és jobban konvertálnak.
Az űrlapfejlesztések késleltetett betöltése
Nem minden űrlapmezőnek kell hivalkodó dátumválasztó vagy automatikus kiegészítés az oldal betöltésekor. Ezeket a fejlesztéseket csak akkor töltsd be, amikor a felhasználónak szüksége van rájuk, ezzel: <input type="date" id="date-field"> és if (!supportDate()) { loadDatePickerLibrary(); }. Így azok a böngészők, amelyek támogatják a natív dátumbevitelt, nem töltenek le extra könyvtárat.
Űrlapteljesítmény-mutatók
Használd a performance.mark() függvényt az űrlapspecifikus mutatók méréséhez, például: 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érd a bevitel késését is a performance.measure() függvénnyel, hogy kövesd, mennyi ideig tart az ellenőrzés billentyűleütésenként.
Az űrlap teljesítményének tesztelése
Használd a Chrome DevToolst az űrlap betöltési idejének és a bevitel reagálóképességének méréséhez. Nyisd meg a Performance fület. Rögzíts egy munkamenetet, amelyben betöltöd az oldalt, és használod az űrlapot. Keresd a hosszú feladatokat, amelyek blokkolják az interakciót. Keresd az elrendezés ismételt újraszámítását (gyors újraszámolások).
Teszteld lassú hálózaton sávszélesség-korlátozással (Chrome DevTools > Network > slow 3G). Az az űrlap, amely a te gépeden gyorsnak tűnik, lassúnak érződhet annak, aki mobilon, ingadozó kapcsolaton van.
Hogyan optimalizálja a WEMASY az űrlapok teljesítményét
A WEMASY űrlapjait sebességre építettük. Minimális JavaScript. Fokozatos fejlesztés. A fejlesztések késleltetett betöltése. Ahol lehet, szerveroldali megjelenítés. Az űrlapok 1 másodpercen belül betöltődnek még lassú hálózaton is.
Nézd meg a teljesítményfunkciókat a WEMASY csomagodban.