Chrome के वेब टूल की मदद से, उपयोगकर्ता अनुभव को बेहतर बनाने के अवसर ढूंढना.
पब्लिश होने की तारीख: 11 मई, 2021
आज हम लाइटहाउस, PageSpeed, और DevTools में टूल की नई सुविधाओं के बारे में बताएंगे. इससे आपको यह पता लगाने में मदद मिलेगी कि वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी में आपकी साइट को कैसे बेहतर बनाया जा सकता है.
टूल के बारे में रीफ़्रेशर के तौर पर, Lighthouse एक ऐसा ओपन सोर्स टूल है जो अपने-आप काम करता है. इसका इस्तेमाल, वेब पेजों की क्वालिटी को बेहतर बनाने के लिए किया जाता है. यह टूल, डीबगिंग टूल के Chrome DevTools सुइट में मौजूद होता है. इसे किसी भी वेब पेज पर चलाया जा सकता है, चाहे वह सार्वजनिक हो या पुष्टि की ज़रूरत हो. Lighthouse को PageSpeed Insights, CI, और WebPageTest में भी देखा जा सकता है.
Lighthouse 7.x में एलिमेंट के स्क्रीनशॉट जैसी नई सुविधाएं शामिल हैं.इनकी मदद से, यूज़र-एक्सपीरियंस मेट्रिक पर असर डालने वाले यूज़र इंटरफ़ेस (यूआई) के हिस्सों की आसानी से जांच की जा सकती है. उदाहरण के लिए, लेआउट में बदलाव करने में कौनसे नोड योगदान दे रहे हैं.
हमने PageSpeed Insights पर एलिमेंट के स्क्रीनशॉट की सुविधा भी जोड़ी है. इससे, पेजों की परफ़ॉर्मेंस की एक बार की जाने वाली जांच में, समस्याओं को आसानी से पहचाना जा सकता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करना
Lighthouse, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को सिंथेटिक तरीके से मेज़र कर सकता है. इन मेट्रिक में सबसे बड़े कॉन्टेंटफ़ुल पेंट, कुल लेआउट शिफ़्ट, और ब्लॉक करने में लगने वाला कुल समय (फ़र्स्ट इनपुट डिले के लिए लैब प्रॉक्सी) शामिल है. इन मेट्रिक से, लोड होने में लगने वाला समय, लेआउट की स्थिरता, और इंटरैक्शन के लिए तैयार होने की जानकारी मिलती है. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के आने वाले समय में हाइलाइट की गई अन्य मेट्रिक भी यहां मौजूद हैं. जैसे, फ़र्स्ट कॉन्टेंटफ़ुल पेंट.
Lighthouse रिपोर्ट के "मेट्रिक" सेक्शन में, इन मेट्रिक के लैब वर्शन शामिल होते हैं. इसका इस्तेमाल, उपयोगकर्ता अनुभव के उन पहलुओं की खास जानकारी के तौर पर किया जा सकता है जिन पर आपको ध्यान देने की ज़रूरत है.
फ़ील्ड मेट्रिक, जैसे कि Chrome उपयोगकर्ता अनुभव की रिपोर्ट या RUM में मौजूद मेट्रिक में यह सीमित नहीं होती. साथ ही, ये लैब डेटा के लिए अहम होती हैं, क्योंकि इनसे असल उपयोगकर्ताओं के अनुभव के बारे में पता चलता है. फ़ील्ड डेटा से, गड़बड़ी की ऐसी जानकारी नहीं मिल सकती जो लैब में मिलती है. इसलिए, दोनों एक-दूसरे के साथ काम करते हैं.
जानें कि वेबसाइट की परफ़ॉर्मेंस की मेट्रिक को कहां बेहतर बनाया जा सकता है
सबसे बड़े कॉन्टेंटफ़ुल पेंट एलिमेंट की पहचान करना
एलसीपी, पेज लोड होने के अनुभव को मेज़र करता है. यह मेट्रिक, पेज लोड होने के दौरान उस समय को मार्क करती है जब मुख्य या "सबसे बड़ा" कॉन्टेंट लोड हो जाता है और उपयोगकर्ता को दिखने लगता है.
Lighthouse में "सबसे बड़े कॉन्टेंटफ़ुल पेंट एलिमेंट" का ऑडिट होता है. इससे पता चलता है कि सबसे बड़ा कॉन्टेंटफ़ुल पेंट एलिमेंट कौनसा है. एलिमेंट पर कर्सर घुमाने से, वह मुख्य ब्राउज़र विंडो में हाइलाइट हो जाएगा.
अगर यह एलिमेंट कोई इमेज है, तो यह जानकारी एक अहम संकेत है. इससे आपको इस इमेज को लोड होने में लगने वाले समय को ऑप्टिमाइज़ करने में मदद मिल सकती है. Lighthouse में इमेज ऑप्टिमाइज़ेशन के कई ऑडिट शामिल होते हैं. इनसे आपको यह समझने में मदद मिलती है कि आपकी इमेज को बेहतर तरीके से कंप्रेस किया जा सकता है या नहीं, उनका साइज़ बदला जा सकता है या नहीं या उन्हें बेहतर आधुनिक इमेज फ़ॉर्मैट में डिलीवर किया जा सकता है या नहीं.
आपको Annie Sullivan का LCP Bookmarklet भी मददगार लग सकता है. इसकी मदद से, एक ही क्लिक में लाल रंग के रेक्टैंगल वाले LCP एलिमेंट की तुरंत पहचान की जा सकती है.
एलसीपी को बेहतर बनाने के लिए, बाद में खोजी गई इमेज को पहले से लोड करना
सबसे बड़े कॉन्टेंटफ़ुल पेंट को बेहतर बनाने के लिए, अगर ब्राउज़र को आपकी मुख्य हीरो इमेज देर से मिल रही हैं, तो उन्हें पहले से लोड करें. अगर इमेज को खोजा जा सके, इसके लिए किसी 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> के ज़रिए, एलसीपी इमेज के तौर पर फ़्लैग की गई कोई भी इमेज, वॉटरफ़ॉल डेप्थ तीन या उससे ज़्यादा होने पर, कैंडिडेट के तौर पर चुनी जाती है.
ऑफ़स्क्रीन इमेज को लेज़ी लोड करना और एलसीपी के लिए ऐसा न करना
शुरुआती उपयोगकर्ता अनुभव के लिए ज़रूरी नहीं होने वाली ऑफ़स्क्रीन इमेज को लेज़ी-लोड किया जा सकता है. यह एक ऐसी तकनीक है जो किसी इमेज को तब तक डाउनलोड नहीं करती, जब तक कि उपयोगकर्ता उस पर स्क्रोल नहीं करता. इससे, ज़रूरी एसेट के लिए नेटवर्क कनेक्शन का इस्तेमाल कम हो सकता है और कुछ मामलों में एलसीपी को बेहतर बनाया जा सकता है. "ऑफ़स्क्रीन इमेज को कुछ समय के लिए रोकें" ऑडिट से यहां मदद मिल सकती है:
पेज के ऊपरी हिस्से पर मौजूद ज़रूरी इमेज, जैसे कि सबसे बड़े कॉन्टेंटफ़ुल पेंट वाली इमेज को लेज़ी लोड नहीं किया जाना चाहिए. ऐसा करने से, एलसीपी इमेज लोड होने में देरी हो सकती है. अगर एलसीपी इमेज को "सबसे बड़े कॉन्टेंटफ़ुल पेंट वाली इमेज को लेज़ी तरीके से लोड किया गया" ऑडिट के ज़रिए गलत तरीके से लेज़ी-लोड किया जा रहा है, तो Lighthouse उसे हाइलाइट करेगा:
सीएलएस में योगदान की पहचान करना
लेआउट शिफ़्ट होने में लगने वाला समय, विज़ुअल स्टैबिलिटी को मेज़र करता है. इससे यह पता चलता है कि किसी पेज का कॉन्टेंट, विज़ुअल तौर पर कितना शिफ़्ट होता है. Lighthouse में सीएलएस को डीबग करने के लिए एक ऑडिट है, जिसे "बड़े लेआउट शिफ़्ट से बचें" कहा जाता है.
इस ऑडिट में, पेज के शिफ़्ट में सबसे ज़्यादा योगदान देने वाले डीओएम एलिमेंट हाइलाइट किए जाते हैं. बाईं ओर मौजूद एलिमेंट कॉलम में, आपको इन DOM एलिमेंट की सूची दिखेगी. साथ ही, दाईं ओर उनके सीएलएस में योगदान दिखेगा.
Lighthouse के एलिमेंट के स्क्रीनशॉट की नई सुविधा की मदद से, हम दोनों ही ऑडिट में बताए गए मुख्य एलिमेंट की विज़ुअल झलक देख सकते हैं. साथ ही, बेहतर तरीके से देखने के लिए, क्लिक करके ज़ूम भी कर सकते हैं:
पोस्ट-लोड सीएलएस के लिए, उन एलिमेंट को रेक्टैंगल के साथ लगातार विज़ुअलाइज़ करने से फ़ायदा हो सकता है जिनकी वजह से सीएलएस में सबसे ज़्यादा योगदान मिला. यह सुविधा, तीसरे पक्ष के टूल में मिलेगी. जैसे, SpeedCurve का वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला डैशबोर्ड. मुझे Defaced के लेआउट शिफ़्ट जीआईएफ़ जनरेटर का इस्तेमाल इन कामों के लिए करना पसंद है:
लेआउट शिफ़्ट से जुड़ी समस्याओं को पूरी साइट के लिए देखने के लिए, मुझे Search Console की वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली रिपोर्ट से काफ़ी मदद मिलती है. इससे मुझे अपनी साइट पर उन पेजों के बारे में पता चलता है जिनका सीएलएस बहुत ज़्यादा है. इस मामले में, मुझे यह पता चलता है कि मुझे किन टेंप्लेट के पैरलल पर अपना समय देना है:
डाइमेंशन के बिना इमेज से सीएलएस की पहचान करना
डाइमेंशन के बिना इमेज की वजह से होने वाले कुल लेआउट शिफ़्ट को कम करने के लिए, अपनी इमेज और वीडियो एलिमेंट पर चौड़ाई और ऊंचाई के साइज़ एट्रिब्यूट शामिल करें. इस तरीके से यह पक्का किया जाता है कि इमेज लोड होने के दौरान, ब्राउज़र दस्तावेज़ में सही जगह तय कर सके.
इमेज के डाइमेंशन और आसपेक्ट रेशियो के बारे में सोचने के महत्व के बारे में अच्छी जानकारी पाने के लिए, इमेज की ऊंचाई और चौड़ाई सेट करना फिर से ज़रूरी है लेख पढ़ें.
विज्ञापनों से सीएलएस की पहचान करना
Lighthouse के लिए पब्लिशर विज्ञापन की मदद से, अपने पेज पर विज्ञापनों के लोड होने के अनुभव को बेहतर बनाने के अवसरों का पता लगाया जा सकता है. इसमें लेआउट में बदलाव और लंबे टास्क में योगदान शामिल है. इनसे यह तय हो सकता है कि उपयोगकर्ता आपके पेज को कितनी जल्दी इस्तेमाल कर पाएंगे. Lighthouse में, कम्यूनिटी प्लग इन की मदद से इसे चालू किया जा सकता है.
याद रखें कि वेब पर लेआउट में बदलाव होने की सबसे ज़्यादा वजह विज्ञापन होते हैं. यह ज़रूरी है कि:
- व्यूपोर्ट के सबसे ऊपर, नॉन-स्टिकी विज्ञापनों को प्लेस करते समय सावधानी बरतें
- विज्ञापन स्लॉट के लिए ज़्यादा से ज़्यादा साइज़ रिज़र्व करके, विज्ञापनों के साइज़ में होने वाले बदलावों को रोकना
कंपोज़िट नहीं किए गए ऐनिमेशन का इस्तेमाल न करना
अगर मुख्य थ्रेड पर ज़्यादा JavaScript टास्क चल रहे हैं, तो कंपोज़िट नहीं किए गए ऐनिमेशन, कम-एंड डिवाइसों पर खराब दिख सकते हैं. इस तरह के ऐनिमेशन से लेआउट में बदलाव हो सकते हैं.
अगर Chrome को पता चलता है कि किसी ऐनिमेशन को कॉम्पोज़ नहीं किया जा सका, तो वह इसकी शिकायत DevTools ट्रैक में करता है. Lighthouse इस ट्रैक को पढ़ता है और यह पता लगाता है कि ऐनिमेशन वाले किन एलिमेंट को कॉम्पोज़ नहीं किया गया और इसकी वजह क्या है. ये आपको बिना कंपोज किए गए ऐनिमेशन का इस्तेमाल न करने वाले ऑडिट में मिल सकते हैं.
फ़र्स्ट इनपुट डिले / टोटल ब्लॉकिंग टाइम / लंबे टास्क को डीबग करना
फ़र्स्ट इनपुट मेट्रिक, उपयोगकर्ता के किसी पेज से इंटरैक्ट करने (जैसे, किसी लिंक पर क्लिक करने, बटन पर टैप करने या पसंद के मुताबिक JavaScript से चलने वाले कंट्रोल का इस्तेमाल करने) से लेकर, ब्राउज़र के उस इंटरैक्शन के जवाब में इवेंट हैंडलर को प्रोसेस करने में लगने वाले समय को मेज़र करती है. लंबे JavaScript टास्क से, इस मेट्रिक और इस मेट्रिक के प्रॉक्सी, टोटल ब्लॉकिंग टाइम पर असर पड़ सकता है.
Lighthouse में मुख्य थ्रेड के लंबे टास्क से बचें ऑडिट शामिल है. इसमें मुख्य थ्रेड पर सबसे लंबे टास्क की सूची होती है. इससे इनपुट डिले में, सबसे ज़्यादा योगदान देने वालों की पहचान करने में मदद मिलती है. बाएं कॉलम में, मुख्य थ्रेड के लंबे टास्क के लिए ज़िम्मेदार स्क्रिप्ट के यूआरएल देखे जा सकते हैं.
दाईं ओर, इन टास्क की अवधि देखी जा सकती है. आपको याद दिला दें कि लॉन्ग टास्क ऐसे टास्क होते हैं जिन्हें पूरा होने में 50 मिलीसेकंड से ज़्यादा समय लगता है. इसे मुख्य थ्रेड को ज़रूरत से ज़्यादा समय तक ब्लॉक करने के तौर पर माना जाता है, ताकि फ़्रेम रेट या इनपुट लेटेंसी पर असर पड़े.
अगर निगरानी के लिए तीसरे पक्ष की सेवाओं का इस्तेमाल किया जा रहा है, तो मुझे Calibre में मौजूद मुख्य थ्रेड के टास्क को पूरा करने में लगने वाले समय की टाइमलाइन विज़ुअल भी काफ़ी पसंद है. इसकी मदद से, इंटरैक्टिविटी पर असर डालने वाले लंबे टास्क में योगदान देने वाले पैरंट और चाइल्ड, दोनों टास्क को हाइलाइट किया जाता है.
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 की लागत को कम करने के लिए, ऑडिट का बढ़ता कलेक्शन शामिल है. जैसे, उपयोगकर्ता अनुभव के लिए ज़रूरी न होने वाले पॉलीफ़िल और डुप्लीकेट पर निर्भरता को कम करना.
Core Web Vitals टूल के बारे में ज़्यादा जानने के लिए, Lighthouse टीम के ट्विटर खाते और DevTools में नया क्या है पर नज़र रखें.
Unsplash पर, Mercedes Mehling की हीरो इमेज.