लाइटहाउस में ज़्यादा से ज़्यादा संभावित एफ़आईडी में 90% की कमी और Chrome की उपयोगकर्ता अनुभव रिपोर्ट में एफ़आईडी में 9% सुधार के लिए, प्रॉडक्ट की जानकारी वाले पेजों के इंटरैक्टिविटी को ऑप्टिमाइज़ किया गया.
मेरकादो लिब्रे, लैटिन अमेरिका का सबसे बड़ा ई-कॉमर्स और भुगतान नेटवर्क है. यह वेबसाइट 18 देशों में मौजूद है. साथ ही, यह ब्राज़ील, मेक्सिको, और अर्जेंटीना में मार्केट लीडर है. वेबसाइट पर आने वाले यूनीक लोगों और पेज व्यू के आधार पर यह मार्केट लीडर है.
कंपनी का वेब परफ़ॉर्मेंस लंबे समय से फ़ोकस रहा है, लेकिन हाल ही में उसने परफ़ॉर्मेंस पर नज़र रखने और साइट के अलग-अलग हिस्सों में ऑप्टिमाइज़ेशन लागू करने के लिए एक टीम बनाई है.
इस लेख में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली, फ़र्स्ट इनपुट डिले (एफ़आईडी) और लैब प्रॉक्सी, टोटल ब्लॉकिंग टाइम (टीबीटी) के बारे में बताया गया है. इसमें, मर्काडो लिब्रे की फ़्रंटएंड आर्किटेक्चर टीम के गिल पाज़, पाब्लो कारमिनाटी, और ओलेह बुर्के ने काम की जानकारी दी है.
90%
लाइटहाउस में, ज़्यादा से ज़्यादा संभावित एफ़आईडी में कमी
9%
ज़्यादा उपयोगकर्ता, CrUX में एफ़आईडी को "तेज़" मानते हैं
लंबे टास्क, फ़र्स्ट इनपुट डिले, और टोटल ब्लॉक टाइम
महंगे JavaScript कोड का इस्तेमाल करने से, लंबे टास्क हो सकते हैं. ये टास्क, ब्राउज़र के मुख्य थ्रेड में 50 मि॰से॰ से ज़्यादा समय तक चलते हैं.
एफ़आईडी (फ़र्स्ट इनपुट डिले), उपयोगकर्ता के किसी पेज से पहली बार इंटरैक्ट करने (जैसे, किसी लिंक पर क्लिक करने से) से लेकर उस इंटरैक्शन के जवाब में, ब्राउज़र असल में इवेंट हैंडलर शुरू करने में लगने वाले समय को मापता है. महंगे JavaScript कोड का इस्तेमाल करने वाली साइट में कई लंबे टास्क होंगे, जिससे एफ़आईडी पर बुरा असर पड़ेगा.
उपयोगकर्ताओं को अच्छा अनुभव देने के लिए, साइटों की यह कोशिश होनी चाहिए कि फ़र्स्ट इनपुट डिले की अवधि 100 मिलीसेकंड से कम हो:
Mercado Libre की साइट, ज़्यादातर सेक्शन में अच्छा परफ़ॉर्म कर रही थी. हालांकि, उसे Chrome User Experience Report में जानकारी मिली कि प्रॉडक्ट की जानकारी वाले पेजों में एफ़आईडी खराब है. इस जानकारी के आधार पर, उन्होंने साइट में प्रॉडक्ट पेजों के लिए इंटरैक्टिविटी को बेहतर बनाने की कोशिश की.
इन पेजों पर उपयोगकर्ता को जटिल इंटरैक्शन करने की सुविधा मिलती है. इसलिए, इसका मकसद इंटरैक्टिविटी ऑप्टिमाइज़ेशन करना होता है, ताकि उपयोगकर्ता के काम में कोई रुकावट न आए.
प्रॉडक्ट की जानकारी वाले पेजों की इंटरैक्टिविटी का आकलन करें
एफ़आईडी को असली उपयोगकर्ता की ज़रूरत होती है. इसलिए, इसे लैब में नहीं मापा जा सकता. हालांकि, टोटल ब्लॉकिंग टाइम (टीबीटी) मेट्रिक को लैब में मेज़र किया जा सकता है, यह फ़ील्ड में एफ़आईडी के साथ अच्छी तरह से जुड़ी होती है, और ऐसी समस्याओं को भी कैप्चर करती है जो इंटरैक्टिविटी पर असर डालती हैं.
नीचे दिए गए ट्रेस में, उदाहरण के लिए, मुख्य थ्रेड पर किसी टास्क को पूरा करने में लगने वाला कुल समय 560 मि॰से॰ है, लेकिन उस समय के सिर्फ़ 345 मि॰से॰ को कुल ब्लॉक होने का समय माना जाता है. हर टास्क के हिस्सों का कुल योग जो 50 मि॰से॰ से ज़्यादा होता है:
मेरकादो लिब्रे ने वास्तविक दुनिया में प्रॉडक्ट की जानकारी देने वाले पेजों की इंटरैक्टिविटी को मापने और बेहतर बनाने के लिए, TBT को लैब में प्रॉक्सी मेट्रिक के तौर पर चुना.
उसके ज़रिए यह सामान्य तरीका अपनाया गया है:
- WebPageTest का इस्तेमाल करके यह पता लगाया जा सकता है कि असल डिवाइस पर कौनसी स्क्रिप्ट मुख्य थ्रेड को व्यस्त रख रही थीं.
- ज़्यादा से ज़्यादा संभावित फ़र्स्ट इनपुट डिले (ज़्यादा से ज़्यादा संभावित एफ़आईडी) में हुए बदलावों के असर का पता लगाने के लिए, Lighthouse का इस्तेमाल करें.
लंबे टास्क विज़ुअलाइज़ करने के लिए WebPageTest का इस्तेमाल करना
WebPagetest (WPT) एक वेब परफ़ॉर्मेंस टूल है. इसकी मदद से आप दुनिया भर की अलग-अलग जगहों पर असली डिवाइस पर जांच कर सकते हैं.
Mercado Libre ने, असल उपयोगकर्ताओं की तरह डिवाइस का टाइप और जगह चुनकर, अपने उपयोगकर्ताओं का अनुभव फिर से बनाने के लिए WPT का इस्तेमाल किया. खास तौर पर, उन्होंने Moto 4G डिवाइस और Dulles, वर्जीनिया को चुना, क्योंकि वे मेक्सिको में Mercado Libre उपयोगकर्ताओं के अनुभव का अनुमान लगाना चाहते थे. डब्ल्यूपीटी का मुख्य थ्रेड व्यू देखकर, Mercado Libre ने पाया कि मुख्य थ्रेड को लगातार दो सेकंड तक ब्लॉक करने वाले कई लंबे टास्क थे:
दोनों सेकंड के वॉटरफ़ॉल का विश्लेषण करने पर पता चला कि इन दो सेकंड का काफ़ी हिस्सा, Analytics मॉड्यूल से मिला था. ऐप्लिकेशन का मुख्य बंडल साइज़ बड़ा (950 केबी) था और इसे पार्स करने, कंपाइल करने, और एक्ज़ीक्यूट करने में काफ़ी समय लगा था.
ज़्यादा से ज़्यादा संभावित एफ़आईडी तय करने के लिए, लाइटहाउस का इस्तेमाल करें
लाइटहाउस से आपको अलग-अलग डिवाइस और जगहों में से चुनने की अनुमति नहीं है, लेकिन यह साइटों का पता लगाने और परफ़ॉर्मेंस से जुड़े सुझाव पाने के लिए बहुत काम का टूल है.
प्रॉडक्ट की जानकारी वाले पेजों पर लाइटहाउस चलाते समय, Mercado Libre ने पाया कि 1710ms की वैल्यू के साथ, सिर्फ़ मैक्स संभावित एफ़आईडी को लाल रंग से मार्क किया गया है.
इसके आधार पर, Mercado Libre ने Lighthouse और WebPageTest जैसे लैबोरेट्री टूल में अपने ज़्यादा से ज़्यादा संभावित एफ़आईडी स्कोर को बेहतर बनाने का लक्ष्य तय किया गया. यह मानकर लगाया जा रहा है कि इन सुधारों से उनके असली उपयोगकर्ताओं पर असर पड़ेगा और इसलिए यह 'Chrome उपयोगकर्ता अनुभव रिपोर्ट' जैसे असली उपयोगकर्ताओं की निगरानी करने वाले टूल में दिखाई देगा.
लंबे टास्क ऑप्टिमाइज़ करें
पहला दोहराव
मुख्य थ्रेड ट्रेस के आधार पर, Mercado Libre ने दो ऐसे मॉड्यूल ऑप्टिमाइज़ करने का लक्ष्य तय किया जो महंगे कोड का इस्तेमाल कर रहे थे.
उन्होंने इंटरनल ट्रैकिंग मॉड्यूल की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना शुरू कर दिया. इस मॉड्यूल में एक सीपीयू से ज़्यादा लोड होने वाला टास्क था, जो मॉड्यूल के काम करने के लिए ज़रूरी नहीं था. इसलिए, इसे सुरक्षित तरीके से हटाया जा सकता है. इससे पूरी साइट के लिए JavaScript में 2% की कमी आई.
इसके बाद, उन्होंने सामान्य बंडल के साइज़ को बेहतर बनाने की दिशा में काम करना शुरू किया:
Mercado Libre ने ऑप्टिमाइज़ेशन के अवसरों का पता लगाने के लिए, webpack-bundle-analyser का इस्तेमाल किया:
- शुरुआत में उन्हें पूरे Lodash मॉड्यूल की ज़रूरत थी. इसकी जगह, हर तरीके के हिसाब से पूरी लाइब्रेरी के बजाय Lodash का सिर्फ़ एक सबसेट लोड करने की ज़रूरत है. साथ ही, Lodash को और भी छोटा करने के लिए, इसका इस्तेमाल lodash-webpack-plugin के साथ किया गया.
उन्होंने ये Babel ऑप्टिमाइज़ेशन भी लागू किए हैं:
- पूरे कोड में Doorbell के हेल्पर का फिर से इस्तेमाल करने और बंडल का साइज़ काफ़ी कम करने के लिए, @babel/plugin-transform-runtime का इस्तेमाल करें.
- बिल्ड के समय टोकन बदलने के लिए, babel-plugin-search-and-replace का इस्तेमाल करें. इससे मुख्य बंडल के अंदर एक बड़ी कॉन्फ़िगरेशन फ़ाइल हटाई जा सकेगी.
- प्रॉप टाइप हटाकर कुछ और बाइट बचाने के लिए, babel-plugin-transform-react-remove-prop-types जोड़ें.
इन ऑप्टिमाइज़ेशन की वजह से, बंडल के साइज़ में करीब 16% की कमी हो गई थी.
असर का आकलन करें
इन बदलावों की वजह से, Mercado Libre को लंबे समय तक चलने वाले लंबे टास्क दो सेकंड से कम करके एक सेकंड कर दिए गए:
लाइटहाउस ने सबसे ज़्यादा संभावित फ़र्स्ट इनपुट डिले में 57% की कमी दिखाई:
दूसरा इटरेशन
टीम ने लगातार बेहतर काम करने की कोशिश की, ताकि आने वाले समय में इसे बेहतर बनाया जा सके.
इस जानकारी के आधार पर, उसने ये बदलाव लागू करने का फ़ैसला लिया:
- कंपाइल और पार्स करने के समय को ऑप्टिमाइज़ करने के लिए, मुख्य बंडल का साइज़ कम करना जारी रखें (उदाहरण के लिए, सभी अलग-अलग मॉड्यूल से डुप्लीकेट डिपेंडेंसी हटाकर).
- JavaScript को छोटे-छोटे हिस्सों में बांटने और अलग-अलग कॉम्पोनेंट को बेहतर तरीके से लोड करने के लिए, कॉम्पोनेंट लेवल पर कोड को बांटने की सुविधा लागू करें.
- मुख्य थ्रेड के बेहतर इस्तेमाल के लिए, कॉम्पोनेंट हाइड्रेशन को कुछ समय के लिए रोकें. इस तकनीक को आम तौर पर पार्शियल हाइड्रेशन कहा जाता है.
असर का आकलन करें
नतीजे देने वाले WebPageTest ट्रेस ने JS एक्ज़ीक्यूशन के छोटे हिस्से दिखाए:
साथ ही, लाइटहाउस में उनका ज़्यादा से ज़्यादा संभावित एफ़आईडी समय 60%ज़्यादा कम हो गया था:
असल उपयोगकर्ताओं की प्रोग्रेस को विज़ुअलाइज़ करें
हालांकि, WebPageTest और लाइटहाउस जैसे लैबोरेट्री टेस्टिंग टूल, डेवलपमेंट के दौरान समाधानों को आज़माने के लिए बेहतरीन हैं. हालांकि, असली लक्ष्य यह है कि असली उपयोगकर्ताओं के अनुभव को बेहतर बनाया जाए.
Chrome पर उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट में उपयोगकर्ता अनुभव की मेट्रिक उपलब्ध होती हैं. इस मेट्रिक से पता चलता है कि Chrome के उपयोगकर्ताओं को वेब पर लोकप्रिय डेस्टिनेशन कैसे दिखते हैं. रिपोर्ट का डेटा, BigQuery में क्वेरी चलाकर, PageSpeedInsights या CrUX API में पाया जा सकता है.
CrUX डैशबोर्ड, मुख्य मेट्रिक में हुए बदलाव को आसानी से देखने का तरीका है:
अगले चरण
वेब परफ़ॉर्मेंस की सुविधा का इस्तेमाल कभी भी पूरा नहीं किया जा सकता और Mercado Libre, इस बात को समझता है कि इन ऑप्टिमाइज़ेशन से उपयोगकर्ताओं को कितना फ़ायदा होता है. हमारी साइट पर कई तरह के ऑप्टिमाइज़ेशन लागू होते रहते हैं. इनमें प्रॉडक्ट लिस्टिंग वाले पेजों में प्रीफ़ेच करना, इमेज ऑप्टिमाइज़ेशन वगैरह शामिल हैं. हालांकि, वे टोटल ब्लॉकिंग टाइम (टीबीटी) और प्रॉक्सी एफ़आईडी जैसे तरीकों को और बेहतर बनाने के लिए, प्रॉडक्ट लिस्टिंग वाले पेजों में लगातार सुधार करते रहते हैं. इन ऑप्टिमाइज़ेशन में ये शामिल हैं:
- कोड को अलग-अलग करने वाले सलूशन पर इटरेट किया जा रहा है.
- तीसरे पक्ष की स्क्रिप्ट को बेहतर तरीके से लागू करना.
- बंडलर लेवल पर ऐसेट बंडलिंग में लगातार सुधार (webpack).
Mercado Libre ने परफ़ॉर्मेंस की पूरी जानकारी हासिल की है. यही वजह है कि कंपनी ने साइट पर इंटरैक्शन को ऑप्टिमाइज़ करना जारी रखा है. साथ ही, उसने अन्य दो मौजूदा वेबसाइट की परफ़ॉर्मेंस की जानकारी: एलसीपी (सबसे बड़ा कॉन्टेंटफ़ुल पेंट) और सीएलएस (कुल लेआउट शिफ़्ट) में सुधार करने के अवसरों का आकलन करना शुरू कर दिया है.