बेहतर वेब बनाना: YouTube को ज़्यादा तेज़ बनाना

YouTube की वेब टीम ने परफ़ॉर्मेंस को बेहतर बनाने, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के पास रेट को बढ़ाने, और कारोबार की मुख्य मेट्रिक को बेहतर बनाने के लिए जो बदलाव किए उनसे जुड़ी केस स्टडी.

Sriram Krishnan
Sriram Krishnan

Chrome की टीम अक्सर "वेब को बेहतर बनाना" के बारे में बात करती है, लेकिन इसका क्या मतलब है? वेब पर उपयोगकर्ताओं को तेज़ और ऐक्सेस करने लायक अनुभव मिलना चाहिए. साथ ही, जब उपयोगकर्ताओं को ज़्यादा ज़रूरत हो, तब डिवाइस की सुविधाओं का इस्तेमाल करना चाहिए. डॉगफ़ूडिंग, Google के कल्चर का हिस्सा है. इसलिए, Chrome की टीम ने YouTube के साथ साझेदारी की है, ताकि "बेहतर वेब बनाना" नाम की नई सीरीज़ में, इस प्रोसेस से मिले अनुभवों को शेयर किया जा सके. इस सीरीज़ के पहले हिस्से में, यह बताया जाएगा कि YouTube ने वेब पर तेज़ी से काम करने वाला अनुभव कैसे बनाया.

PageSpeed Insights में Chrome UX रिपोर्ट का डेटा दिख रहा है.
मोबाइल वेब के लिए YouTube का वॉच पेज, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के थ्रेशोल्ड को पूरा करता है.

YouTube पर, परफ़ॉर्मेंस से यह पता चलता है कि वेब पेजों पर वीडियो और अन्य कॉन्टेंट, जैसे कि सुझाव और टिप्पणियां कितनी तेज़ी से लोड होती हैं. परफ़ॉर्मेंस को इस बात से भी मेज़र किया जाता है कि YouTube, उपयोगकर्ता के इंटरैक्शन पर कितनी तेज़ी से प्रतिक्रिया देता है. जैसे, खोज, प्लेयर कंट्रोल, पसंद करना, और शेयर करना.

ब्राज़ील, भारत, और इंडोनेशिया जैसे उभरते बाज़ार, YouTube के मोबाइल वेब के लिए अहम हैं. इन इलाकों में कई उपयोगकर्ताओं के पास धीमे डिवाइस और सीमित नेटवर्क बैंडविड्थ होती है. इसलिए, यह पक्का करना ज़रूरी है कि उन्हें तेज़ और बिना किसी रुकावट के अनुभव मिले.

सभी उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, YouTube ने वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी जैसी परफ़ॉर्मेंस मेट्रिक को बेहतर बनाने के लिए काम शुरू किया है. इसके लिए, YouTube ने लेज़ी-लोडिंग और कोड को आधुनिक बनाने की सुविधा का इस्तेमाल किया है.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को बेहतर बनाना

YouTube की टीम ने Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) का इस्तेमाल करके, यह पता लगाया कि फ़ील्ड में मोबाइल पर, वीडियो देखने और खोज के नतीजों वाले पेजों पर असली उपयोगकर्ताओं को कैसा अनुभव मिल रहा है. इससे, YouTube की टीम को यह पता चला कि किन चीज़ों को बेहतर बनाने की ज़रूरत है. उन्हें पता चला कि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक में सुधार की बहुत ज़रूरत है. कुछ मामलों में, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी) मेट्रिक 4 से 6 सेकंड में पूरी होती है. यह समय, उनके टारगेट किए गए 2.5 सेकंड से काफ़ी ज़्यादा था.

FCP और LCP के चार्ट, जिनमें YouTube वॉच पेज के पास रेट के साथ-साथ YouTube ऑरिजिन भी दिख रहा है.

सुधार के लिए, उन्होंने YouTube वॉच पेजों का ऑडिट करने के लिए, Lighthouse का इस्तेमाल किया. इससे उन्हें पता चला कि Lighthouse (lab) का स्कोर कम है. साथ ही, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) 3.5 सेकंड और एलसीपी 8.5 सेकंड है.

YouTube Mobile के लिए Lighthouse रिपोर्ट.
Chrome, एफ़सीपी के लिए 1.8 सेकंड और एलसीपी के लिए 2.5 सेकंड का टारगेट सेट करता है. एफ़सीपी और एलसीपी, क्रमशः 3.5 सेकंड और 8.5 सेकंड पर पीले और लाल रंग में दिख रहे थे.

