लाखों साइटों की वेबसाइट की परफ़ॉर्मेंस को बेहतर बनाने के लिए, GoDaddy ने जो बदलाव किए उनके बारे में केस स्टडी. इन बदलावों की मदद से, साइटों को PageSpeed Insights और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक में अच्छे स्कोर मिले.
GoDaddy, दुनिया भर के उद्यमियों के लिए सेवाएं देने वाला दुनिया का सबसे बड़ा प्लैटफ़ॉर्म है. हमारा मकसद, दुनिया भर में मौजूद 20 करोड़ से ज़्यादा ग्राहकों और उद्यमियों की कम्यूनिटी को बेहतर बनाने में मदद करना है. इसके लिए, हम उन्हें ऑनलाइन प्लैटफ़ॉर्म पर कारोबार को आगे बढ़ाने के लिए ज़रूरी टूल और सहायता उपलब्ध कराते हैं.
GoDaddy ने साल 2019 में वेबसाइटें + मार्केटिंग लॉन्च की थी. इसका मकसद, ऐसे टूल और सेवाएं उपलब्ध कराना था जिनका इस्तेमाल आसान हो और जो कारोबार के मालिकों को उनके लक्ष्यों को हासिल करने में मदद कर सकें. वेबसाइटें + मार्केटिंग, वेबसाइट बनाने की सुविधा को मार्केटिंग और ई-कॉमर्स टूल के साथ इंटिग्रेट करती है. साथ ही, इन टूल को सबसे बेहतर दिशा-निर्देशों के साथ जोड़ती है, ताकि ग्राहक अपने नए कारोबारों को सफल बना सकें.
वेबसाइटें + मार्केटिंग के लॉन्च होने के बाद से, परफ़ॉर्मेंस इस प्रॉडक्ट का एक अहम हिस्सा रही है. इस पर लगातार नज़र रखी गई है और लगातार काम किया गया है. इस लेख में, हम GoDaddy की परफ़ॉर्मेंस की जांच करने के लिए, लैब में टेस्ट करने से लेकर, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक के साथ असल डेटा का इस्तेमाल करने तक की यात्रा की समीक्षा करेंगे. साथ ही, हम अपने ग्राहकों की साइटों के लिए, पास होने की दर को बहुत ज़्यादा पाने के लिए, प्रॉडक्ट में किए गए सुधारों की सीरीज़ की भी समीक्षा करेंगे.
Lighthouse की मदद से परफ़ॉर्मेंस ट्रैक करना
हमने परफ़ॉर्मेंस ट्रैकिंग के लिए, Lighthouse के डेटा का इस्तेमाल किया है. जब भी प्लैटफ़ॉर्म पर कोई वेबसाइट पब्लिश की जाती है, तो हम "Lighthouse4u" नाम के अपने टूल का इस्तेमाल करके उसकी परफ़ॉर्मेंस का आकलन करते हैं. यह टूल, Google Lighthouse को सेवा के तौर पर उपलब्ध कराता है https://github.com/godaddy/lighthouse4u. इससे हमें यह पता चल पाया कि लैब सेटिंग में साइटें आम तौर पर कैसा परफ़ॉर्म कर रही थीं.
हमारे प्लैटफ़ॉर्म पर होस्ट की जाने वाली लाखों साइटों में कई तरह की सुविधाएं और कॉन्टेंट मौजूद होते हैं. इसलिए, यह ज़रूरी था कि टेस्ट की जा रही हर साइट के मेटाडेटा के साथ परफ़ॉर्मेंस डेटा को जोड़ा जाए. जैसे, इस्तेमाल किया गया टेंप्लेट, रेंडर किए गए विजेट का टाइप वगैरह. इससे हमें यह पता चला कि वेबसाइट की किन सुविधाओं की परफ़ॉर्मेंस खराब है. साथ ही, हमें यह जानकारी भी मिली कि परफ़ॉर्मेंस को बेहतर बनाने के लिए कहां ध्यान देना है.
उदाहरण के लिए, इससे हमें यह पता चला कि "पॉप-अप मोडल" का पेज स्पीड पर बुरा असर पड़ रहा था. इस सुविधा वाली साइटों की परफ़ॉर्मेंस, बिना सुविधा वाली साइटों की तुलना में 12 पॉइंट कम थी. JavaScript को लोड होने में लगने वाले समय को कम करने के लिए, कोड में अपडेट करने के बाद, हमें Lighthouse का स्कोर दो पॉइंट बढ़ाने में मदद मिली. हमने इस जानकारी को अन्य सुविधाओं पर भी लागू किया है. जैसे, पेज लोड होने के तुरंत बाद रेंडर होने वाला "कुकी बैनर".
हमने सुविधाओं के आधार पर समस्या वाली साइटों को देखने के साथ-साथ, अपने JavaScript बंडल का विश्लेषण भी किया. इसमें हमने पाया कि इसके साइज़ का ज़्यादातर हिस्सा, बाहरी डिपेंडेंसी (immutable.js और draft.js) से मिला है. हमने बंडल का साइज़ कम करने के लिए, उपभोक्ताओं को मांग के हिसाब से लेज़ी लोड डिपेंडेंसी में बदल दिया है. इससे, सामान्य JavaScript बंडल के साइज़ में 50% से ज़्यादा की गिरावट आई. यह साइज़ 200 केबी से घटकर 90 केबी (छोटा किया गया) हो गया. बंडल के छोटे साइज़ की मदद से, ब्राउज़र ने साइट लोड होने के शुरुआती लाइफ़साइकल में, बाहरी एसेट लोड की और ज़रूरी स्क्रिप्ट को पहले ही लागू कर दिया. इससे सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) और पहले इनपुट में लगने वाले समय (एफ़आईडी) में सुधार हुआ.
लगातार की जा रही हमारी कोशिशों की वजह से, ग्राहक की साइट का औसत Lighthouse स्कोर, नवंबर 2020 में 40 पॉइंट से बढ़कर मई 2021 में 70 पॉइंट से ज़्यादा हो गया. हालांकि, हमारे सभी प्रयास काम नहीं आए. कभी-कभी हमें हैरानी होती थी, जब स्थानीय टेस्टिंग एनवायरमेंट में किए गए टेस्ट और फ़ील्ड में मिले नतीजों में अंतर होता था. लैब के नतीजे काफ़ी मददगार थे, लेकिन अब फ़ील्ड में उपयोगकर्ताओं के असल अनुभवों पर ध्यान देने का समय आ गया था.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी की मदद से, असल उपयोगकर्ता का डेटा ट्रैक करना
हमने अपने ग्राहक की साइटों में web-vitals लाइब्रेरी जोड़ने के बाद, असल वेबसाइट पर आने वाले लोगों के असल डिवाइसों पर डेटा को मेज़र किया. इन डिवाइसों पर हार्डवेयर, नेटवर्क की स्पीड, और उपयोगकर्ता इंटरैक्शन (जैसे, स्क्रोल करना या क्लिक करना) एक जैसा नहीं होता, जैसा कि Lighthouse का इस्तेमाल करके लैब सेटिंग में होता है. यह सही दिशा में उठाया गया एक बड़ा कदम था, क्योंकि अब हमारे पास वह डेटा था जो हमारी वेबसाइट पर आने वाले लोगों को मिलने वाले अनुभव के बारे में बताता था.
सबसे कम रेटिंग वाले एलिमेंट पर फ़ोकस करना: कुल लेआउट शिफ़्ट (सीएलएस)
नए डेटा का विश्लेषण करने से, हमें यह समझने में मदद मिली कि वेबसाइट की स्पीड को बेहतर बनाने के लिए क्या करना होगा. Lighthouse स्कोर को बेहतर बनाने के लिए किए गए काम की वजह से, हमारा 75वां पर्सेंटाइल एलसीपी 860 मिलीसेकंड और उसी थ्रेशोल्ड पर हमारा एफ़आईडी 10 मिलीसेकंड से कम था. इसलिए, हमें अपने ग्राहक की साइटों पर इन मेट्रिक के लिए ज़्यादा पास रेट मिला: 78% और 98%, क्रमशः. हालांकि, कुल लेआउट शिफ़्ट (सीएलएस) के आंकड़े, Lighthouse में दिखने वाले आंकड़ों से काफ़ी अलग लगते हैं. 75वें पर्सेंटाइल में हमारा सीएलएस 0.17 था, जो "पास" करने के लिए तय किए गए 0.1 थ्रेशोल्ड से ज़्यादा था. इसलिए, हमारी सभी साइटों का पास रेट सिर्फ़ 47% था.
इस मेट्रिक की वजह से, हमारे पासिंग रेट में 40% की गिरावट आई. इसलिए, हमने अगस्त 2021 के आखिर तक इस संख्या को 60% से ज़्यादा करने का लक्ष्य तय किया. ऐसा करने के लिए, हमें सीएलएस पर फ़ोकस करना होगा.
असल में, उपयोगकर्ता पेज के साथ इंटरैक्ट करते हैं और "फ़ोल्ड के ऊपर" मौजूद कॉन्टेंट को स्क्रोल करते हैं. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, इस बात को बेहतर तरीके से कैप्चर करती है. साइट के लोड होने के दौरान, उपयोगकर्ताओं के इंटरैक्ट करने के तरीके में अंतर होने की वजह से, सीएलएस, लैब और फ़ील्ड डेटा से अलग होता है.
वेबसाइट की परफ़ॉर्मेंस की सभी मेट्रिक के थ्रेशोल्ड को पास करने का तरीका
परफ़ॉर्मेंस को बेहतर बनाने के लिए, कई तरह के प्रयोग करने पड़ते हैं. हालांकि, हर प्रयोग हमेशा उम्मीद के मुताबिक काम नहीं करता. हालांकि, यहां कुछ ऐसे सुधार दिए गए हैं जिनकी मदद से हमें अपने लक्ष्य हासिल करने में मदद मिली.
इमेज लोड करने के लिए जगह खाली रखने से, सीएलएस स्कोर में काफ़ी सुधार हुआ है. ऐसा इसलिए, क्योंकि इससे इमेज के नीचे मौजूद कॉन्टेंट शिफ़्ट होने से बचता है. हमने सीएसएस aspect-ratio प्रॉपर्टी का इस्तेमाल करके, इस समस्या को उन ब्राउज़र पर ठीक किया है जिन पर यह काम करती है. जिन विज्ञापनों के लिए इमेज उपलब्ध नहीं होती, उनके लिए हमने एक पारदर्शी प्लेसहोल्डर इमेज लोड की है. यह इमेज कैश मेमोरी में सेव होती है और इसका साइज़ कुछ ही बाइट होता है. इसलिए, यह तुरंत लोड हो जाती है.
इमेज के इस सामान्य व्यवहार की मदद से, हमने सर्वर-साइड रेंडरिंग के दौरान, व्यूपोर्ट की चौड़ाई और इमेज के आसपेक्ट रेशियो के आधार पर, इमेज की आखिरी ऊंचाई का हिसाब पहले से लगा लिया. इससे, एचटीएमएल मार्कअप में वर्टिकल स्पेस बन गया, जो फ़ाइनल इमेज के लिए सही तरीके से रिज़र्व किया गया था. यह सुधार खास तौर पर मोबाइल डिवाइसों पर देखा जा सकता है, क्योंकि इमेज को मोबाइल व्यूपोर्ट के पूरे स्पैन में रेंडर किया जाता है.
हमारे ग्राहकों की साइटों के कुछ कॉम्पोनेंट में डाइनैमिक कॉन्टेंट होता है. उदाहरण के लिए, बाहरी ग्राहकों की समीक्षाओं की सूची. सर्वर साइड रेंडरिंग की परफ़ॉर्मेंस के फ़ायदों का फ़ायदा पाने के लिए, उन्हें सीएसएस में नहीं बदला जा सकता. इनमें लेआउट शिफ़्ट को बेहतर बनाना मुश्किल होता है, क्योंकि कॉन्टेंट (इसलिए ऊंचाई) अलग-अलग होगी. ऐसे मामलों में, हमने कॉम्पोनेंट को एक कंटेनर में लपेटा है. इसमें min-height लागू किया गया है. यह min-height, हर कॉम्पोनेंट की औसत ऊंचाई के आधार पर तय किया गया है. अंदरूनी डाइनैमिक कॉम्पोनेंट के रेंडर हो जाने के बाद, min-height हटा दिया जाता है. यह समाधान पूरी तरह से सही नहीं है, लेकिन इसकी मदद से हमने लेआउट शिफ़्ट को काफ़ी कम कर दिया है.
सीएलएस को बेहतर बनाने पर ध्यान देते हुए, हमने एलसीपी पर भी काम जारी रखा. कई वेबसाइटों पर, एलसीपी में इमेज की वजह से सबसे ज़्यादा देरी होती है. इसलिए, हमें इस पर काम करना था. हमने IntersectionObserver का इस्तेमाल करके, इमेज को धीरे-धीरे लोड करने की सुविधा में सुधार किए थे. हालांकि, हमें पता चला कि हर ब्रेकपॉइंट (मोबाइल, टैबलेट, डेस्कटॉप, बड़े डेस्कटॉप) के लिए, इमेज के साइज़ सबसे सही तरीके से सेट नहीं किए गए थे. इसलिए, हमने इमेज जनरेशन कोड को अपडेट किया, ताकि हर ब्रेकपॉइंट के हिसाब से इमेज को क्लैंप और स्केल किया जा सके. इसके बाद, पिक्सल डेंसिटी के आधार पर रिज़ॉल्यूशन को फिर से स्केल किया जा सके. उदाहरण के लिए, इससे किसी बड़ी इमेज का साइज़ 192 केबी से घटकर 102 केबी हो गया.
खराब नेटवर्क कनेक्शन वाले डिवाइसों पर वेबसाइटों को तेज़ी से रेंडर करने के लिए, हमने कोड जोड़ा है. इससे कनेक्शन की स्पीड के हिसाब से, इमेज क्वालिटी को डाइनैमिक तरीके से कम किया जा सकता है. ऐसा करने के लिए, navigator.connection से मिली downlink प्रॉपर्टी का इस्तेमाल करें. हम यूआरएल पर आधारित क्वेरी पैरामीटर लागू करते हैं, ताकि नेटवर्क की उन स्थितियों के आधार पर, एसेट एपीआई की मदद से इमेज की क्वालिटी कम की जा सके.
हमारे ग्राहकों की साइटों के कई सेक्शन, डाइनैमिक तरीके से लोड होते हैं. हमें पता है कि किसी साइट को पब्लिश करने पर, उस पर कौनसे सेक्शन रेंडर किए जाएंगे. इसलिए, हमने rel=preconnect संसाधन के बारे में जानकारी का इस्तेमाल करके, पहले से ही कनेक्शन और ज़रूरी हैंडशेक शुरू कर दिए हैं. हम फ़ॉन्ट और अन्य ज़रूरी संसाधनों को तेज़ी से लोड करने के लिए, संसाधन के सुझावों का भी इस्तेमाल करते हैं.
अपनी साइटें बनाते समय, ग्राहक अलग-अलग सेक्शन जोड़ते हैं. इन सेक्शन में अलग-अलग फ़ंक्शन की अनुमति देने के लिए, इनलाइन स्क्रिप्ट हो सकती हैं. इन स्क्रिप्ट को पूरे एचटीएमएल पेज में इनलाइन करना, परफ़ॉर्मेंस के लिए हमेशा सही नहीं होता. हमने इन स्क्रिप्ट को बाहरी बनाने का फ़ैसला लिया है, ताकि ब्राउज़र, स्क्रिप्ट के कॉन्टेंट को असिंक्रोनस तरीके से लोड और पार्स कर सके. बाहरी स्क्रिप्ट को सभी पेजों पर शेयर भी किया जा सकता है. इससे ब्राउज़र और सीडीएन कैश मेमोरी के तौर पर परफ़ॉर्मेंस में और भी बढ़ोतरी हुई. हमने ज़रूरी स्क्रिप्ट को इन-लाइन रखा है, ताकि ब्राउज़र उन्हें तेज़ी से पार्स और लागू कर सके.
नतीजे
सीएलएस पर ध्यान देने से हमें फ़ायदा हुआ. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक के थ्रेशोल्ड को हासिल करने के लिए, हमारी साइट के 40% पेजों को मंज़ूरी मिली थी. अब यह संख्या 70% हो गई है. इसका मतलब है कि हमारी साइट की परफ़ॉर्मेंस में 75% का सुधार हुआ है!
जब उपयोगकर्ता अपडेट करने और अपनी साइटों को फिर से पब्लिश करने के लिए हमारे प्लैटफ़ॉर्म पर वापस आते हैं, तो उन्हें परफ़ॉर्मेंस से जुड़े नए सुधार मिलते हैं. इस वजह से, "वेबसाइट की परफ़ॉर्मेंस की जानकारी से जुड़ी शर्तें पूरी करने वाली" साइटों की संख्या लगातार बढ़ रही है. इसकी जानकारी नीचे दिए गए चार्ट में दी गई है:
मीटिंग में सामने आए नतीजे
परफ़ॉर्मेंस को बेहतर बनाने और उसकी प्रोग्रेस को ट्रैक करने के लिए, यह ज़रूरी है कि मेज़रमेंट के लिए किन टूल का इस्तेमाल किया जाए. Lighthouse, "लैब सेटिंग" में ऊपरी हिस्से की परफ़ॉर्मेंस को मेज़र करने के लिए मददगार था. हालांकि, यह सिर्फ़ उपयोगकर्ता इंटरैक्शन (जैसे, पेज को स्क्रोल करना) से होने वाली परफ़ॉर्मेंस से जुड़ी समस्याओं को सही तरीके से कैप्चर नहीं करता था.
मेटाडेटा की मदद से, असल में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ट्रैक करने से, हमें अपने सुधारों के असर को विज़ुअलाइज़ करने, टारगेट करने, और मेज़र करने में मदद मिली. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के स्कोर को बेहतर बनाने की प्रोसेस के दौरान, हमारी टीम को अपने पूरे कोडबेस में ऐसे पैटर्न का पता चला जो परफ़ॉर्म नहीं कर रहे थे. इन पैटर्न की पहचान करने के बाद, उन्हें बदल दिया गया. कभी-कभी, आशाजनक बदलावों का उतना असर नहीं हुआ जितना हमें उम्मीद थी. वहीं, कुछ मामलों में इसके उलट हुआ. यह दुनिया आसान नहीं है. इसलिए, आपको लगातार कोशिश करते रहना होगा.