फ़ॉर्म परफ़ॉर्मेंस ऑप्टिमाइज़ेशन: स्पीड और लोड टाइम

आपके कॉन्टैक्ट फ़ॉर्म को लोड होने में 8 सेकंड लगते हैं, क्योंकि उसमें बड़ी फ़ॉर्म वैलिडेशन लाइब्रेरी, कई JavaScript प्लगइन और एक एनालिटिक्स स्क्रिप्ट शामिल हैं। फ़ॉर्म तैयार होने तक आधे विज़िटर आपके प्रतिस्पर्धी के पास जा चुके होते हैं।

फ़ॉर्म की परफ़ॉर्मेंस मायने रखती है। धीमा फ़ॉर्म टूटा हुआ लगता है। तेज़ फ़ॉर्म जवाब देता हुआ लगता है। इस लेख में बताया गया है कि फ़ॉर्म का लोड टाइम और इनपुट स्पीड कैसे ऑप्टिमाइज़ करें।

फ़ॉर्म परफ़ॉर्मेंस पर क्या असर डालता है?

फ़ॉर्म परफ़ॉर्मेंस के दो हिस्से हैं: लोड टाइम (फ़ॉर्म को दिखने में कितना समय लगता है) और इंटरैक्शन स्पीड (टाइप या क्लिक करने पर वह कितना जवाबदेह लगता है)।

लोड टाइम पर असर डालते हैं: JavaScript लाइब्रेरी (बड़ी फ़ॉर्म वैलिडेशन लाइब्रेरी 50kb कोड जोड़ती है, और वैलिडेशन प्लगइन, ऑटो-कंप्लीट लाइब्रेरी और डेट पिकर सब वज़न बढ़ाते हैं), CSS फ़ाइल का साइज़ (बड़ी CSS फ़ाइलें रेंडरिंग रोकती हैं, क्योंकि पेज को दिखने से पहले CSS डाउनलोड और पार्स होने का इंतज़ार करना पड़ता है), और थर्ड-पार्टी स्क्रिप्ट (एनालिटिक्स, ट्रैकिंग पिक्सल, विज्ञापन और चैट विजेट सब रिक्वेस्ट बढ़ाते हैं)। इंटरैक्शन स्पीड पर असर डालते हैं: JavaScript चलने का समय (अगर हर कीस्ट्रोक पर वैलिडेशन चलता है, तो ब्राउज़र को टाइप किए हर अक्षर के लिए कोड पार्स और चलाना पड़ता है, जिससे लैग हो सकता है), लेआउट थ्रैशिंग (DOM बदलना और बार-बार साइज़ पढ़ना ब्राउज़र को लेआउट दोबारा निकालने पर मजबूर करता है, जो महंगा है), और फ़ॉर्म का बड़ा साइज़ (50 फ़ील्ड वाला फ़ॉर्म 5 फ़ील्ड वाले फ़ॉर्म से धीमा रेंडर होता है)।

फ़ॉर्म की JavaScript का साइज़ घटाना

JavaScript परफ़ॉर्मेंस पर सबसे बड़ा बोझ है। एक अकेली वैलिडेशन लाइब्रेरी 40kb की हो सकती है। डेट पिकर लाइब्रेरी 20kb की। ऑटो-कंप्लीट 15kb का।

पहला विकल्प: JavaScript की जगह HTML वैलिडेशन इस्तेमाल करें। HTML5 फ़ॉर्म इनपुट में बिल्ट-इन वैलिडेशन होता है। type="email" ईमेल का फ़ॉर्मेट जांचता है। required खाली वैल्यू जांचता है। pattern रेगुलर एक्सप्रेशन से वैलिडेट करता है। यह सभी आधुनिक ब्राउज़र में चलता है और इसमें ज़ीरो JavaScript लगती है।

दूसरा विकल्प: लाइब्रेरी इस्तेमाल करने की जगह अपना सरल वैलिडेशन कोड करें। वैनिला JavaScript के 50 लाइन के वैलिडेशन 40kb की लाइब्रेरी से हल्के होते हैं।

तीसरा विकल्प है वैलिडेशन लाइब्रेरी को लेज़ी लोड करना, यानी उन्हें तभी लोड करना जब यूज़र सबमिट करने की कोशिश करे। ज़्यादातर फ़ॉर्म सबमिशन पेज लोड होने के तुरंत बाद नहीं होते, तब तक यूज़र टाइप कर रहा होता है। पेज इंटरैक्टिव होने के बाद बैकग्राउंड में वैलिडेशन लोड करें: window.addEventListener('load', () => { const script = document.createElement('script'); script.src = '/validation-library.js'; document.body.appendChild(script); });।

फ़ॉर्म के लिए क्रिटिकल CSS