एफ़सीपी और एलसीपी को ऑप्टिमाइज़ करने के लिए, YouTube की टीम ने कई प्रयोग किए. इनसे दो अहम बातें पता चलीं.

  1. पहली खोज यह थी कि वीडियो प्लेयर को इंटरैक्टिव बनाने वाली स्क्रिप्ट के ऊपर, वीडियो प्लेयर के लिए एचटीएमएल को ले जाकर, परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. लैब टेस्ट से पता चला है कि इससे एफ़सीपी और एलसीपी, दोनों को 4.4 सेकंड से 1.1 सेकंड तक बेहतर किया जा सकता है.

  2. दूसरी खोज यह थी कि एलसीपी सिर्फ़ <video> एलिमेंट पोस्टर इमेज को ध्यान में रखता है, न कि वीडियो स्ट्रीम के फ़्रेम को. YouTube ने वीडियो के चलने तक के समय को ऑप्टिमाइज़ किया है. इसलिए, एलसीपी को बेहतर बनाने के लिए, टीम ने पोस्टर इमेज को जल्द से जल्द डिलीवर करने की सुविधा को भी ऑप्टिमाइज़ करना शुरू किया. उन्होंने पोस्टर इमेज के कुछ वैरिएशन आज़माए और उपयोगकर्ता जांच में सबसे अच्छा स्कोर पाने वाली इमेज को चुना. इस काम के नतीजे के तौर पर, एफ़सीपी और एलसीपी, दोनों में काफ़ी सुधार हुआ. फ़ील्ड एलसीपी 4.6 सेकंड से घटकर 2.0 सेकंड हो गया.

मोबाइल वेब के लिए पेज के एलसीपी एक्सपेरिमेंट को देखें. इसमें कंट्रोल, एक्सपेरिमेंट A (इमेज थंबनेल), और एक्सपेरिमेंट B (ब्लैक थंबनेल) दिखाया गया है
इस बदलाव के लागू होने के बाद, हमें लैब में एफ़सीपी और एलसीपी में सुधार देखने को मिला. एफ़सीपी 4.4 सेकंड से घटकर 1.1 सेकंड और एलसीपी 11.8 सेकंड से घटकर 1.3 सेकंड हो गया. पहला एक्सपेरिमेंट: वीडियो के असली थंबनेल का इस्तेमाल उन पेजों पर अच्छा काम करता है जहां वीडियो शुरू में रोका गया हो. हालांकि, वॉच पेज जैसे अपने-आप चलने वाले वीडियो पेजों के लिए, उपयोगकर्ता के व्यवहार से जुड़ी स्टडी में यह खराब परफ़ॉर्म किया. इससे सक्रिय उपयोगकर्ताओं की संख्या में भी गिरावट आई है. प्रयोग B: उपयोगकर्ताओं के अनुभव से जुड़ी स्टडी में, पूरी तरह काली पोस्टर इमेज का इस्तेमाल करने से सबसे अच्छे नतीजे मिले. उपयोगकर्ताओं को अपने-आप चलने वाले वीडियो के लिए, पूरी तरह काले रंग से वीडियो के पहले फ़्रेम पर ट्रांज़िशन करना कम परेशान करने वाला लगा.
ब्लैक थंबनेल को जुलाई 2021 में, मोबाइल वेब का इस्तेमाल करने वाले सभी लोगों के लिए प्रोडक्शन में डिप्लॉय किया गया था. इससे एफ़सीपी और एलसीपी में काफ़ी सुधार हुआ, जैसा कि ऊपर दिए गए आरयूएम विश्लेषण में देखा जा सकता है.
ब्लैक थंबनेल को जुलाई 2021 में, मोबाइल वेब का इस्तेमाल करने वाले सभी लोगों के लिए प्रॉडक्शन में डिप्लॉय किया गया था. इससे एफ़सीपी और एलसीपी में काफ़ी सुधार हुआ, जैसा कि ऊपर दिए गए आरयूएम विश्लेषण में देखा जा सकता है.

इन ऑप्टिमाइज़ेशन से एलसीपी में सुधार हुआ, लेकिन टीम को लगा कि एलसीपी मेट्रिक की मौजूदा परिभाषा, उपयोगकर्ता के नज़रिए से पेज का "मुख्य कॉन्टेंट" लोड होने के समय को पूरी तरह से कैप्चर नहीं कर रही थी. यह एलसीपी का लक्ष्य है.

इन समस्याओं को हल करने के लिए, YouTube की टीम ने Chrome की टीम के साथ साझेदारी की. इससे, वे यह पता लगा सकें कि LCP मेट्रिक को बेहतर बनाने के लिए क्या-क्या किया जा सकता है. कुछ विकल्पों की संभावना और असर को ध्यान में रखते हुए, टीमों ने एक प्रस्ताव दिया. इसमें, वीडियो एलिमेंट के पहले फ़्रेम के पेंट टाइम को एलसीपी के उम्मीदवार के तौर पर शामिल करने का सुझाव दिया गया.

