परफ़ॉर्मेंस को बेहतर बनाने, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के पास होने की दर बढ़ाने, और कारोबार की मुख्य मेट्रिक को बेहतर बनाने के लिए, YouTube की वेब टीम ने जो बदलाव किए उनके बारे में केस स्टडी.
Chrome की टीम अक्सर "वेब को बेहतर बनाना" के बारे में बात करती है, लेकिन इसका क्या मतलब है? वेब पर उपयोगकर्ताओं को तेज़ और इस्तेमाल करने में आसान अनुभव मिलना चाहिए. साथ ही, जब भी उपयोगकर्ताओं को ज़्यादा डिवाइस की सुविधाओं की ज़रूरत हो, तब वे उन्हें मिलनी चाहिए. डॉगफ़ूडिंग, Google के कल्चर का हिस्सा है. इसलिए, Chrome की टीम ने YouTube के साथ साझेदारी की है, ताकि "बेहतर वेब बनाना" नाम की नई सीरीज़ में, इस प्रोसेस से मिले अनुभवों को शेयर किया जा सके. इस सीरीज़ के पहले हिस्से में, यह बताया जाएगा कि YouTube ने वेब पर तेज़ी से काम करने वाला अनुभव कैसे बनाया.
YouTube पर, परफ़ॉर्मेंस से यह पता चलता है कि वेब पेजों पर वीडियो और अन्य कॉन्टेंट, जैसे कि सुझाव और टिप्पणियां कितनी तेज़ी से लोड होती हैं. परफ़ॉर्मेंस को इस बात से भी मेज़र किया जाता है कि YouTube, उपयोगकर्ता के इंटरैक्शन पर कितनी तेज़ी से प्रतिक्रिया देता है. जैसे, खोज, प्लेयर कंट्रोल, पसंद करना, और शेयर करना.
ब्राज़ील, भारत, और इंडोनेशिया जैसे उभरते बाज़ार, YouTube के मोबाइल वेब के लिए अहम हैं. इन इलाकों में कई उपयोगकर्ताओं के पास धीमे डिवाइस और सीमित नेटवर्क बैंडविड्थ होती है. इसलिए, यह पक्का करना ज़रूरी है कि उन्हें तेज़ और आसान अनुभव मिले.
सभी उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, YouTube ने वेबसाइट की परफ़ॉर्मेंस की जानकारी जैसी परफ़ॉर्मेंस मेट्रिक को बेहतर बनाने के लिए काम शुरू किया है. इसके लिए, YouTube ने लेज़ी-लोडिंग और कोड को आधुनिक बनाने की सुविधा का इस्तेमाल किया है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को बेहतर बनाना
YouTube की टीम ने Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) का इस्तेमाल करके, यह पता लगाया कि फ़ील्ड में मोबाइल पर, वीडियो देखने और खोज के नतीजों वाले पेजों पर, असली उपयोगकर्ताओं को कैसा अनुभव मिल रहा है. इससे, YouTube की टीम को यह पता चला कि किन चीज़ों को बेहतर बनाने की ज़रूरत है. उन्हें पता चला कि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक में सुधार की बहुत ज़रूरत है. कुछ मामलों में, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) मेट्रिक 4 से 6 सेकंड में पूरी होती है. यह समय, उनके टारगेट किए गए 2.5 सेकंड से काफ़ी ज़्यादा था.
सुधार के लिए, उन्होंने YouTube वॉच पेजों का ऑडिट करने के लिए, Lighthouse का इस्तेमाल किया. इससे उन्हें पता चला कि Lighthouse (lab) का स्कोर कम है. साथ ही, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) 3.5 सेकंड और एलसीपी 8.5 सेकंड है.
एफ़सीपी और एलसीपी को ऑप्टिमाइज़ करने के लिए, YouTube की टीम ने कई प्रयोग किए. इनसे दो अहम बातें पता चलीं.
पहली खोज यह थी कि वीडियो प्लेयर को इंटरैक्टिव बनाने वाली स्क्रिप्ट के ऊपर, वीडियो प्लेयर के लिए HTML को ले जाकर परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. लैब टेस्ट से पता चला है कि इससे एफ़सीपी और एलसीपी, दोनों को 4.4 सेकंड से 1.1 सेकंड तक बेहतर किया जा सकता है.
दूसरी खोज यह थी कि एलसीपी सिर्फ़
<video>एलिमेंट की पोस्टर इमेज को ध्यान में रखता है, न कि वीडियो स्ट्रीम के फ़्रेम को. YouTube ने वीडियो के चलने तक के समय को ऑप्टिमाइज़ किया है. इसलिए, एलसीपी को बेहतर बनाने के लिए, टीम ने पोस्टर इमेज को जल्द से जल्द डिलीवर करने की सुविधा को भी ऑप्टिमाइज़ करना शुरू किया. उन्होंने पोस्टर इमेज के कुछ वैरिएशन आज़माए और उपयोगकर्ता जांच में सबसे अच्छा स्कोर पाने वाली इमेज को चुना. इस काम के नतीजे के तौर पर, एफ़सीपी और एलसीपी, दोनों में काफ़ी सुधार हुआ. फ़ील्ड एलसीपी 4.6 सेकंड से घटकर 2.0 सेकंड हो गया.
इन ऑप्टिमाइज़ेशन से एलसीपी में सुधार हुआ, लेकिन टीम को लगा कि एलसीपी मेट्रिक की मौजूदा परिभाषा, उपयोगकर्ता के नज़रिए से पेज का "मुख्य कॉन्टेंट" लोड होने के समय को पूरी तरह से कैप्चर नहीं कर रही थी. यह एलसीपी का लक्ष्य है.
इन समस्याओं को हल करने के लिए, YouTube की टीम ने Chrome की टीम के साथ साझेदारी की. इससे, वे उन तरीकों को एक्सप्लोर कर सकें जिनसे एलसीपी मेट्रिक को बेहतर बनाया जा सके. कुछ विकल्पों की संभावना और असर को ध्यान में रखते हुए, टीमों ने एक प्रस्ताव दिया. इसमें, वीडियो एलिमेंट के पहले फ़्रेम के पेंट टाइम को एलसीपी के उम्मीदवार के तौर पर शामिल करने का सुझाव दिया गया.
Chrome में यह बदलाव होने के बाद, YouTube की टीम एलसीपी को ऑप्टिमाइज़ करने के लिए काम करना जारी रखेगी. साथ ही, मेट्रिक के अपडेट किए गए वर्शन का मतलब है कि इन ऑप्टिमाइज़ेशन का असर, असल उपयोगकर्ता अनुभव पर सीधे तौर पर पड़ेगा.
लेज़ी लोडिंग की सुविधा के साथ मॉड्यूलराइज़ेशन
YouTube के पेजों में कई ऐसे मॉड्यूल थे जिन्हें जल्दी लोड किया गया था. 50 से ज़्यादा कॉम्पोनेंट को रेंडर करने के तरीके को ऑप्टिमाइज़ करने के लिए, टीम ने JS मॉड्यूल मैप में एक कॉम्पोनेंट बनाया. इससे क्लाइंट को यह पता चलता है कि कौनसे मॉड्यूल लोड करने हैं. कॉम्पोनेंट को लेज़ी के तौर पर मार्क करने पर, JS मॉड्यूल बाद में लोड होंगे. इससे पेज के शुरुआती लोड होने में लगने वाला समय कम हो जाएगा. साथ ही, क्लाइंट को इस्तेमाल न किए गए JavaScript की संख्या भी कम हो जाएगी.
हालांकि, लेज़ी लोडिंग लागू करने के बाद, टीम को वॉटरफ़ॉल इफ़ेक्ट का पता चला. इससे, लेज़ी लोड किए गए कॉम्पोनेंट और उनकी डिपेंडेंसी, कम समय में लोड नहीं हो पाती थीं.
इस समस्या को हल करने के लिए, टीम ने एक व्यू में ज़रूरी कॉम्पोनेंट के कम से कम सेट का पता लगाया और उन्हें एक नेटवर्क अनुरोध में एक साथ भेजा. इससे पेज की स्पीड बेहतर हुई, JavaScript को पार्स करने में लगने वाला समय कम हुआ, और शुरुआती रेंडरिंग का समय भी बेहतर हुआ.
सभी कॉम्पोनेंट में स्टेट मैनेजमेंट
YouTube के प्लेयर कंट्रोल की वजह से, YouTube की परफ़ॉर्मेंस में समस्याएं आ रही थीं. खास तौर पर, पुराने डिवाइसों पर. कोड के विश्लेषण से पता चला कि प्लेयर में समय के साथ बहुत ज़्यादा कॉम्पोनेंट जोड़ दिए गए थे. इस प्लेयर की मदद से, उपयोगकर्ता वीडियो चलाने की स्पीड और वीडियो में अपनी प्रोग्रेस कंट्रोल कर सकते हैं.
प्रोग्रेस बार के हर टच-मूव इवेंट से, स्टाइल की दो बार फिर से गिनती की गई. साथ ही, लैब में परफ़ॉर्मेंस टेस्ट के दौरान 21.17 मिलीसेकंड का समय लगा. समय के साथ नए कंट्रोल जोड़े गए. अलग-अलग जगहों पर कंट्रोल करने के पैटर्न की वजह से, अक्सर सर्कुलर डिपेंडेंसी और मेमोरी लीक होती थी. इससे वॉच पेज की परफ़ॉर्मेंस पर बुरा असर पड़ता था.
डिसेंट्रलाइज़्ड कंट्रोल की वजह से होने वाली समस्याओं को ठीक करने के लिए, टीम ने प्लेयर के यूज़र इंटरफ़ेस (यूआई) को अपडेट किया, ताकि सभी अपडेट सिंक किए जा सकें. इसके लिए, प्लेयर को एक टॉप-लेवल कॉम्पोनेंट में रीफ़ैक्टर किया गया, जो अपने चाइल्ड कॉम्पोनेंट को डेटा भेजेगा. इससे यह पक्का होता है कि किसी भी स्थिति में बदलाव होने पर, यूज़र इंटरफ़ेस (यूआई) का सिर्फ़ एक अपडेट (रेंडर) साइकल होगा. इससे चेन वाले अपडेट खत्म हो जाते हैं. नए प्लेयर के प्रोग्रेस बार के टच-मूव इवेंट में, JavaScript के लागू होने के दौरान स्टाइल की फिर से गिनती नहीं की जाती. साथ ही, अब इसे पुराने प्लेयर के मुकाबले 25% कम समय लगता है.
कोड को आधुनिक बनाने से, परफ़ॉर्मेंस में और भी सुधार हुए हैं. जैसे, पुराने डिवाइसों पर स्मार्टवॉच को लोड होने में कम समय लगना, वीडियो चलाने के दौरान वीडियो छोड़ने की संख्या में कमी आना, और गड़बड़ियों की संख्या में कमी आना.
नतीजे और ऑप्टिमाइज़ेशन
YouTube ने परफ़ॉर्मेंस पर ध्यान दिया है. इसकी वजह से, वॉच पेज बहुत तेज़ी से लोड होते हैं. साथ ही, YouTube की मोबाइल वेबसाइट के 76% यूआरएल, अब फ़ील्ड में वेबसाइट कैसा परफ़ॉर्म कर रही है, इसके बारे में जानकारी देने वाली मेट्रिक के थ्रेशोल्ड को पास कर रहे हैं. डेस्कटॉप पर, वॉच पेज के लिए लैब एलसीपी करीब 4.6 सेकंड से घटकर 1.6 सेकंड हो गया. साइट के इंटरैक्शन और रेंडरिंग की परफ़ॉर्मेंस में, खास तौर पर YouTube वीडियो प्लेयर पर, JavaScript को लागू करने में पहले की तुलना में 75% कम समय लग रहा है.
पिछले साल YouTube की वेब परफ़ॉर्मेंस में हुए सुधारों से, कारोबार की मेट्रिक भी बेहतर हुई हैं. इनमें वीडियो देखने का कुल समय और हर दिन के सक्रिय उपयोगकर्ताओं की संख्या शामिल है. इन कोशिशों की सफलता के आधार पर, हम आने वाले समय में ऑप्टिमाइज़ करने के और भी तरीके एक्सप्लोर करते रहेंगे.
इस काम में योगदान देने के लिए, Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra, YouTube, और Chrome की टीम को खास तौर पर धन्यवाद.