YouTube वेब की टीम ने परफ़ॉर्मेंस को बेहतर बनाने, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली पास की दर को बढ़ाने, और कारोबार की ज़रूरी मेट्रिक को बढ़ाने के लिए जो बदलाव किए हैं उनकी एक केस स्टडी.
Chrome टीम अक्सर "बेहतर वेब बनाने" के बारे में बात करती है, लेकिन इसका क्या मतलब है? वेब वर्शन तेज़ और ऐक्सेस करने लायक होना चाहिए. साथ ही, यह ज़रूरी है कि जब उपयोगकर्ताओं को इसकी सबसे ज़्यादा ज़रूरत हो, तो वे डिवाइस की क्षमता का इस्तेमाल करें. Dogfooding Google की संस्कृति का हिस्सा है, इसलिए Chrome टीम ने YouTube के साथ साझेदारी की है. इस टीम ने YouTube के साथ मिलकर, "एक बेहतर वेब बनाना" नाम की नई सीरीज़ में सीखे सबक को शेयर किया है. इस सीरीज़ के पहले हिस्से में हम जानेंगे कि YouTube ने तेज़ वेब अनुभव कैसे बनाया.
ज़्यादा तेज़ वेब बनाना
YouTube पर, परफ़ॉर्मेंस इस बात से तय होती है कि किसी वेब पेज पर वीडियो और अन्य कॉन्टेंट, जैसे कि वीडियो और अन्य कॉन्टेंट कितनी तेज़ी से लोड होते हैं. परफ़ॉर्मेंस इस बात से भी मापी जाती है कि खोज, प्लेयर कंट्रोल, पसंद, और शेयर जैसे उपयोगकर्ताओं के इंटरैक्शन पर YouTube कितनी तेज़ी से कार्रवाई करता है.
ब्राज़ील, भारत, और इंडोनेशिया जैसे विकासशील बाज़ार YouTube मोबाइल वेब के लिए अहम हैं. क्योंकि इन क्षेत्रों में बहुत से उपयोगकर्ताओं के डिवाइस धीमे होते हैं और उनका नेटवर्क बैंडविड्थ सीमित होता है, इसलिए तेज़ और बेहतरीन अनुभव पक्का करना का एक अहम लक्ष्य होता है.
सभी उपयोगकर्ताओं को एक जैसा अनुभव देने के लिए, YouTube ने वेबसाइट की परफ़ॉर्मेंस की मेट्रिक जैसी परफ़ॉर्मेंस मेट्रिक को बेहतर बनाया है. जैसे, लेज़ी लोडिंग और कोड मॉडर्नाइज़ेशन के ज़रिए.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में सुधार करना
सुधार की ज़रूरत वाली चीज़ों का पता लगाने के लिए, YouTube टीम ने Chrome इस्तेमाल करने वाले लोगों के अनुभव की रिपोर्ट (CrUX) का इस्तेमाल किया. इससे यह देखा गया कि फ़ील्ड में, असल उपयोगकर्ताओं को मोबाइल पर वीडियो वॉच और खोज नतीजों वाले पेजों के बारे में कैसा अनुभव मिल रहा है. उन्होंने महसूस किया कि वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली उनकी मेट्रिक में काफ़ी सुधार किया जा सकता है. कुछ मामलों में, उनकी सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) की मेट्रिक, 4 से 6 सेकंड में नज़र आती है. यह उनके 2.5 सेकंड के टारगेट से काफ़ी ज़्यादा था.
कहां सुधार की ज़रूरत है, इसका पता लगाने के लिए उन्होंने लाइटहाउस का इस्तेमाल किया, ताकि YouTube के वॉच पेजों को ऑडिट किया जा सके. इससे लाइटहाउस (लैब) का कम स्कोर मिलता है. फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) 3.5 सेकंड और एलसीपी 8.5 सेकंड है.
एफ़सीपी और एलसीपी को ऑप्टिमाइज़ करने के लिए, YouTube की टीम ने कई एक्सपेरिमेंट किए. इससे उन्हें दो बड़े दावे मिले.
पहली खोज यह थी कि वीडियो प्लेयर के एचटीएमएल को स्क्रिप्ट से ऊपर ले जाकर परफ़ॉर्मेंस बेहतर की जा सकती है, जो वीडियो प्लेयर को इंटरैक्टिव बनाती है. लैब टेस्ट से पता चला कि इससे एफ़सीपी और एलसीपी, दोनों में 4.4 सेकंड से 1.1 सेकंड तक सुधार हो सकता है.
दूसरी खोज यह थी कि एलसीपी सिर्फ़
<video>एलिमेंट से जुड़ी पोस्टर इमेज ध्यान देता है, न कि वीडियो स्ट्रीम के फ़्रेम पर. परंपरागत रूप से YouTube, वीडियो के चलने तक सबसे तेज़ समय को ऑप्टिमाइज़ करता है. इसलिए, एलसीपी को बेहतर बनाने के लिए टीम ने यह ऑप्टिमाइज़ करना भी शुरू किया कि वे पोस्टर इमेज को कितनी जल्दी डिलीवर कर सकते हैं. उन्होंने पोस्टर इमेज के कुछ वैरिएंट के साथ प्रयोग किए और उपयोगकर्ता की टेस्टिंग में सबसे अच्छा स्कोर पाने वाली इमेज चुनी. इस काम की वजह से, एफ़सीपी और एलसीपी, दोनों में काफ़ी सुधार हुआ. साथ ही, फ़ील्ड एलसीपी में 4.6 सेकंड से 2.0 सेकंड का सुधार हुआ.
इन ऑप्टिमाइज़ेशन से एलसीपी में सुधार हुआ. हालांकि, टीम को लगा कि पेज का "मुख्य कॉन्टेंट" लोड होने के दौरान, उपयोगकर्ता के हिसाब से, एलसीपी मेट्रिक की मौजूदा परिभाषा पूरी तरह से कैप्चर नहीं हो पा रही थी, जो एलसीपी का लक्ष्य है.
इन समस्याओं को दूर करने के लिए, YouTube टीम के सदस्यों ने Chrome टीम के सदस्यों के साथ साझेदारी की. इसका मकसद, उन तरीकों का पता लगाना था जिनसे एलसीपी मेट्रिक को इस्तेमाल करने के उदाहरण के लिए बेहतर बनाया जा सकता है. कुछ विकल्पों की संभावना और असर को ध्यान में रखते हुए, दोनों टीमों ने एक सुझाव दिया, ताकि एलसीपी कैंडिडेट के तौर पर, वीडियो के पहले फ़्रेम के पेंट टाइम पर विचार किया जा सके.
Chrome में इस बदलाव के लागू होने के बाद, YouTube की टीम एलसीपी के लिए ऑप्टिमाइज़ करने के अपने काम को जारी रखने के लिए उत्साहित है. साथ ही, मेट्रिक के अपडेट किए गए वर्शन का मतलब है कि इन ऑप्टिमाइज़ेशन का असल उपयोगकर्ता के अनुभव पर ज़्यादा सीधा असर होगा.
लेज़ी लोडिंग के साथ मॉड्यूलराइज़ेशन की सुविधा
YouTube के पेजों में कई मॉड्यूल थे, जिन्हें बड़ी ही बेफ़िक्र होकर लोड किया गया था. 50 से ज़्यादा कॉम्पोनेंट को रेंडर करने के तरीके को ऑप्टिमाइज़ करने के लिए, टीम ने JS मॉड्यूल मैप में एक कॉम्पोनेंट बनाया. इससे क्लाइंट को यह पता चलेगा कि कौनसा मॉड्यूल लोड करना है. कॉम्पोनेंट को लेज़ी के तौर पर मार्क करने पर, JS मॉड्यूल बाद में लोड होगा. इससे पेज का शुरुआती लोड समय और क्लाइंट को भेजी गई इस्तेमाल नहीं की गई JavaScript कम हो जाएगी.
हालांकि, लेज़ी लोडिंग लागू होने के बाद, टीम को एक वॉटरफ़ॉल इफ़ेक्ट का पता चला. इससे यह पता चला कि लेज़ी लोड होने वाले कॉम्पोनेंट और उनकी डिपेंडेंसी, सबसे कम समय में लोड होती हैं.
इस समस्या को हल करने के लिए, टीम ने एक व्यू में ज़रूरी कॉम्पोनेंट के कम से कम सेट को तय किया और एक ही नेटवर्क अनुरोध में उन्हें बैच किया. नतीजों से पेज की स्पीड बेहतर हुई, JavaScript पार्स करने का समय कम हुआ, और आखिर में शुरुआत में रेंडरिंग का बेहतर समय मिला.
सभी कॉम्पोनेंट की स्थिति-मैनेजमेंट
YouTube अपने प्लेयर कंट्रोल की वजह से परफ़ॉर्मेंस से जुड़ी समस्याओं का सामना कर रहा था. खास तौर पर इससे पुराने डिवाइसों पर समस्याएं आ रही थीं. कोड विश्लेषण से पता चला कि समय के साथ प्लेयर, प्लेबैक की स्पीड और प्रोग्रेस जैसी सुविधाओं को कंट्रोल करने की सुविधा देता था.
हर प्रोग्रेस बार टच-मूव इवेंट ने दो बार और स्टाइल रीकैलकुलेशन की और लैब में परफ़ॉर्मेंस टेस्ट करने के दौरान 21.17 मि॰से॰ का समय लिया. समय के साथ नए कंट्रोल जोड़े जाने की वजह से, डीसेंट्रलाइज़्ड कंट्रोल का पैटर्न अक्सर सर्कुलर डिपेंडेंसी और मेमोरी लीक की वजह बनता है. इससे वॉच पेज की परफ़ॉर्मेंस पर बुरा असर पड़ता है.
डीसेंट्रलाइज़्ड कंट्रोल से जुड़ी समस्याओं को ठीक करने के लिए, टीम ने प्लेयर के यूज़र इंटरफ़ेस (यूआई) को अपडेट किया, ताकि सभी अपडेट को सिंक किया जा सके. इसके लिए, प्लेयर को फिर से एक टॉप लेवल कॉम्पोनेंट में बदला गया, जो डेटा को उसके बच्चों को भेज सकेगा. इससे किसी भी स्थिति में बदलाव के लिए सिर्फ़ एक यूज़र इंटरफ़ेस (यूआई) अपडेट (रेंडर) हुआ करता है और एक-दूसरे से जुड़े अपडेट हट जाते हैं. JavaScript चलने के दौरान, नए प्लेयर के प्रोग्रेस बार में टच-मूव इवेंट में कोई स्टाइल रीकैलकुलेशन नहीं होती. इस वजह से, अब पुराने प्लेयर को चलाने के समय सिर्फ़ 25% की ज़रूरत होती है.
इस कोड को आधुनिक बनाने से परफ़ॉर्मेंस में भी सुधार हुआ. जैसे, पुराने डिवाइसों पर स्मार्टवॉच का लोड होने का समय कम हुआ, वीडियो बार-बार चलाए जाने की संख्या कम हुई, और गेम खेलने के दौरान साधारण गड़बड़ियां कम हुईं.
नतीजा
परफ़ॉर्मेंस बेहतर बनाने में YouTube की मेहनत की वजह से, वॉच पेज ज़्यादा तेज़ी से लोड होते हैं. YouTube की मोबाइल वेबसाइट के 76% यूआरएल, इस फ़ील्ड में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के थ्रेशोल्ड को पार कर जाते हैं. डेस्कटॉप पर वॉच पेज के लिए लैब एलसीपी को, करीब 4.6 सेकंड से घटाकर 1.6 सेकंड कर दिया गया था. साइट के साथ इंटरैक्शन और रेंडरिंग की परफ़ॉर्मेंस, खास तौर पर YouTube वीडियो प्लेयर पर, JavaScript चलाने में पहले के मुकाबले 75% कम समय लगा रही है.
पिछले साल, YouTube वेब की परफ़ॉर्मेंस में हुए सुधारों की वजह से कारोबार की मेट्रिक में भी सुधार हुआ है. इसमें वीडियो देखने का कुल समय और हर दिन के सक्रिय उपयोगकर्ता शामिल हैं. इन कोशिशों की सफलता के आधार पर, हम आने वाले समय में ऑप्टिमाइज़ करने के और भी तरीके एक्सप्लोर करते रहेंगे.
"ऐक्सेस करने लायक वेब बनाना", इस सीरीज़ के दो भाग में आप पढ़ेंगे कि किस तरह YouTube ने स्क्रीन रीडर इस्तेमाल करने वालों के लिए, अपनी वेबसाइट को ज़्यादा से ज़्यादा लोगों तक पहुंचाने का काम किया है.
इस काम में गिल्बर्टो कोची, लॉरेन उसुई, बेंजी बीयर, बो आए, बोगडन बालास, केनी ट्रैन, मैथ्यू स्मिथ, फ़िल हार्नीश, लीना साहोनी, जेरेमी वैगनर, फ़िलिप वॉल्टन, हरलीन बत्रा, और YouTube और Chrome, दोनों की टीमों का खास धन्यवाद.