The Economic Times की वेबसाइट पर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ करने से, उपयोगकर्ता अनुभव में काफ़ी सुधार हुआ. साथ ही, पूरी वेबसाइट पर बाउंस रेट में काफ़ी कमी आई.
इंटरनेट की रफ़्तार हर दिन बेहतर होती जाती है. इसलिए, उपयोगकर्ता उम्मीद करते हैं कि वेबसाइटें उनके जवाब पहले से ज़्यादा तेज़ी से काम करेंगी. The Economic Times की मदद से, हर महीने 4.5 करोड़ से भी ज़्यादा सक्रिय उपयोगकर्ता मैनेज होते हैं. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को सभी डोमेन पर ऑप्टिमाइज़ करके, एएमपी और बिना एएमपी वाले पेजों पर, हमने बाउंस रेट को काफ़ी कम किया और पढ़ने के अनुभव को बेहतर बनाया.
प्रभाव मापना
हमने सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) और कुल लेआउट शिफ़्ट (सीएलएस) पर ध्यान दिया, क्योंकि उपयोगकर्ताओं को पढ़ने का बेहतरीन अनुभव देने के लिए, ये सबसे ज़्यादा मायने रखते हैं. नीचे बताए गए परफ़ॉर्मेंस से जुड़े कई सुधारों को लागू करने के बाद, The Economic Times ने कुछ ही महीनों में, Chrome के उपयोगकर्ता एक्सपेरिमेंट (CrUX) की रिपोर्ट की मेट्रिक में काफ़ी सुधार किया.
कुल मिलाकर, सीएलएस में 0.25 से 0.09 तक 250% की बढ़ोतरी हुई. कुल मिलाकर, एलसीपी में 4.5 सेकंड से 2.5 सेकंड तक 80% की बढ़ोतरी हुई.
इसके अलावा, अक्टूबर 2020 से जुलाई 2021 के बीच, "खराब" रेंज में एलसीपी वैल्यू 33% तक कम हुई:
इसके अलावा, "खराब" रेंज में सीएलएस वैल्यू में 65% की कमी आई और "अच्छी" रेंज में सीएलएस वैल्यू में इसी समयावधि में 20% की बढ़ोतरी हुई:
इसका नतीजा यह हुआ कि The Economic Times ने, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के थ्रेशोल्ड को हासिल किया, लेकिन अब यह वेबसाइट की परफ़ॉर्मेंस की पूरी जानकारी के थ्रेशोल्ड को पार कर गई है. इस वजह से, बाउंस रेट में कुल 43% की कमी आई.
एलसीपी क्या है और हमने इसे कैसे बेहतर बनाया है?
उपयोगकर्ता अनुभव को बेहतर बनाने और लोड स्पीड की पहचान करने के लिए, सबसे बड़ा एलिमेंट सबसे काम का एलिमेंट होता है. फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) जैसी परफ़ॉर्मेंस मेट्रिक, सिर्फ़ पेज लोड होने के शुरुआती अनुभव को कैप्चर करती हैं. वहीं दूसरी ओर, एलसीपी उपयोगकर्ता को दिखने वाली सबसे बड़ी इमेज, टेक्स्ट या वीडियो सेक्शन को रेंडर होने में लगने वाले समय की रिपोर्ट करता है.
तेज़ी से काम करने वाले डीएनएस प्रोवाइडर पर स्विच करने और इमेज ऑप्टिमाइज़ करने के अलावा, यहां कुछ तकनीकों के बारे में बताया गया है जिन्हें हमने एलसीपी को बेहतर बनाने के लिए लागू किया है.
अहम अनुरोध पहले
सभी मॉडर्न ब्राउज़र एक साथ अनुरोधों की संख्या को सीमित करते हैं. इसलिए, डेवलपर को सबसे पहले अहम कॉन्टेंट को लोड करना ज़रूरी होता है. किसी जटिल वेब पेज को लोड करने के लिए, हमें हेडर एलिमेंट, सीएसएस, JavaScript से जुड़े संसाधन, हीरो इमेज, लेख का मुख्य हिस्सा, टिप्पणियां, मिलते-जुलते दूसरे समाचार, फ़ुटर, और विज्ञापन जैसी एसेट डाउनलोड करनी होंगी. हमने आकलन किया कि एलसीपी के लिए किन एलिमेंट की ज़रूरत थी. साथ ही, हमने एलसीपी को बेहतर बनाने के लिए, उन आइटम को लोड करने को प्राथमिकता दी. हमने उन कॉल को भी टाला, जो शुरुआती पेज रेंडरिंग का हिस्सा नहीं थे.
टेक्स्ट कैसा दिखेगा
हमने font-display प्रॉपर्टी के साथ प्रयोग किया, क्योंकि इसका एलसीपी और सीएलएस, दोनों पर असर पड़ता है. हमने font-display: auto; आज़माया और फिर font-display: swap; पर स्विच किया. यह शुरुआत में टेक्स्ट को सबसे मेल खाने वाले और उपलब्ध फ़ॉन्ट में रेंडर करता है. इसके बाद, डाउनलोड हो जाने पर फ़ॉन्ट पर स्विच हो जाता है. इसकी वजह से हमारा टेक्स्ट तेज़ी से रेंडर हुआ, भले ही नेटवर्क की स्पीड कोई भी न हो.
बेहतर कंप्रेशन
Bromli, Gzip और Deflat के लिए एक वैकल्पिक कंप्रेशन एल्गोरिदम है. इसे Google ने बनाया है. हमने अपने फ़ॉन्ट और एसेट बदल दिए हैं और सर्वर कंप्रेशन को Gzip से Brotli में बदल दिया है, ताकि कम से कम इस्तेमाल किया जा सके:
- JavaScript फ़ाइलें, Gzip की तुलना में 15% छोटी होती हैं.
- एचटीएमएल फ़ाइलें, Gzip की तुलना में 18% छोटी होती हैं.
- CSS और फ़ॉन्ट फ़ाइलें Gzip की तुलना में 17% छोटी हैं.
तीसरे पक्ष के डोमेन से पहले से कनेक्ट करना
preconnect का इस्तेमाल सावधानी से करना चाहिए, क्योंकि यह अब भी सीपीयू के लिए ज़्यादा समय ले सकता है और दूसरे ज़रूरी संसाधनों को प्रोसेस करने में देरी कर सकता है. खास तौर पर, सुरक्षित कनेक्शन पर.
हालांकि, अगर आपको पता चलता है कि किसी तीसरे पक्ष के डोमेन पर किसी संसाधन को फ़ेच किया जाएगा, तो preconnect बेहतर होता है. अगर ऐसा ज़्यादा ट्रैफ़िक वाली वेबसाइट पर कभी-कभी होता है, तो preconnect गैर-ज़रूरी टीसीपी और TLS से ट्रिगर हो सकता है. इस वजह से, dns-prefetch तीसरे पक्ष के संसाधनों, जैसे कि सोशल मीडिया, आंकड़े वगैरह के लिए बेहतर था. वे समय से पहले डीएनएस लुकअप का इस्तेमाल कर सकते थे.
कोड को कई हिस्सों में बांटें
साइट की हेडिंग में, हमने सिर्फ़ वे संसाधन लोड किए हैं जो या तो कारोबारी नियम का ज़रूरी हिस्सा थे या पेज के ऊपरी हिस्से पर रेंडरिंग के लिए ज़रूरी थे. इसके अलावा, हम अपने कोड को कोड को अलग-अलग हिस्सों में बांटने की सुविधा के साथ कई हिस्सों में बांट देते हैं. इससे हमें पेज के एलसीपी को और बेहतर बनाने में मदद मिली.
बेहतर कैशिंग
सभी फ़्रंट-एंड रूट के लिए, हमने एक Redis लेयर जोड़ी है, जो कैश मेमोरी से टेंप्लेट दिखाती है. इससे सर्वर पर कंप्यूटेशन में लगने वाला समय कम हो जाता है और हर अनुरोध में पूरा यूज़र इंटरफ़ेस (यूआई) बन जाता है. इससे बाद के अनुरोधों में एलसीपी कम हो जाती है.
एलसीपी के लक्ष्यों और उपलब्धियों के बारे में खास जानकारी
ऑप्टिमाइज़ेशन प्रोजेक्ट शुरू करने से पहले, टीम ने अपने एलसीपी स्कोर को 4.5 सेकंड पर सेट किया. यह स्कोर, CrUX रिपोर्ट फ़ील्ड के डेटा के आधार पर, अपने उपयोगकर्ताओं के 75वें पर्सेंटाइल के लिए है. ऑप्टिमाइज़ेशन प्रोजेक्ट के बाद, इसे घटाकर 2.5 सेकंड कर दिया गया था.
सीएलएस क्या है और हमने इसे कैसे बेहतर बनाया है?
क्या आपने कभी वेबसाइट ब्राउज़ करते समय पेज सामग्री में अचानक हुई हलचल देखी है? इसकी एक वजह पेज पर अनजान डाइमेंशन वाले मीडिया (इमेज, वीडियो, विज्ञापन वगैरह) को एसिंक्रोनस रूप से लोड करना है. जैसे ही मीडिया संसाधन लोड होते हैं, वे पेज के लेआउट को शिफ़्ट कर देते हैं.
हम The Economic Times की वेबसाइट पर, सीएलएस को बेहतर बनाने के लिए उठाए गए कदमों के बारे में बताएंगे.
प्लेसहोल्डर का इस्तेमाल करना
हमने जाने-पहचाने डाइमेंशन की विज्ञापन यूनिट और मीडिया एलिमेंट के लिए, स्टाइल वाले प्लेसहोल्डर का इस्तेमाल किया है. ऐसा इसलिए किया गया, ताकि विज्ञापन लाइब्रेरी के पेज विज्ञापनों के लोड और रेंडर होने पर, लेआउट शिफ़्ट से बचा जा सके. इससे यह पक्का होता है कि विज्ञापन के लिए जगह बचाकर लेआउट शिफ़्ट खत्म कर दिए जाएं.
तय किए गए कंटेनर डाइमेंशन
हमने सभी इमेज और कंटेनर के लिए, साफ़ तौर पर जानकारी देने वाले डाइमेंशन के बारे में बताया है, ताकि ब्राउज़र इंजन को डीओएम एलिमेंट के उपलब्ध होने पर, उनकी चौड़ाई और ऊंचाई का हिसाब लगाने की ज़रूरत न पड़े. इससे, लेआउट में ग़ैर-ज़रूरी बदलाव और पेंटिंग की ज़्यादा ज़रूरत से बचा जा सका.
सीएलएस के लक्ष्यों और उपलब्धियों के बारे में खास जानकारी
ऑप्टिमाइज़ेशन प्रोजेक्ट शुरू करने से पहले, टीम ने अपने सीएलएस स्कोर को 0.25 पर सेट किया. हम इसे काफ़ी हद तक 90% से 0.09 तक कम कर पाए.
फ़र्स्ट इनपुट डिले (एफ़आईडी) क्या है और इसमें सुधार कैसे किया गया है?
फ़र्स्ट इनपुट डिले वह मेट्रिक है जो यह ट्रैक करती है कि वेबसाइट, उपयोगकर्ता के इनपुट के हिसाब से कितनी रिस्पॉन्सिव है. खराब एफ़आईडी स्कोर की मुख्य वजह ज़्यादा JavaScript काम है जो ब्राउज़र के मुख्य थ्रेड को व्यस्त रखता है. इससे उपयोगकर्ता के इंटरैक्शन में देरी हो सकती है. हमने एफ़आईडी में कई तरह से सुधार किए हैं.
लंबे JavaScript टास्क को बांटें
लंबे टास्क, 50 मिलीसेकंड या उससे लंबे टास्क होते हैं. लंबे टास्क, ब्राउज़र के मुख्य थ्रेड को घेरते हैं और उपयोगकर्ता के इनपुट पर रिस्पॉन्स देने से रोकते हैं. उपयोगकर्ता के अनुरोध पर, हमने लंबे समय तक चलने वाले टास्क को छोटे-छोटे टास्क में बांट दिया. इससे JavaScript का ज़्यादा इस्तेमाल करने में मदद मिली.
इस्तेमाल नहीं की गई JavaScript को रोकें
पेज को ज़्यादा रिस्पॉन्सिव बनाए रखने के लिए, हमने आंकड़ों जैसी तीसरे पक्ष की स्क्रिप्ट के बजाय, पेज के कॉन्टेंट को प्राथमिकता दी है. हालांकि, कुछ लाइब्रेरी पर कुछ सीमाएं होती हैं. ऐसा इसलिए होता है, क्योंकि उपयोगकर्ता के सफ़र को सटीक तरीके से ट्रैक करने के लिए, उन्हें दस्तावेज़ <head> में लोड करना ज़रूरी होता है.
पॉलीफ़िल कम करें
हमने कुछ पॉलीफ़िल और लाइब्रेरी पर निर्भरता कम कर दी है, क्योंकि ब्राउज़र मॉडर्न एपीआई के साथ काम करते हैं और कम उपयोगकर्ता Internet Explorer जैसे लेगसी ब्राउज़र का इस्तेमाल कर रहे हैं.
लेज़ी लोड विज्ञापन
वेबसाइट में फ़ोल्ड के नीचे विज्ञापनों को धीरे-धीरे लोड करने से, मुख्य थ्रेड को ब्लॉक करने का समय कम हुआ और एफ़आईडी बेहतर हुआ.
एफ़आईडी के लक्ष्यों और उपलब्धियों के बारे में खास जानकारी
रूटीन के एक्सपेरिमेंट से, हमने अपने एफ़आईडी को 200 मि॰से॰ से घटाकर 50 मि॰से॰ से कम किया.
रिग्रेशन को रोकना
The Economics Times, प्रोडक्शन में अपने-आप परफ़ॉर्मेंस की जांच करने की सुविधा शुरू करने जा रहा है, ताकि पेज की परफ़ॉर्मेंस में होने वाले रिग्रेशन से बचा जा सके. उन्होंने लैब टेस्ट को ऑटोमेट करने के लिए, Lighthouse-CI का आकलन करने की योजना बनाई है. इससे उनकी प्रोडक्शन ब्रांच पर रिग्रेशन को रोका जा सकता है.