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 की टीम ने कई एक्सपेरिमेंट किए. इन एक्सपेरिमेंट के आधार पर, दो बड़े एक्सपेरिमेंट किए गए.
पहली खोज यह थी कि वीडियो प्लेयर को इंटरैक्टिव बनाने वाली स्क्रिप्ट के ऊपर, वीडियो प्लेयर के लिए एचटीएमएल को ले जाकर, परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. लैब टेस्ट से पता चला है कि इससे एफ़सीपी और एलसीपी, दोनों को 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 की टीम को खास तौर पर धन्यवाद.