Chrome के वेब टूल की मदद से, उपयोगकर्ता अनुभव को बेहतर बनाने के अवसर ढूंढना.
पब्लिश होने की तारीख: 11 मई, 2021
आज हम लाइटहाउस, PageSpeed, और DevTools में टूल की नई सुविधाओं के बारे में बताएंगे. इससे आपको यह पता लगाने में मदद मिलेगी कि वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी में आपकी साइट को कैसे बेहतर बनाया जा सकता है.
टूल के बारे में रीफ़्रेशर के तौर पर, Lighthouse एक ऐसा ओपन सोर्स टूल है जो अपने-आप काम करता है. इसका इस्तेमाल, वेब पेजों की क्वालिटी को बेहतर बनाने के लिए किया जाता है. यह टूल, डीबगिंग टूल के Chrome DevTools सुइट में मौजूद होता है. इसे किसी भी वेब पेज पर चलाया जा सकता है, चाहे वह सार्वजनिक हो या पुष्टि की ज़रूरत हो. Lighthouse को PageSpeed Insights, CI, और WebPageTest में भी देखा जा सकता है.
Lighthouse 7.x में एलिमेंट के स्क्रीनशॉट जैसी नई सुविधाएं शामिल हैं.इनकी मदद से, यूज़र-एक्सपीरियंस मेट्रिक पर असर डालने वाले यूज़र इंटरफ़ेस (यूआई) के हिस्सों की आसानी से जांच की जा सकती है. उदाहरण के लिए, लेआउट में बदलाव करने में कौनसे नोड योगदान दे रहे हैं.
हमने PageSpeed Insights पर एलिमेंट के स्क्रीनशॉट की सुविधा भी जोड़ी है. इससे, पेजों की परफ़ॉर्मेंस की एक बार की जाने वाली जांच में, समस्याओं का पता लगाना आसान हो जाता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करना
Lighthouse, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को सिंथेटिक तरीके से मेज़र कर सकता है. इन मेट्रिक में सबसे बड़े कॉन्टेंटफ़ुल पेंट, कुल लेआउट शिफ़्ट, और ब्लॉक करने में लगने वाला कुल समय (फ़र्स्ट इनपुट डिले के लिए लैब प्रॉक्सी) शामिल हैं. इन मेट्रिक से पता चलता है कि पेज लोड हुआ है या नहीं. साथ ही, इससे लेआउट की स्थिरता और इंटरैक्शन के लिए उसके तैयार होने का पता चलता है. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के आने वाले समय में हाइलाइट की गई अन्य मेट्रिक भी यहां मौजूद हैं. जैसे, फ़र्स्ट कॉन्टेंटफ़ुल पेंट.
Lighthouse रिपोर्ट के "मेट्रिक" सेक्शन में, इन मेट्रिक के लैब वर्शन शामिल होते हैं. इसका इस्तेमाल, उपयोगकर्ता अनुभव के किन पहलुओं पर ध्यान देने की ज़रूरत है, इसकी खास जानकारी के तौर पर किया जा सकता है.
फ़ील्ड मेट्रिक, जैसे कि Chrome उपयोगकर्ता अनुभव की रिपोर्ट या RUM में मौजूद मेट्रिक में यह सीमित नहीं होती. साथ ही, ये लैब डेटा के लिए अहम होती हैं, क्योंकि इनसे असल उपयोगकर्ताओं के अनुभव के बारे में पता चलता है. फ़ील्ड डेटा यह नहीं बता सकता कि आपको लैब में डाइग्नोस्टिक्स के बारे में किस तरह की जानकारी मिलेगी, इसलिए दोनों को साथ में इस्तेमाल करना.
जानें कि वेबसाइट की परफ़ॉर्मेंस की मेट्रिक में कहां सुधार किया जा सकता है
सबसे बड़े कॉन्टेंटफ़ुल पेंट एलिमेंट की पहचान करना
एलसीपी, पेज लोड होने के अनुभव को मेज़र करता है. यह मेट्रिक, पेज लोड होने के दौरान उस समय को मार्क करती है जब मुख्य या "सबसे बड़ा" कॉन्टेंट लोड हो जाता है और उपयोगकर्ता को दिखने लगता है.
Lighthouse में "सबसे बड़े कॉन्टेंटफ़ुल पेंट एलिमेंट" का ऑडिट होता है. इससे पता चलता है कि सबसे बड़ा कॉन्टेंटफ़ुल पेंट एलिमेंट कौनसा है. एलिमेंट पर कर्सर घुमाने से, वह मुख्य ब्राउज़र विंडो में हाइलाइट हो जाएगा.
अगर यह एलिमेंट कोई इमेज है, तो यह जानकारी एक अहम संकेत है. इससे आपको इस इमेज को लोड होने में लगने वाले समय को ऑप्टिमाइज़ करने में मदद मिल सकती है. Lighthouse में इमेज ऑप्टिमाइज़ेशन के कई ऑडिट शामिल हैं. इनसे आपको यह समझने में मदद मिलती है कि आपकी इमेज को बेहतर तरीके से कंप्रेस किया जा सकता है या नहीं, उनका साइज़ बदला जा सकता है या नहीं या उन्हें बेहतर आधुनिक इमेज फ़ॉर्मैट में डिलीवर किया जा सकता है या नहीं.
आपको ऐनी सुलिवन का एलसीपी बुकमार्क भी मिल सकता है. इससे सिर्फ़ एक क्लिक में लाल रेक्टैंगल के ज़रिए, एलसीपी एलिमेंट को आसानी से पहचाना जा सकता है.
एलसीपी को बेहतर बनाने के लिए, देर से मिली इमेज को पहले से लोड करना
सबसे बड़े कॉन्टेंटफ़ुल पेंट को बेहतर बनाने के लिए, अपनी मुख्य हीरो इमेज को पहले से लोड करें. ऐसा तब करें, जब ब्राउज़र उन्हें देर से खोज रहा हो. अगर इमेज को खोजा जा सके, इसके लिए किसी 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>
के ज़रिए, एलसीपी इमेज के तौर पर फ़्लैग की गई कोई भी इमेज, वॉटरफ़ॉल डेप्थ तीन या उससे ज़्यादा होने पर, कैंडिडेट के तौर पर चुनी जाती है.
ऑफ़स्क्रीन इमेज को लेज़ी लोड करना और एलसीपी के लिए ऐसा न करना
शुरुआती उपयोगकर्ता अनुभव के लिए ज़रूरी नहीं होने वाली ऑफ़स्क्रीन इमेज को लेज़ी-लोड किया जा सकता है. यह ऐसी तकनीक है जो किसी इमेज को तब तक डाउनलोड नहीं करती, जब तक कोई उपयोगकर्ता उसके पास स्क्रोल नहीं करता. इससे अहम ऐसेट के लिए नेटवर्क का विवाद कम हो सकता है और कुछ मामलों में एलसीपी बेहतर हो सकती है. "ऑफ़स्क्रीन इमेज को कुछ समय के लिए रोकें" ऑडिट से यहां मदद मिल सकती है:
पेज के ऊपरी हिस्से की ज़रूरी इमेज, जैसे कि सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय की इमेज, लेज़ी लोड नहीं होनी चाहिए. ऐसा करने से, एलसीपी इमेज लोड होने में देरी हो सकती है. अगर किसी एलसीपी इमेज को गलत तरीके से लेज़ी लोड किया जा रहा है, तो लाइटहाउस यह हाइलाइट करेगा: "सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय की सबसे बड़ी इमेज को लेज़ी तरीके से लोड किया गया था" ऑडिट की मदद से:
सीएलएस में योगदान की पहचान करना
लेआउट शिफ़्ट होने में लगने वाला समय, विज़ुअल स्टैबिलिटी को मेज़र करता है. इससे यह पता चलता है कि किसी पेज का कॉन्टेंट, विज़ुअल तौर पर कितना बदलाव करता है. लाइटहाउस में सीएलएस को डीबग करने के लिए, "बड़े लेआउट शिफ़्ट से बचें" नाम का ऑडिट है.
इस ऑडिट में, पेज के शिफ़्ट में सबसे ज़्यादा योगदान देने वाले डीओएम एलिमेंट हाइलाइट किए जाते हैं. बाईं ओर मौजूद एलिमेंट कॉलम में, आपको इन DOM एलिमेंट की सूची दिखेगी. साथ ही, दाईं ओर उनके सीएलएस में योगदान दिखेगा.
लाइटहाउस एलिमेंट के स्क्रीनशॉट की नई सुविधा की मदद से, हम ऑडिट में नोट किए गए मुख्य एलिमेंट की विज़ुअल झलक देख सकते हैं. साथ ही, बेहतर व्यू पाने के लिए क्लिक-टू-ज़ूम कर सकते हैं:
पोस्ट-लोड सीएलएस के लिए, उन एलिमेंट को रेक्टैंगल के साथ लगातार विज़ुअलाइज़ करने से फ़ायदा हो सकता है जिनकी वजह से सीएलएस में सबसे ज़्यादा योगदान मिला है. यह सुविधा, आपको तीसरे पक्ष के टूल में मिलेगी. जैसे, SpeedCurve का Core Web Vitals डैशबोर्ड और मुझे Defa स्वाइप का Layout Shift GIF जनरेटर इस्तेमाल करना पसंद है. ये टूल इन चीज़ों के लिए काम करते हैं:
लेआउट शिफ़्ट से जुड़ी समस्याओं को पूरी साइट के लिए देखने के लिए, मुझे Search Console की वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली रिपोर्ट से काफ़ी मदद मिलती है. इससे मुझे अपनी साइट पर उन पेजों के बारे में पता चलता है जिनका सीएलएस बहुत ज़्यादा है. इस मामले में, मुझे यह पता चलता है कि मुझे किन टेंप्लेट के हिस्सों पर अपना समय देना है:
डाइमेंशन के बिना इमेज से सीएलएस की पहचान करना
डाइमेंशन के बिना इमेज की वजह से होने वाले कुल लेआउट शिफ़्ट को कम करने के लिए, अपनी इमेज और वीडियो एलिमेंट पर चौड़ाई और ऊंचाई के साइज़ एट्रिब्यूट शामिल करें. इस तरीके से यह पक्का किया जाता है कि इमेज लोड होने के दौरान, ब्राउज़र दस्तावेज़ में सही जगह तय कर सके.
इमेज के डाइमेंशन और आसपेक्ट रेशियो के बारे में सोचने के महत्व के बारे में अच्छी जानकारी पाने के लिए, इमेज की ऊंचाई और चौड़ाई सेट करना फिर से ज़रूरी है लेख पढ़ें.
विज्ञापनों से सीएलएस की पहचान करना
Lighthouse के लिए पब्लिशर विज्ञापन की मदद से, अपने पेज पर विज्ञापनों के लोड होने के अनुभव को बेहतर बनाने के अवसरों का पता लगाया जा सकता है. इसमें लेआउट में बदलाव और लंबे टास्क में योगदान शामिल है. इनसे यह तय हो सकता है कि उपयोगकर्ता आपके पेज को कितनी जल्दी इस्तेमाल कर पाएंगे. Lighthouse में, कम्यूनिटी प्लग इन की मदद से इसे चालू किया जा सकता है.
याद रखें कि वेब पर लेआउट में बदलाव होने की सबसे ज़्यादा वजह विज्ञापन होते हैं. ज़रूरी है कि:
- व्यूपोर्ट के सबसे ऊपर, नॉन-स्टिकी विज्ञापनों को प्लेस करते समय सावधानी बरतें
- विज्ञापन स्लॉट के लिए ज़्यादा से ज़्यादा साइज़ रिज़र्व करके, विज्ञापनों के साइज़ में होने वाले बदलावों को रोकना
कंपोज़िट नहीं किए गए ऐनिमेशन से बचें
अगर JavaScript से जुड़े बहुत ज़्यादा टास्क, मुख्य थ्रेड को व्यस्त रख रहे हों, तो कंपोज़िट नहीं किए गए ऐनिमेशन लोअर-एंड डिवाइसों पर खुद को जैकी के तौर पर दिखा सकते हैं. ऐसे ऐनिमेशन, लेआउट में बदलाव कर सकते हैं.
अगर Chrome को पता चलता है कि किसी ऐनिमेशन को कॉम्पोज़ नहीं किया जा सका, तो वह इसकी शिकायत DevTools ट्रैस में करता है. Lighthouse इस ट्रैस को पढ़ता है और यह पता लगाता है कि ऐनिमेशन वाले किन एलिमेंट को कॉम्पोज़ नहीं किया गया और इसकी वजह क्या है. ये आपको बिना कंपोज किए गए ऐनिमेशन का इस्तेमाल न करने वाले ऑडिट में मिल सकते हैं.
पहले इनपुट में देरी / कुल ब्लॉक करने का समय / लंबे टास्क डीबग करना
फ़र्स्ट इनपुट मेट्रिक, उपयोगकर्ता के किसी पेज से इंटरैक्ट करने (जैसे, किसी लिंक पर क्लिक करने, बटन पर टैप करने या पसंद के मुताबिक JavaScript से चलने वाले कंट्रोल का इस्तेमाल करने) से लेकर, ब्राउज़र के उस इंटरैक्शन के जवाब में इवेंट हैंडलर को प्रोसेस करने में लगने वाले समय को मेज़र करती है. लंबे JavaScript टास्क से, इस मेट्रिक और इस मेट्रिक के प्रॉक्सी, टोटल ब्लॉकिंग टाइम पर असर पड़ सकता है.
लाइटहाउस में मुख्य थ्रेड के लंबे टास्क से बचें वाला ऑडिट शामिल है. इसमें, मुख्य थ्रेड पर सबसे लंबे टास्क की सूची शामिल होती है. इससे, इनपुट में देरी के लिए, सबसे खराब योगदान देने वालों की पहचान करने में मदद मिल सकती है. बाएं कॉलम में, मुख्य थ्रेड के लंबे टास्क के लिए ज़िम्मेदार स्क्रिप्ट के यूआरएल देखे जा सकते हैं.
दाईं ओर, इन टास्क की अवधि देखी जा सकती है. आपको याद दिला दें कि लंबे टास्क ऐसे होते हैं जो 50 मिलीसेकंड से ज़्यादा समय तक चलते हैं. यह मुख्य थ्रेड को तब तक ब्लॉक करता है, जब तक फ़्रेम रेट या इनपुट लेटेंसी पर असर नहीं पड़ता.
अगर निगरानी के लिए तीसरे पक्ष की सेवाओं को चुना जाता है, तो मुझे मेन-थ्रेड एक्ज़ीक्यूशन टाइमलाइन का विज़ुअल कैलिबर भी पसंद आएगा. इससे हमें इन खर्चों को विज़ुअलाइज़ करने में मदद मिलेगी. इससे पैरंट और बच्चे, दोनों के उन टास्क को हाइलाइट किया जाता है जो लंबे समय तक चलने वाले टास्क में योगदान देते हैं. इससे बातचीत पर असर पड़ता है.
Lighthouse में, पहले/बाद के असर को देखने के लिए नेटवर्क अनुरोध ब्लॉक करना
Chrome DevTools में नेटवर्क अनुरोधों को ब्लॉक करने की सुविधा उपलब्ध है. इसकी मदद से, यह देखा जा सकता है कि किसी संसाधन को हटाने या उपलब्ध न होने का असर क्या होगा. इससे, अलग-अलग स्क्रिप्ट (जैसे, तीसरे पक्ष के एम्बेड या ट्रैकर) की वजह से, कुल ब्लॉकिंग समय (टीबीटी) और इंटरैक्टिव होने में लगने वाले समय जैसी मेट्रिक पर पड़ने वाले असर को समझने में मदद मिल सकती है.
नेटवर्क के अनुरोध को ब्लॉक करने वाला टूल, Lighthouse के साथ भी काम करता है! आइए, किसी साइट के लिए Lighthouse की रिपोर्ट पर एक नज़र डालते हैं. परफ़ॉर्मेंस स्कोर 63/100 है और टीबीटी 400 मिलीसेकंड है. कोड की जांच करने पर, हमें पता चला है कि यह साइट Chrome में Intersection Observer polyfill को लोड करती है. हालांकि, ऐसा करना ज़रूरी नहीं है. आइए, इसे ब्लॉक करें!
DevTools के नेटवर्क पैनल में किसी स्क्रिप्ट पर राइट क्लिक करके, उसे ब्लॉक करने के लिए Block Request URL
पर क्लिक किया जा सकता है. यहां हम ऐसा इंटरसेक्शन पर्यवेक्षक पॉलीफ़िल के लिए करेंगे.
इसके बाद, हम Lighthouse को फिर से चला सकते हैं. इस बार हम देख सकते हैं कि हमारा परफ़ॉर्मेंस स्कोर बेहतर (70/100) हो गया है, क्योंकि टोटल ब्लॉकिंग टाइम (400 मि॰से॰ => 300 मि॰से॰) है.
तीसरे पक्ष के महंगे एम्बेड को फ़ेसेड से बदलना
आम तौर पर, पेजों में वीडियो, सोशल मीडिया पोस्ट या विजेट एम्बेड करने के लिए, तीसरे पक्ष के संसाधनों का इस्तेमाल किया जाता है. डिफ़ॉल्ट रूप से, ज़्यादातर एम्बेड तुरंत लोड हो जाते हैं. साथ ही, इनमें ऐसे पेलोड हो सकते हैं जिनकी कीमत ज़्यादा होती है और जिनसे उपयोगकर्ता अनुभव पर बुरा असर पड़ता है. अगर तीसरे पक्ष की जानकारी ज़रूरी नहीं है, तो यह बेकार है. उदाहरण के लिए, अगर उपयोगकर्ता को इसे देखने से पहले स्क्रोल करना पड़ता है.
इस तरह के विजेट की परफ़ॉर्मेंस को बेहतर बनाने के लिए, उपयोगकर्ता के इंटरैक्शन पर उन्हें धीरे-धीरे लोड करें. ऐसा करने के लिए, विजेट की झलक (फ़ेसडे) को कम डेटा वाले वर्शन में रेंडर किया जा सकता है. साथ ही, उपयोगकर्ता के इंटरैक्ट करने पर ही पूरा वर्शन लोड किया जा सकता है. Lighthouse में एक ऑडिट है, जो तीसरे पक्ष के ऐसे संसाधनों के सुझाव देगा जिन्हें फ़ेसेड की मदद से धीमी रफ़्तार से लोड किया जा सकता है. जैसे, YouTube वीडियो को एम्बेड करना.
आपको याद दिला दें कि Lighthouse, तीसरे पक्ष के उस कोड को हाइलाइट करेगा जो मुख्य थ्रेड को 250 एमएस से ज़्यादा समय तक ब्लॉक करता है. इससे तीसरे पक्ष की सभी तरह की स्क्रिप्ट दिख सकती हैं. इनमें, Google की स्क्रिप्ट भी शामिल हैं. अगर किसी स्क्रिप्ट को देखने के लिए स्क्रोल करने की ज़रूरत पड़ती है, तो उस स्क्रिप्ट को समय-समय पर लोड होने में देरी या देर से लोड होने में दिक्कत आ सकती है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी से कहीं ज़्यादा
Lighthouse और PageSpeed insights के नए वर्शन, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को हाइलाइट करने के साथ-साथ, सटीक दिशा-निर्देश भी देते हैं. इन दिशा-निर्देशों का पालन करके, सोर्स मैप चालू होने पर, ज़्यादा JavaScript वाले वेब ऐप्लिकेशन को तेज़ी से लोड किया जा सकता है.
इनमें आपके पेज में JavaScript की लागत को कम करने के लिए, ऑडिट का बढ़ता कलेक्शन शामिल है. जैसे, उपयोगकर्ता अनुभव के लिए ज़रूरी न होने वाले पॉलीफ़िल और डुप्लीकेट पर निर्भरता को कम करना.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले टूल के बारे में ज़्यादा जानकारी पाने के लिए, Lighthouse की टीम के Twitter खाते और DevTools में नया क्या है पर नज़र रखें.
Unस्प्लैश पर मर्सिडीज़ मेललिंग की हीरो इमेज.