Chrome में यह बदलाव होने के बाद, YouTube की टीम एलसीपी को ऑप्टिमाइज़ करने के लिए काम करना जारी रखेगी. साथ ही, मेट्रिक के अपडेट किए गए वर्शन का मतलब है कि इन ऑप्टिमाइज़ेशन का असर, असल उपयोगकर्ता अनुभव पर सीधे तौर पर पड़ेगा.

लेज़ी लोडिंग की सुविधा के साथ मॉड्यूलराइज़ेशन

YouTube के पेजों में कई ऐसे मॉड्यूल थे जिन्हें जल्दी लोड किया गया था. 50 से ज़्यादा कॉम्पोनेंट को रेंडर करने के तरीके को ऑप्टिमाइज़ करने के लिए, टीम ने JS मॉड्यूल मैप में एक कॉम्पोनेंट बनाया. इससे क्लाइंट को यह पता चलता है कि कौनसे मॉड्यूल लोड करने हैं. कॉम्पोनेंट को लेज़ी के तौर पर मार्क करने पर, JS मॉड्यूल बाद में लोड होंगे. इससे पेज के शुरुआती लोड होने में लगने वाला समय कम हो जाएगा. साथ ही, क्लाइंट को इस्तेमाल न किए गए JavaScript की संख्या भी कम हो जाएगी.

हालांकि, लेज़ी लोडिंग लागू करने के बाद, टीम को वॉटरफ़ॉल इफ़ेक्ट का पता चला. इससे, लेज़ी लोड किए गए कॉम्पोनेंट और उनकी डिपेंडेंसी, कम समय में लोड नहीं हो पाती थीं.

इस समस्या को हल करने के लिए, टीम ने एक व्यू में ज़रूरी कॉम्पोनेंट के कम से कम सेट का पता लगाया और उन्हें एक नेटवर्क अनुरोध में एक साथ भेजा. इससे पेज की स्पीड बेहतर हुई, JavaScript को पार्स करने में लगने वाला समय कम हुआ, और शुरुआती रेंडरिंग का समय भी बेहतर हुआ.

सभी कॉम्पोनेंट में स्टेट मैनेजमेंट

YouTube के प्लेयर कंट्रोल की वजह से, YouTube की परफ़ॉर्मेंस में समस्याएं आ रही थीं. खास तौर पर, पुराने डिवाइसों पर. कोड के विश्लेषण से पता चला कि प्लेयर में समय के साथ बहुत ज़्यादा कॉम्पोनेंट जोड़ दिए गए थे. इस प्लेयर की मदद से, उपयोगकर्ता वीडियो चलाने की रफ़्तार और वीडियो में आगे बढ़ने की सुविधा को कंट्रोल कर सकते हैं.

YouTube प्लेयर और कंट्रोल को विज़ुअलाइज़ किया गया
YouTube वीडियो प्लेयर की मदद से, उपयोगकर्ता वीडियो चलाने की स्पीड कंट्रोल कर सकते हैं, वीडियो की प्रोग्रेस देख सकते हैं, सेक्शन को स्किप कर सकते हैं, और अन्य काम कर सकते हैं. जब कोई उपयोगकर्ता किसी खास कंट्रोल पर टैप करता है, तो स्थिति में हुए बदलाव की जानकारी अन्य कंट्रोल को दी जानी चाहिए. उदाहरण के लिए, अगर उपयोगकर्ता ने प्रोग्रेस बार पर टैप किया है, तो इसकी जानकारी प्ले-हेड, सबटाइटल वगैरह जैसे कंट्रोल को दी जानी चाहिए.

प्रोग्रेस बार के हर टच-मूव इवेंट से, स्टाइल की गिनती दो बार फिर से शुरू हुई. साथ ही, लैब में परफ़ॉर्मेंस टेस्ट के दौरान 21.17 मिलीसेकंड का समय लगा. समय के साथ नए कंट्रोल जोड़े गए. अलग-अलग जगहों पर कंट्रोल करने के पैटर्न की वजह से, अक्सर सर्कुलर डिपेंडेंसी और मेमोरी लीक होती थी. इससे वॉच पेज की परफ़ॉर्मेंस पर बुरा असर पड़ता था.

परफ़ॉर्मेंस टाइमलाइन पर दिखाया गया 21.17 मिलीसेकंड का इवेंट.
सीपीयू की परफ़ॉर्मेंस को चार गुना धीमा करके, Chrome DevTools का इस्तेमाल किया जा रहा है.

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