क्रिटिकल CSS को इनलाइन करें ताकि फ़ॉर्म तुरंत दिखे। क्रिटिकल CSS वह न्यूनतम स्टाइलिंग है जो फ़ॉर्म के दिखने के लिए चाहिए, जैसे <style> input { display: block; width: 100%; padding: 0.75rem; font-size: 16px; } button { padding: 0.75rem 1.5rem; background: blue; color: white; } </style>। इससे फ़ॉर्म तुरंत रेंडर होता है जबकि बाकी CSS <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'"> से एसिंक्रोनस लोड होती है, जो स्टाइलशीट को पेज रेंडरिंग रोके बिना लोड करता है।

गैर-ज़रूरी स्क्रिप्ट को टालना

एनालिटिक्स, ट्रैकिंग पिक्सल और दूसरी गैर-ज़रूरी स्क्रिप्ट को पेज के अंत में ले जाएं या टाल दें। <script async src="/analytics.js"></script> इस्तेमाल करें, जहां async स्क्रिप्ट को पेज के साथ-साथ लोड करता है और रेंडरिंग नहीं रोकता। या <script defer src="/analytics.js"></script> इस्तेमाल करें, जहां defer स्क्रिप्ट को पेज के कंटेंट के बाद लोड करता है ताकि एनालिटिक्स लोड होने से पहले फ़ॉर्म उपलब्ध रहे।

फ़ॉर्म इनपुट की जवाबदेही ऑप्टिमाइज़ करना

अगर हर कीस्ट्रोक पर JavaScript वैलिडेशन चलता है, तो फ़ॉर्म धीमा लगता है। वैलिडेशन को डिबाउंस करें, यानी उसे तभी चलाएं जब यूज़र थोड़ी देर के लिए टाइप करना रोक दे: let debounceTimer; input.addEventListener('input', (e) => { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => { validate(e.target); }, 300); });। वैलिडेशन यूज़र के टाइप रोकने के 300ms बाद चलता है, इसलिए टाइप करते समय फ़ॉर्म जवाबदेह लगता है और वैलिडेशन बैकग्राउंड में होता है।

फ़ॉर्म के फ़ील्ड की गिनती घटाना

ज़्यादा फ़ील्ड = धीमा फ़ॉर्म। 50 फ़ील्ड वाले फ़ॉर्म में ज़्यादा DOM एलिमेंट, गणना के लिए ज़्यादा CSS और चलाने के लिए ज़्यादा JavaScript होती है।

खुद से पूछें: क्या मुझे सच में यह फ़ील्ड चाहिए? अगर जवाब "शायद" या "होता तो अच्छा" है, तो उसे हटा दें। छोटे फ़ॉर्म तेज़ लोड होते हैं और बेहतर कन्वर्ट करते हैं।

फ़ॉर्म के एन्हांसमेंट को लेज़ी लोड करना

हर फ़ॉर्म फ़ील्ड को पेज लोड पर शानदार डेट पिकर या ऑटो-कंप्लीट की ज़रूरत नहीं होती। इन एन्हांसमेंट को तभी लोड करें जब यूज़र को ज़रूरत हो: <input type="date" id="date-field"> और if (!supportDate()) { loadDatePickerLibrary(); }। इस तरह जो ब्राउज़र नेटिव डेट इनपुट सपोर्ट करते हैं, वे अतिरिक्त लाइब्रेरी डाउनलोड नहीं करते।

फ़ॉर्म परफ़ॉर्मेंस मेट्रिक्स

फ़ॉर्म से जुड़े मेट्रिक्स मापने के लिए performance.mark() इस्तेमाल करें, जैसे 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');। इनपुट लैग भी performance.measure() से मापें ताकि पता चले कि हर कीस्ट्रोक पर वैलिडेशन में कितना समय लगता है।

फ़ॉर्म परफ़ॉर्मेंस टेस्ट करना

फ़ॉर्म का लोड टाइम और इनपुट जवाबदेही मापने के लिए Chrome DevTools इस्तेमाल करें। Performance टैब खोलें। ऐसा सेशन रिकॉर्ड करें जिसमें आप पेज लोड करते हैं और फ़ॉर्म के साथ इंटरैक्ट करते हैं। ऐसे लंबे टास्क खोजें जो इंटरैक्शन रोकते हैं। लेआउट थ्रैशिंग (तेज़ी से बार-बार गणना) खोजें।

थ्रॉटलिंग से धीमे नेटवर्क पर टेस्ट करें (Chrome DevTools > Network > slow 3G)। जो फ़ॉर्म आपके कंप्यूटर पर तेज़ लगता है, वह कमज़ोर कनेक्शन वाले मोबाइल यूज़र को धीमा लग सकता है।

WEMASY में फ़ॉर्म

WEMASY में फ़ॉर्म टूल है, और आप फ़ॉर्म सीधे अपनी वेबसाइट पर बना सकते हैं। आप मुफ़्त में शुरू कर सकते हैं और पेड प्लान 7 दिन आज़मा सकते हैं।

अपने WEMASY प्लान के बारे में जानें।

अक्सर पूछे जाने वाले सवाल