Chrome की वेब टूल की मदद से, उपयोगकर्ता अनुभव को बेहतर बनाने के अवसर ढूंढे जा रहे हैं.
आज हम लाइटहाउस, PageSpeed, और DevTools में टूल की नई सुविधाओं के बारे में बात करेंगे. इनसे यह पता लगाने में मदद मिलेगी कि वेब की परफ़ॉर्मेंस की अहम जानकारी वाली रिपोर्ट में आपकी साइट को कैसे बेहतर बनाया जा सकता है.
टूल के बारे में फिर से जानकारी देने के लिए बता दें कि Lighthouse, वेब पेजों की क्वालिटी को बेहतर बनाने के लिए एक ऐसा ओपन सोर्स टूल है जो अपने-आप काम करता है. यह आपको डीबग करने वाले टूल के Chrome DevTools सुइट में मिल सकता है. साथ ही, इसे किसी भी वेब पेज, सार्वजनिक या पुष्टि ज़रूरी पर चलाया जा सकता है. लाइटहाउस को PageSpeed Insights, CI, और WebPageTest पर भी देखा जा सकता है.
लाइटहाउस 7.x में एलिमेंट के स्क्रीनशॉट जैसी नई सुविधाएं शामिल हैं.इससे उपयोगकर्ता अनुभव की मेट्रिक पर असर डालने वाले यूज़र इंटरफ़ेस (यूआई) के हिस्सों की आसानी से जांच की जा सकती है. उदाहरण के लिए, किन नोड से लेआउट शिफ़्ट होने में मदद मिल रही है.
हमने PageSpeed Insights पर एलिमेंट के स्क्रीनशॉट की सुविधा भी भेज दी है. इससे, पेजों की परफ़ॉर्मेंस एक बार में ही दिखने में आने वाली समस्याओं का आसानी से पता लगाया जा सकता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का आकलन करें
लाइटहाउस, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को सिंटल तरीके से मेज़र कर सकता है. इसमें, सबसे बड़े कॉन्टेंटफ़ुल पेंट, लेआउट में बदलाव, और टोटल ब्लॉकिंग टाइम (फ़र्स्ट इनपुट डिले के लिए लैब प्रॉक्सी) शामिल है. इन मेट्रिक से पता चलता है कि पेज लोड हुआ है या नहीं. साथ ही, इससे लेआउट की स्थिरता और इंटरैक्शन के लिए उसके तैयार होने का पता चलता है. हालांकि, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट के आने वाले समय में, फ़र्स्ट कॉन्टेंटफ़ुल पेंट जैसी अन्य मेट्रिक भी दिखेंगी.
लाइटहाउस रिपोर्ट के "मेट्रिक" सेक्शन में, इन मेट्रिक के लैब वर्शन शामिल होते हैं. इसका इस्तेमाल, खास जानकारी के तौर पर किया जा सकता है. इससे आपको पता चलता है कि उपयोगकर्ता अनुभव के किन पहलुओं पर आपको ध्यान देने की ज़रूरत है.
फ़ील्ड मेट्रिक, जैसे कि Chrome UX रिपोर्ट या RUM में मौजूद होती हैं. इस पर किसी तरह की पाबंदी नहीं होती है और ये लैब डेटा के लिए काम के होती हैं, क्योंकि वे असली उपयोगकर्ताओं का अनुभव दिखाती हैं. फ़ील्ड डेटा यह नहीं बता सकता कि आपको लैब में डाइग्नोस्टिक्स के बारे में किस तरह की जानकारी मिलेगी, इसलिए दोनों को साथ में इस्तेमाल करना.
जानें कि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट में कहां-कहां सुधार किए जा सकते हैं
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय की पहचान करें
एलसीपी, लोड होने के अनुमानित अनुभव का मेज़रमेंट है. यह पेज लोड होने के दौरान पॉइंट को तब मार्क करता है, जब प्राइमरी या "सबसे बड़े" कॉन्टेंट के लोड हो गए हों और वह उपयोगकर्ता को दिख रहा हो.
लाइटहाउस में "सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला एलिमेंट" ऑडिट है. इससे यह पता चलता है कि कौनसा एलिमेंट सबसे ज़्यादा एलिमेंट दिखाने वाला पेंट था. एलिमेंट पर कर्सर घुमाने से, वह मुख्य ब्राउज़र की विंडो में हाइलाइट हो जाएगा.
अगर यह एलिमेंट कोई इमेज है, तो यह जानकारी इस बात का संकेत है कि आपको इस इमेज के लोड होने को ऑप्टिमाइज़ करना है. लाइटहाउस में इमेज ऑप्टिमाइज़ेशन से जुड़े कई ऑडिट शामिल हैं. इनसे आपको यह समझने में मदद मिलती है कि आपकी इमेज को बेहतर तरीके से कंप्रेस किया जा सकता है, उनका साइज़ बदला जा सकता है या उन्हें बेहतर इमेज फ़ॉर्मैट में डिलीवर किया जा सकता है.
आपको ऐनी सुलिवन का एलसीपी बुकमार्क भी मिल सकता है. इससे सिर्फ़ एक क्लिक में लाल रेक्टैंगल के ज़रिए, एलसीपी एलिमेंट को आसानी से पहचाना जा सकता है.
एलसीपी को बेहतर बनाने के लिए, देर से मिली इमेज को पहले से लोड करें
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय को बेहतर बनाने के लिए, अगर ब्राउज़र को सबसे पहले हीरो इमेज का पता चलता है, तो इमेज को पहले से लोड करें. इमेज के खोजे जाने से पहले, JavaScript बंडल को लोड करने की ज़रूरत होने पर देर से खोजा जा सकता है.
एलसीपी इमेज को पहले से लोड करने के बारे में, हमसे कुछ सामान्य सवाल पूछे जाते हैं. ये सवाल भी छोटे स्तर पर कवर किए जा सकते हैं.
क्या रिस्पॉन्सिव इमेज को पहले से लोड किया जा सकता है? हां टैप करें.
मान लें कि हमारे पास एक रिस्पॉन्सिव हीरो इमेज है, जैसा कि नीचे srcset और sizes का इस्तेमाल करके बताया गया है:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
link एट्रिब्यूट में जोड़े गए imagesrcset और imagesizes एट्रिब्यूट की मदद से, हम
एक रिस्पॉन्सिव इमेज को पहले से लोड कर सकते हैं. इसके लिए, हम इमेज चुनने के उसी लॉजिक का इस्तेमाल करते हैं जिसका इस्तेमाल srcset और sizes करते हैं:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
अगर एलसीपी इमेज को सीएसएस बैकग्राउंड के ज़रिए तय किया जाता है, तो क्या ऑडिट में पेज को पहले से लोड करने के अवसरों को भी हाइलाइट किया जाएगा? हाँ।
अगर किसी इमेज को एलसीपी इमेज के तौर पर फ़्लैग किया गया है, भले ही वह सीएसएस बैकग्राउंड या <img> से हो, तो उसे तीन या उससे ज़्यादा वॉटरफ़ॉल डेप्थ ( वॉटरफ़ॉल डेप्थ) में खोजा जाता है.
ऑफ़स्क्रीन इमेज को लेज़ी लोड होने से रोकें और एलसीपी के लिए इसका इस्तेमाल न करें
उन ऑफ़स्क्रीन इमेज को लेज़ी-लोड किया जा सकता है जो शुरुआती उपयोगकर्ता अनुभव के लिए ज़रूरी नहीं हैं. यह ऐसी तकनीक है जो किसी इमेज को तब तक डाउनलोड होने से रोकती है, जब तक कोई उपयोगकर्ता उसके पास स्क्रोल नहीं करता. इससे अहम ऐसेट के लिए नेटवर्क का विवाद कम हो सकता है और कुछ मामलों में एलसीपी बेहतर हो सकती है. "ऑफ़स्क्रीन इमेज टालें" ऑडिट से आपको यहां मदद मिल सकती है:
पेज के ऊपरी हिस्से की ज़रूरी इमेज, जैसे कि सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय की इमेज, लेज़ी लोड नहीं होनी चाहिए. ऐसा करने से, एलसीपी इमेज लोड होने में देरी हो सकती है. अगर किसी एलसीपी इमेज को गलत तरीके से लेज़ी लोड किया जा रहा है, तो लाइटहाउस यह हाइलाइट करेगा: "सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय की सबसे बड़ी इमेज को लेज़ी तरीके से लोड किया गया था" ऑडिट की मदद से:
सीएलएस योगदान की पहचान करें
कुल लेआउट शिफ़्ट होने से विज़ुअल स्टेबिलिटी का पता चलता है. यह मापता है कि किसी पेज का कॉन्टेंट, विज़ुअल तौर पर कितना बदलाव करता है. लाइटहाउस में सीएलएस को डीबग करने के लिए, "बड़े लेआउट शिफ़्ट से बचें" नाम का ऑडिट है.
यह ऑडिट, उन डीओएम एलिमेंट को हाइलाइट करता है जिनकी वजह से पेज में सबसे ज़्यादा बदलाव होते हैं. बाईं ओर मौजूद एलिमेंट कॉलम में, आपको इन डीओएम एलिमेंट की सूची दिखेगी. साथ ही, दाईं ओर उनके सभी सीएलएस योगदान दिखेंगे.
लाइटहाउस एलिमेंट के स्क्रीनशॉट की नई सुविधा की मदद से, हम ऑडिट में नोट किए गए मुख्य एलिमेंट की विज़ुअल झलक देख सकते हैं. साथ ही, बेहतर व्यू पाने के लिए क्लिक-टू-ज़ूम कर सकते हैं:
पोस्ट-लोड सीएलएस के लिए, रेक्टैंगल की मदद से लगातार विज़ुअलाइज़ करने में वैल्यू हो सकती है. इन एलिमेंट की वजह से, सीएलएस में सबसे ज़्यादा योगदान होता है. यह सुविधा, आपको तीसरे पक्ष के टूल में मिल सकती है. जैसे, SpeedCurve का Core Web Vitals डैशबोर्ड और मुझे Defa स्वाइप का Layout Shift GIF जनरेटर इस्तेमाल करना पसंद है.
पूरी साइट पर लेआउट शिफ़्ट से जुड़ी समस्याओं के बारे में जानने के लिए, मुझे Search Console की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट से काफ़ी फ़ायदा मिलता है. इससे मुझे अपनी साइट के उन पेजों के बारे में पता चलता है जिनका सीएलएस ज़्यादा है (इस मामले में, मुझे यह जानने में मदद मिलती है कि टेंप्लेट के कौनसे हिस्सों पर ज़्यादा समय बिताना है):
बिना डाइमेंशन वाली इमेज से सीएलएस की पहचान करना
बिना डाइमेंशन वाली इमेज से लेआउट शिफ़्ट होने की सीमा तय की जा सकती है. इसके लिए, इमेज और वीडियो एलिमेंट में चौड़ाई और ऊंचाई के साइज़ एट्रिब्यूट शामिल करें. इस तरीके से यह पक्का होता है कि इमेज लोड होने के दौरान ब्राउज़र, दस्तावेज़ में सही जगह तय कर सके.
इमेज के डाइमेंशन और आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के बारे में अच्छी तरह से लिखने के लिए, इमेज की लंबाई और चौड़ाई सेट करना ज़रूरी है देखें.
विज्ञापनों से सीएलएस की पहचान करना
पब्लिशर के लिए विज्ञापन के तौर पर लाइटहाउस से, आपको अपने पेज पर विज्ञापनों के लोड होने के अनुभव को बेहतर बनाने के अवसर मिलते हैं. इनमें लेआउट शिफ़्ट के योगदान और लंबे टास्क शामिल हैं. इनकी मदद से, यह पता लगाया जा सकता है कि उपयोगकर्ता आपका पेज कितनी जल्दी इस्तेमाल कर सकते हैं. Lighthouse में, आप इसे कम्यूनिटी प्लगिन की मदद से चालू कर सकते हैं.
याद रखें कि वेब पर लेआउट शिफ़्ट में योगदान देने वाले सबसे बड़े लोगों में विज्ञापन शामिल हैं. ज़रूरी है कि:
- व्यूपोर्ट के सबसे ऊपर, न दिखने वाले विज्ञापनों को लगाते समय सावधानी बरतें
- विज्ञापन स्लॉट के लिए सबसे बड़े संभावित साइज़ को रिज़र्व करके शिफ़्ट खत्म करें
कंपोज़िट नहीं किए गए ऐनिमेशन से बचें
अगर JavaScript से जुड़े बहुत ज़्यादा टास्क, मुख्य थ्रेड को व्यस्त रख रहे हों, तो कंपोज़िट नहीं किए गए ऐनिमेशन लोअर-एंड डिवाइसों पर खुद को जैकी के तौर पर दिखा सकते हैं. ऐसे ऐनिमेशन, लेआउट में बदलाव कर सकते हैं.
अगर Chrome को पता चलता है कि किसी ऐनिमेशन को कंपोज़ नहीं किया जा सकता, तो वह उसे DevTools ट्रेस करने के टूल में रिपोर्ट कर देता है. Lighthouse से रीडिंग, इस बात की जानकारी मिलती है कि ऐनिमेशन वाले किन एलिमेंट को कंपोज़िट नहीं किया जा सका और इसकी वजह क्या है. इन्हें कंपोज़िट नहीं किए गए ऐनिमेशन से बचें ऑडिट में देखा जा सकता है.
पहले इनपुट में देरी / कुल ब्लॉक करने का समय / लंबे टास्क डीबग करना
फ़र्स्ट इनपुट में उस समय को मापा जाता है, जब उपयोगकर्ता पहली बार किसी पेज के साथ इंटरैक्ट करता है (जैसे, जब वे किसी लिंक पर क्लिक करते हैं, किसी बटन पर टैप करते हैं या कस्टम, JavaScript से चलने वाले कंट्रोल का इस्तेमाल करते हैं). यह समय ब्राउज़र के उस इंटरैक्शन के जवाब में इवेंट हैंडलर की प्रोसेस शुरू करने में लगने वाले समय को मापा जाता है. लंबा JavaScript टास्क, इस मेट्रिक और इस मेट्रिक की प्रॉक्सी, टोटल ब्लॉकिंग टाइम पर असर डाल सकता है.
लाइटहाउस में मुख्य थ्रेड के लंबे टास्क से बचें वाला ऑडिट शामिल है. इसमें, मुख्य थ्रेड पर सबसे लंबे टास्क की सूची शामिल होती है. इससे, इनपुट में देरी के लिए, सबसे खराब योगदान देने वालों की पहचान करने में मदद मिल सकती है. बाएं कॉलम में, हम उन स्क्रिप्ट का यूआरएल देख सकते हैं जो मुख्य थ्रेड के लंबे टास्क के लिए ज़िम्मेदार हैं.
दाईं ओर, हम इन टास्क में लगने वाला कुल समय देख सकते हैं. आपको याद दिला दें कि लंबे टास्क ऐसे होते हैं जो 50 मिलीसेकंड से ज़्यादा समय तक लागू होते हैं. यह मुख्य थ्रेड को तब तक ब्लॉक करता है, जब तक फ़्रेम रेट या इनपुट लेटेंसी पर असर नहीं पड़ता.
अगर निगरानी के लिए तीसरे पक्ष की सेवाओं को चुना जाता है, तो मुझे मेन-थ्रेड एक्ज़ीक्यूशन टाइमलाइन का विज़ुअल कैलिबर भी पसंद आएगा. इससे हमें इन खर्चों को विज़ुअलाइज़ करने में मदद मिलेगी. इससे माता-पिता और बच्चे, दोनों के उन टास्क को हाइलाइट किया जाता है जो लंबे समय तक चलने वाले टास्क में योगदान देते हैं. इससे इंटरैक्टिविटी पर असर पड़ता है.
लाइटहाउस में विज्ञापन के असर से पहले/बाद में देखने के लिए, नेटवर्क के अनुरोध ब्लॉक करें
Chrome DevTools, नेटवर्क के अनुरोधों को ब्लॉक करने की सुविधा देता है. इससे अलग-अलग रिसॉर्स के हटाए जाने या उपलब्ध न होने का असर देखा जा सकता है. इससे टोटल ब्लॉकिंग टाइम (टीबीटी) और इंटरैक्टिव में लगने वाले समय जैसी मेट्रिक की अलग-अलग स्क्रिप्ट (जैसे कि तीसरे पक्ष के एम्बेड या ट्रैकर) की लागत को समझने में मदद मिल सकती है.
नेटवर्क के अनुरोध को ब्लॉक करने की सुविधा, लाइटहाउस के साथ भी काम करती है! आइए, किसी साइट की लाइटहाउस रिपोर्ट पर नज़र डालते हैं. परफ़ॉर्मेंस स्कोर 63/100 है और इसका टीबीटी 400 मि॰से॰ है. कोड की जांच करने पर, हमें पता चला है कि यह साइट Chrome में एक इंटरसेक्शन ऑब्ज़र्वर पॉलीफ़िल लोड करती है, जो ज़रूरी नहीं है. चलिए, इसे ब्लॉक करते हैं!
हम DevTools नेटवर्क पैनल में, स्क्रिप्ट पर राइट क्लिक करके उसे ब्लॉक करने के लिए Block Request URL पर क्लिक कर सकते हैं. यहां हम ऐसा इंटरसेक्शन पर्यवेक्षक पॉलीफ़िल के लिए करेंगे.
इसके बाद, हम लाइटहाउस को फिर से चला सकते हैं. इस बार हम देख सकते हैं कि हमारा परफ़ॉर्मेंस स्कोर बेहतर (70/100) हो गया है, क्योंकि टोटल ब्लॉकिंग टाइम (400 मि॰से॰ => 300 मि॰से॰) है.
तीसरे पक्ष के महंगे एम्बेड को फ़साड से बदलें
पेजों पर वीडियो, सोशल मीडिया पोस्ट या विजेट एम्बेड करने के लिए, तीसरे पक्ष के संसाधनों का इस्तेमाल करना आम बात है. डिफ़ॉल्ट रूप से, ज़्यादातर एम्बेड तुरंत लोड हो जाते हैं और बहुत ज़्यादा पेलोड हो सकते हैं. इससे उपयोगकर्ता अनुभव पर बुरा असर पड़ सकता है. अगर तीसरा-पक्ष ज़रूरी न कर रहा हो, तो यह काम का नहीं होता (उदाहरण के लिए, अगर उपयोगकर्ता को उसे देखने से पहले स्क्रोल करना पड़ता है).
ऐसे विजेट की परफ़ॉर्मेंस को बेहतर बनाने का एक पैटर्न यह है कि उपयोगकर्ता के इंटरैक्शन के दौरान उन्हें लेज़ी-लोड करें. ऐसा करने के लिए, विजेट (सामने का हिस्सा) की लाइटवेट झलक को रेंडर किया जा सकता है. साथ ही, पूरा वर्शन सिर्फ़ तब लोड किया जाता है, जब उपयोगकर्ता इससे इंटरैक्ट करे. लाइटहाउस को एक ऑडिट दिया गया है, जो तीसरे पक्ष के संसाधनों के सुझाव देगा. इन संसाधनों को आगे के हिस्से के साथ लेज़ी लोड किया जा सकता है. जैसे, YouTube वीडियो एम्बेड करना.
आपको याद दिला दें कि लाइटहाउस तीसरे पक्ष के ऐसे कोड को हाइलाइट करेगा जो 250 मि॰से॰ से ज़्यादा समय के लिए मुख्य थ्रेड को ब्लॉक करता है. इससे तीसरे पक्ष की सभी तरह की स्क्रिप्ट दिख सकती हैं. इनमें, Google की स्क्रिप्ट भी शामिल हैं. अगर किसी स्क्रिप्ट को देखने के लिए स्क्रोल करने की ज़रूरत पड़ती है, तो उस स्क्रिप्ट को समय-समय पर लोड होने में देरी या देर से लोड होने में दिक्कत आ सकती है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी से कहीं ज़्यादा
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को हाइलाइट करने के अलावा, लाइटहाउस और PageSpeed Insights के हाल ही के वर्शन में ज़रूरी सलाह दी जाती है, ताकि सोर्स मैप चालू करने पर, JavaScript से भारी वेब ऐप्लिकेशन के लोड होने में आसानी हो.
इनमें आपके पेज में JavaScript की लागत को कम करने के लिए, लगातार बढ़ने वाले ऑडिट शामिल हैं. जैसे, पॉलीफ़िल और डुप्लीकेट पर कम भरोसा करना, शायद उपयोगकर्ता अनुभव के लिए ज़रूरी न हो.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले टूल के बारे में ज़्यादा जानकारी पाने के लिए, Lighthouse की टीम के Twitter खाते और DevTools में नया क्या है पर नज़र रखें.
Unस्प्लैश पर मर्सिडीज़ मेललिंग की हीरो इमेज.