वेब परफ़ॉर्मेंस, वेब डेवलपमेंट का एक अहम पहलू है. यह इस बात पर ध्यान देता है कि पेज किस स्पीड पर लोड होते हैं. साथ ही, इस बात पर भी ध्यान दिया जाता है कि उपयोगकर्ता के इनपुट के हिसाब से वे कितने रिस्पॉन्सिव हैं. परफ़ॉर्मेंस के लिए अपनी वेबसाइट को ऑप्टिमाइज़ करके, उपयोगकर्ताओं को बेहतर अनुभव मिलता है. उपयोगकर्ताओं को बेहतर अनुभव देने से, उन लक्ष्यों को हासिल करने में मदद मिलती है जो आपने अपनी वेबसाइट के लिए सोचे थे.
वेब परफ़ॉर्मेंस एक खास विषय जैसा लग सकता है, लेकिन असल में यह व्यापक और काफ़ी गहरी दोनों है. एक विषय के तौर पर गहराई को देखते हुए, यह ज़रूरी है कि वेब परफ़ॉर्मेंस पर कोर्स आसानी से समझ में आने लायक हो, लेकिन उसमें जानकारी भी हो. इस कोर्स की शुरुआती रिलीज़ में, वेब की परफ़ॉर्मेंस की बुनियादी बातों पर फ़ोकस किया गया है. यह कोर्स नए लोगों के लिए फ़ायदेमंद होना चाहिए.
इस सीरीज़ के हर मॉड्यूल का मकसद है कि जहां भी संभव हो, डेमो का एक ऐसा सेट हो जो हर मॉड्यूल के कॉन्टेंट को पूरा करे और परफ़ॉर्मेंस के मुख्य सिद्धांतों को दिखाए. यह इसलिए शुरुआती कोर्स है, इसलिए आने वाले महीनों में इसे पब्लिश करने के लिए कुछ और मॉड्यूल भी तैयार किए गए हैं.
'परफ़ॉर्मेंस सीखें' के शुरुआती कोर्स में ये चीज़ें शामिल हैं:
स्पीड क्यों मायने रखती है
लर्निंग की परफ़ॉर्मेंस शुरू करने से पहले, आपको उपयोगकर्ता अनुभव में इसकी भूमिका को समझना होगा. साथ ही, यह भी समझना होगा कि इससे उपयोगकर्ताओं को बेहतर नतीजे कैसे मिल सकते हैं. इस कोर्स की शुरुआत में, इन विषयों के बारे में कम शब्दों में जानकारी दी गई है. इसमें यह बताया गया है कि परफ़ॉर्मेंस को सीखना क्यों ज़रूरी है.
एचटीएमएल की परफ़ॉर्मेंस से जुड़ी सामान्य बातें
हर वेबसाइट पर एक एचटीएमएल दस्तावेज़ के अनुरोध से शुरू होता है. आपकी वेबसाइट कितनी तेज़ी से लोड होती है, इसमें यह अनुरोध एक अहम भूमिका निभाता है. इस मॉड्यूल में, एचटीएमएल कैश मेमोरी में सेव करने, पार्सर को ब्लॉक करने, रेंडर करने से रोकने के साथ ही कई और काम के कॉन्सेप्ट शामिल होते हैं. ऐसा इसलिए किया जाता है, ताकि आप यह पक्का कर सकें कि आपकी वेबसाइट के एचटीएमएल के लिए पहला अनुरोध दाएं ओर से बंद हो.
अहम पाथ को समझना
अहम रेंडरिंग पाथ, वेब परफ़ॉर्मेंस में एक ऐसा सिद्धांत है जिससे यह तय होता है कि किसी पेज की शुरुआती रेंडरिंग कितनी तेज़ी से ब्राउज़र में दिखती है. यह मॉड्यूल, क्रिटिकल रेंडरिंग पाथ के सिद्धांत पर जाता है. इसमें, रेंडर-ब्लॉक करने और पार्सर-ब्लॉकिंग रिसोर्स जैसे कॉन्सेप्ट की जानकारी होती है. साथ ही, यह भी बताया जाता है कि ब्राउज़र में कोई पेज कितनी तेज़ी से दिखे, इसके लिए कैसे ये संसाधन अहम भूमिका निभाते हैं.
रिसॉर्स लोडिंग को ऑप्टिमाइज़ करें
जब पेज लोड होता है, तो इसके एचटीएमएल में कई रिसॉर्स का रेफ़रंस दिया जाता है. ये रिसॉर्स, सीएसएस की मदद से पेज के दिखने और लेआउट की जानकारी देते हैं. साथ ही, JavaScript की मदद से, इससे इंटरैक्ट करने की सुविधा मिलती है. इस मॉड्यूल में, इन संसाधनों से जुड़े कई ज़रूरी सिद्धांत और इनसे पेज लोड होने में लगने वाले समय पर असर डालने के बारे में बताया गया है.
रिसॉर्स से जुड़े संकेतों की मदद से ब्राउज़र की मदद करें
रिसॉर्स हिंट, एचटीएमएल में उपलब्ध सुविधाओं का कलेक्शन होते हैं. ये ब्राउज़र को रिसॉर्स को पहले से लोड करने में मदद कर सकते हैं. इतना ही नहीं, ये रिसॉर्स को सबसे ज़्यादा प्राथमिकता देने पर भी काम कर सकते हैं. इस मॉड्यूल में, कुछ ऐसे रिसॉर्स से जुड़े संकेतों के बारे में बताया गया है जो आपके पेजों को तेज़ी से लोड करने में मदद कर सकते हैं.
इमेज की परफ़ॉर्मेंस
आज-कल कई वेब पेजों पर ट्रांसफ़र किए गए डेटा का एक बड़ा हिस्सा इमेज से पता चलता है. इस मॉड्यूल में, इमेज को ऑप्टिमाइज़ करने के साथ-साथ उन्हें बेहतर तरीके से इस्तेमाल करने के तरीके के बारे में बताया गया है. इस मॉड्यूल की मदद से, ग़ैर-ज़रूरी बाइट कम की जा सकती हैं, भले ही उपयोगकर्ता का डिवाइस कोई भी हो.
वीडियो की परफ़ॉर्मेंस
वीडियो एक तरह का मीडिया है, जिसका इस्तेमाल अक्सर वेब पेजों पर किया जाता है. हालांकि, वीडियो को बेहतर तरीके से दिखाने का तरीका भी वीडियो की परफ़ॉर्मेंस का एक पहलू है, जिसे नज़रअंदाज़ नहीं किया जाना चाहिए. इस मॉड्यूल में, वीडियो एम्बेड करने की कुछ मुख्य तकनीकों के बारे में बताया गया है, ताकि आपकी वेबसाइट तेज़ी से काम कर सके. साथ ही, इनके इस्तेमाल की वजह से, इनकी परफ़ॉर्मेंस से जुड़ी समस्याओं के बारे में भी बताया गया है.
वेब फ़ॉन्ट ऑप्टिमाइज़ करें
वेब फ़ॉन्ट, आम तौर पर वेब पर इस्तेमाल किए जाने वाले संसाधन हैं. ये बिलकुल सही भी हैं, क्योंकि वे वेबसाइट के डिज़ाइन में ऐसे तरीके से जोड़ते हैं जो दूसरे रिसॉर्स नहीं कर सकते. इसके बावजूद, वेब फ़ॉन्ट की परफ़ॉर्मेंस अब भी होती है. इस मॉड्यूल में, वेब फ़ॉन्ट के लिए परफ़ॉर्मेंस से जुड़ी कई बातों और तकनीकों का पता लगाया गया है.
कोड-स्प्लिट JavaScript
वेब पेज के शुरुआती लोड के लिए कुछ संसाधन ज़रूरी नहीं होते. JavaScript एक ऐसा संसाधन है जिसे कोड स्प्लिटिंग नाम की तकनीक से, ज़रूरत के समय तक टाला जा सकता है. ऐसा करके, बैंडविथ और सीपीयू के विवाद को कम करके परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. यह शुरुआती पेज लोड होने की स्पीड और स्टार्टअप के दौरान इनपुट रिस्पॉन्स, दोनों को बेहतर बनाने के लिए ज़रूरी है.
इमेज और <iframe> एलिमेंट की लेज़ी लोडिंग
इमेज और <iframe> एलिमेंट, बहुत ज़्यादा बैंडविथ और सीपीयू प्रोसेसिंग समय का इस्तेमाल कर सकते हैं. हालांकि, पेज के शुरुआती लोड के दौरान सभी इमेज और <iframe> एलिमेंट को लोड करने की ज़रूरत नहीं होती. इसलिए, जब उपयोगकर्ता उन्हें देखना चाहता है, तब इन एलिमेंट को बाद में कभी भी लोड किया जा सकता है. इस तकनीक को लेज़ी लोडिंग कहा जाता है. इस मॉड्यूल में, इमेज और <iframe> एलिमेंट के बारे में लेज़ी लोडिंग के बारे में बताया गया है. इससे पेजों को तेज़ी से लोड करने में मदद मिलती है. साथ ही, बैंडविथ और प्रोसेसिंग में लगने वाला समय सिर्फ़ ज़रूरत पड़ने पर ही इस्तेमाल होता है.
प्रीफ़ेच करना, प्रीरेंडरिंग, और सर्विस वर्कर प्रीकैशिंग
हालांकि, परफ़ॉर्मेंस से यह पता चलता है कि गैर-ज़रूरी संसाधनों को कैसे ऑप्टिमाइज़ किया जा सकता है और कैसे खत्म किया जा सकता है. हालांकि, यह सुझाव देना थोड़ा व्यावहारिक लग सकता है कि कुछ संसाधनों को ज़रूरत से पहले लोड किया जाना चाहिए. हालांकि, कुछ मामलों में संसाधनों को समय से पहले लोड करना सही हो सकता है. इस मॉड्यूल में, परफ़ॉर्मेंस के इस पहलू को एक्सप्लोर किया गया है. इसमें प्रीफ़ेच, प्रीरेंडरिंग, और सर्विस वर्कर प्रीकैशिंग के बारे में बताया गया है.
वेब वर्कर की खास जानकारी
उपयोगकर्ता को ब्राउज़र में ज़्यादातर कॉन्टेंट, मुख्य थ्रेड नाम के एक थ्रेड पर दिखता है. हालांकि, कई ऑपर्च्यूनिटी के मुकाबले ज़्यादा महंगा काम करने के लिए, नए थ्रेड शुरू किए जा सकते हैं. इससे मुख्य थ्रेड की मदद से, उपयोगकर्ता को दिए जाने वाले अहम टास्क पूरे किए जा सकेंगे. ऐसा करने वाले एपीआई को Web Worker API के नाम से जाना जाता है. इस मॉड्यूल में, इसकी बुनियादी जानकारी दी गई है.
कंक्रीट वेब वर्कर के इस्तेमाल का उदाहरण
अब आपको वेब वर्कर के साथ-साथ उनकी क्षमताओं और सीमाओं के बारे में बुनियादी जानकारी है. इसलिए, अब वेब वर्कर के इस्तेमाल के लिए बेहतर उदाहरण देखने का समय है. इस डेमो में, वेब वर्कर का इस्तेमाल JPEG फ़ाइल फ़ेच करने, उसका मेटाडेटा निकालने, और उसे मुख्य थ्रेड पर वापस भेजने के लिए किया गया है, ताकि उपयोगकर्ता उसे ब्राउज़र में देख सके.
क्या आप वेब परफ़ॉर्मेंस को सीखने के लिए तैयार हैं? वीडियो की रफ़्तार क्यों ज़रूरी है, यह लेख पढ़कर शुरुआत करें.