Váš kontaktní formulář se načítá 8 sekund, protože obsahuje obří knihovnu pro ověřování, několik pluginů JavaScriptu a analytický skript. Než je formulář připravený, polovina návštěvníků odešla ke konkurenci.
Výkon formulářů je důležitý. Pomalý formulář působí rozbitě. Rychlý působí svižně. Tento článek ukazuje, jak optimalizovat dobu načtení formulářů a rychlost zadávání.
Co ovlivňuje výkon formuláře?
Výkon formuláře má dvě části: dobu načtení (jak dlouho trvá, než se formulář zobrazí) a rychlost interakce (jak svižně působí při psaní nebo klikání).
Dobu načtení ovlivňují knihovny JavaScriptu (velká knihovna pro ověřování přidá 50 kB kódu a pluginy pro ověřování, knihovny pro automatické doplňování a výběry data přidávají další zátěž), velikost souborů CSS (velké soubory CSS blokují vykreslení, protože stránka čeká, až se CSS stáhne a zpracuje, než se může zobrazit) a skripty třetích stran (analytika, sledovací pixely, reklamy a chatovací widgety přidávají další požadavky). Rychlost interakce ovlivňuje doba provádění JavaScriptu (pokud se ověřování spouští při každém stisku klávesy, musí prohlížeč zpracovat a provést kód pro každý napsaný znak, což může způsobit zpoždění), přepočítávání rozvržení (opakovaná změna DOM a čtení rozměrů nutí prohlížeč přepočítat rozvržení, což je náročné) a velký formulář (formulář s 50 poli se vykresluje pomaleji než formulář s 5 poli).
Zmenšení JavaScriptu formuláře
JavaScript je největší brzda výkonu. Jedna knihovna pro ověřování může mít 40 kB. Knihovna pro výběr data 20 kB. Automatické doplňování 15 kB.
První možnost: místo JavaScriptu použijte ověřování v HTML. Pole formulářů v HTML5 mají vestavěné ověřování. type="email" kontroluje formát e-mailu. required kontroluje prázdné hodnoty. pattern ověřuje podle regulárního výrazu. Funguje to ve všech moderních prohlížečích a nepotřebuje to žádný JavaScript.
Druhá možnost: napište si vlastní jednoduché ověřování místo knihovny. 50 řádků čistého JavaScriptu je lehčích než knihovna o 40 kB.
Třetí možnost je načítat knihovny pro ověřování líně, tedy až když se uživatel pokusí formulář odeslat. Většina odeslání formulářů nastane hned po načtení stránky, takže uživatel v tu chvíli už píše. Ověřování načtěte na pozadí poté, co je stránka interaktivní, pomocí window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });.
Kritické CSS pro formuláře
Kritické CSS vložte přímo do stránky, aby byl formulář vidět hned. Kritické CSS je minimální stylování potřebné k tomu, aby se formulář zobrazil, například <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>. Formulář se tak vykreslí okamžitě, zatímco zbytek CSS se načítá asynchronně pomocí <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">, které načte stylopis bez blokování vykreslení stránky.
Odložení nekritických skriptů
Analytiku, sledovací pixely a další nekritické skripty přesuňte na konec stránky nebo je odložte. Použijte <script async src="/analytics.js"></script>, kde async načte skript souběžně se stránkou a neblokuje vykreslení. Případně použijte <script defer src="/analytics.js"></script>, kde defer načte skript až po obsahu stránky, takže je formulář k dispozici dřív, než se načte analytika.
Optimalizace odezvy polí formuláře
Pokud se ověřování v JavaScriptu spouští při každém stisku klávesy, formulář působí pomalu. Použijte debouncing: ověřování spusťte až poté, co uživatel na chvíli přestane psát, pomocí let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });. Ověřování proběhne 300 ms poté, co uživatel přestane psát, takže formulář při psaní působí svižně a ověření se děje na pozadí.
Snížení počtu polí formuláře
Víc polí = pomalejší formulář. Formulář s 50 poli má víc prvků DOM, víc CSS k výpočtu a víc JavaScriptu ke spuštění.
Zeptejte se sami sebe: opravdu toto pole potřebuji? Pokud je odpověď "možná" nebo "bylo by to hezké", odstraňte ho. Kratší formuláře se načítají rychleji a líp konvertují.
Líné načítání vylepšení formuláře
Ne každé pole formuláře potřebuje při načtení stránky propracovaný výběr data nebo automatické doplňování. Tato vylepšení načtěte, až když je uživatel potřebuje, pomocí <input type="date" id="date-field"> a if (!supportDate()) { loadDatePickerLibrary(); }. Prohlížeče, které podporují nativní zadání data, si tak nestahují zbytečnou knihovnu.
Metriky výkonu formuláře
K měření metrik specifických pro formulář použijte performance.mark(), například 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ěřte také zpoždění při psaní pomocí performance.measure() a sledujte, jak dlouho trvá ověření jednoho stisku klávesy.
Testování výkonu formuláře
Dobu načtení formuláře a odezvu při psaní změřte v Chrome DevTools. Otevřete kartu Performance. Nahrajte relaci, ve které načtete stránku a pracujete s formulářem. Hledejte dlouhé úlohy, které blokují interakci. Hledejte přepočítávání rozvržení (rychlé opakované výpočty).
Testujte na pomalých sítích pomocí omezení rychlosti (Chrome DevTools > Network > slow 3G). Formulář, který se vám na počítači zdá rychlý, může být pomalý pro někoho na mobilu se slabým připojením.
Jak WEMASY optimalizuje výkon formulářů
Formuláře WEMASY jsou postavené na rychlost. Minimum JavaScriptu. Postupné vylepšování. Líné načítání vylepšení. Vykreslování na straně serveru, kde je to možné.
Funkce pro výkon uvidíte ve svém tarifu WEMASY.