Lighthouse का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की जानकारी को ऑप्टिमाइज़ करना

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> के ज़रिए एलसीपी इमेज के तौर पर फ़्लैग किया गया हो.

ऑफ़स्क्रीन इमेज को लेज़ी लोडिंग करना और एलसीपी के लिए इसे अनदेखा करना

जो ऑफ़स्क्रीन इमेज, उपयोगकर्ता के शुरुआती अनुभव के लिए ज़रूरी नहीं हैं वे लेज़ी लोड हो सकती हैं. इस तकनीक में किसी इमेज को तब तक डाउनलोड नहीं किया जाता, जब तक उपयोगकर्ता उसके आस-पास स्क्रोल नहीं करता. इससे अहम एसेट के लिए नेटवर्क पर विवाद कम हो सकता है. साथ ही, कुछ मामलों में एलसीपी बेहतर होता है. "ऑफ़स्क्रीन इमेज को डेफ़र करें" ऑडिट से यहां मदद मिल सकती है:

पेज के ऊपरी हिस्से पर मौजूद अहम इमेज, जैसे कि सबसे बड़े कॉन्टेंटफ़ुल पेंट वाली इमेज को लेज़ी लोड नहीं होना चाहिए. ऐसा करने से, एलसीपी इमेज लोड होने में देरी हो सकती है. अगर "सबसे बड़े कॉन्टेंटफ़ुल पेंट की इमेज लेज़ी लोडिंग" ऑडिट की मदद से, एलसीपी इमेज को गलत तरीके से लेज़ी लोड किया जा रहा है, तो लाइटहाउस यह हाइलाइट करेगा:

सीएलएस में योगदान की पहचान करना

कुल लेआउट शिफ़्ट, विज़ुअल स्टैबिलिटी का पैमाना है. यह इस बात का आकलन करता है कि पेज का कॉन्टेंट, विज़ुअल के साथ कितनी बार बदलता है. लाइटहाउस में सीएलएस को डीबग करने के लिए, "बड़े लेआउट शिफ़्ट से बचें" नाम का ऑडिट होता है.

इस ऑडिट में उन DOM एलिमेंट को हाइलाइट किया जाता है जिनका योगदान पेज के शिफ़्ट में सबसे ज़्यादा होता है. बाईं ओर मौजूद एलिमेंट कॉलम में, आपको इन DOM एलिमेंट की सूची और दाईं ओर, उनका कुल सीएलएस योगदान दिखेगा.

नई लाइटहाउस एलिमेंट स्क्रीनशॉट सुविधा की बदौलत, हम ऑडिट में बताए गए मुख्य एलिमेंट की विज़ुअल झलक और क्लिक-टू-ज़ूम, दोनों को बेहतर तरीके से देख सकते हैं:

लोड होने के बाद वाले सीएलएस के लिए, रेक्टैंगल के साथ हमेशा ऐसी वैल्यू हो सकती है जिन एलिमेंट का सीएलएस में सबसे ज़्यादा योगदान रहा. यह सुविधा आपको तीसरे पक्ष के टूल में मिलेगी, जैसे कि SpeedCurve के वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाला डैशबोर्ड और मुझे यह सुविधा Defaceds Layout Shift GIF जनरेटर में इस्तेमाल करना पसंद है:

लेआउट शिफ़्ट की समस्याओं को पूरी साइट पर देखने के लिए, मुझे Search Console की वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली रिपोर्ट से काफ़ी जानकारी मिलती है. इससे मुझे यह देखने में मदद मिलती है कि मेरी साइट पर किस तरह के पेज का सीएलएस ज़्यादा है (इससे यह समझने में मदद मिलेगी कि मुझे किन टेंप्लेट पर अपना समय खर्च करना है):

बिना डाइमेंशन वाली इमेज से सीएलएस की पहचान करना

बिना डाइमेंशन वाली इमेज की वजह से होने वाले कुल लेआउट शिफ़्ट को सीमित करने के लिए, अपनी इमेज और वीडियो एलिमेंट में चौड़ाई और ऊंचाई के साइज़ एट्रिब्यूट शामिल करें. इस तरीके से यह पक्का होता है कि इमेज लोड होने के दौरान ब्राउज़र, दस्तावेज़ में सही जगह तय कर सकता है.

इमेज के डाइमेंशन और आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) पर फिर से लिखने के लिए, इमेज की ऊंचाई और चौड़ाई सेट करना ज़रूरी है देखें.

विज्ञापनों से सीएलएस की पहचान करना

Lighthouse के लिए पब्लिशर विज्ञापन की मदद से, आपके पेज पर विज्ञापन लोड होने के अनुभव को बेहतर बनाने के अवसर ढूंढे जा सकते हैं. इसमें लेआउट शिफ़्ट और लंबे टास्क शामिल हैं, जिनसे यह पता चल सकता है कि उपयोगकर्ता कितनी जल्दी आपके पेज का इस्तेमाल कर पाएंगे. Lighthouse में, इसे कम्यूनिटी प्लगिन की मदद से चालू किया जा सकता है.

याद रखें कि वेब पर लेआउट शिफ़्ट में योगदान देने वाले सबसे बड़े विज्ञापनों में से एक हैं. यह करना ज़रूरी है:

• व्यूपोर्ट के ऊपरी हिस्से में नॉन-स्टिकी विज्ञापनों को डालते समय ध्यान रखें
• विज्ञापन स्लॉट के लिए सबसे बड़ा संभावित साइज़ रिज़र्व करके, शिफ़्ट खत्म करें

कंपोज़ नहीं किए गए ऐनिमेशन से बचें

अगर JavaScript के ज़्यादा टास्क की वजह से मुख्य थ्रेड व्यस्त रहती है, तो कंपोज़ नहीं किए गए ऐनिमेशन, लोअर-एंड डिवाइसों पर अपने-आप को परेशान कर सकते हैं. ऐसे ऐनिमेशन में लेआउट शिफ़्ट हो सकते हैं.

अगर Chrome को किसी ऐसे ऐनिमेशन का पता चलता है जिसे कंपोज़िट नहीं किया जा सकता है, तो वह उसे DevTools ट्रेस को रिपोर्ट करता है. इन्हें कंपोज़ नहीं किए गए ऐनिमेशन से बचें ऑडिट में देखा जा सकता है.

फ़र्स्ट इनपुट डिले डीबग करें / ब्लॉक करने का कुल समय / लंबे टास्क

पहला इनपुट, उपयोगकर्ता के किसी पेज से पहली बार इंटरैक्ट करने (जैसे कि जब वे किसी लिंक पर क्लिक करते हैं, बटन पर टैप करते हैं या कस्टम, JavaScript से चलने वाले कंट्रोल का इस्तेमाल करते हैं) से लेकर ब्राउज़र के उस इंटरैक्शन के जवाब में, इवेंट हैंडलर को प्रोसेस करना शुरू करने में लगने वाले समय को मापता है. लंबा JavaScript टास्क का असर इस मेट्रिक और इस मेट्रिक की प्रॉक्सी, टोटल ब्लॉकिंग टाइम पर हो सकता है.

लाइटहाउस में मुख्य थ्रेड के लंबे टास्क से बचें ऑडिट शामिल है. इसमें मुख्य थ्रेड पर मौजूद सबसे लंबे टास्क की सूची होती है. यह इनपुट देरी में सबसे खराब योगदान देने वालों की पहचान करने में मदद कर सकता है. बाएं कॉलम में, हम उन स्क्रिप्ट का यूआरएल देख सकते हैं जो लंबे मुख्य थ्रेड वाले टास्क के लिए ज़िम्मेदार हैं.

दाईं ओर, हम इन टास्क की अवधि देख सकते हैं. आपको याद दिला दें कि लॉन्ग टास्क, ऐसे टास्क होते हैं जिन्हें 50 मिलीसेकंड से ज़्यादा समय तक चलाया जाता है. इसे मुख्य थ्रेड को तब तक ब्लॉक करने वाला माना जाता है, जब तक फ़्रेम रेट या इनपुट के इंतज़ार का समय कम हो जाए.

अगर निगरानी के लिए तीसरे पक्ष की सेवाओं का इस्तेमाल किया जा रहा है, तो इन लागत को विज़ुअलाइज़ करने के लिए, कैलिबर का मुख्य थ्रेड में काम करने की समयावधि वाला विज़ुअल भी पसंद है. इसमें, माता-पिता और बच्चे के उन टास्क को हाइलाइट किया जाता है जो इंटरैक्शन पर असर डालने वाले लंबे कामों में योगदान देते हैं.

नेटवर्क अनुरोधों को ब्लॉक करें, ताकि लाइटहाउस डेटा में पहले/बाद के असर को देखा जा सके

Chrome DevTools, नेटवर्क के अनुरोधों को ब्लॉक करने के साथ काम करता है. इससे यह पता लगाया जा सकता है कि अलग-अलग संसाधनों को कैसे हटाया जा रहा है या उनके उपलब्ध न होने का क्या असर होता है. इससे, अलग-अलग स्क्रिप्ट (जैसे, तीसरे पक्ष के एम्बेड या ट्रैकर) में लगने वाले टोटल ब्लॉकिंग टाइम (टीबीटी) और टाइम टू इंटरैक्टिव जैसे मेट्रिक में लगने वाले शुल्क को समझने में मदद मिल सकती है.

नेटवर्क अनुरोध को ब्लॉक करने की सुविधा लाइटहाउस के साथ भी काम करती है! चलिए, किसी साइट की लाइटहाउस रिपोर्ट पर एक नज़र डालते हैं. परफ़ॉर्मेंस का स्कोर 400 मिलीसेकंड के साथ 63/100 है. कोड की जांच करने पर, हमें पता चला है कि यह साइट Chrome में, इंटरसेक्शन ऑब्ज़र्वर पॉलीफ़िल लोड करती है, जिसकी ज़रूरत नहीं है. चलिए, इसे ब्लॉक करते हैं!

हम DevTools नेटवर्क पैनल में किसी स्क्रिप्ट पर राइट क्लिक करके, उसे ब्लॉक करने के लिए Block Request URL पर क्लिक कर सकते हैं. यहां हम इंटरसेक्शन ऑब्ज़र्वर पॉलीफ़िल के लिए ऐसा करेंगे.

इसके बाद, हम Lighthouse को फिर से चला सकते हैं. इस बार हमें दिख सकता है कि हमारे परफ़ॉर्मेंस स्कोर में सुधार हुआ है (70/100), क्योंकि ब्लॉक करने का कुल समय (400 मि॰से॰ => 300 मि॰से॰) है.

तीसरे पक्ष के महंगे एम्बेड किए गए कॉन्टेंट को बाहरी हिस्से से बदलना

पेजों में वीडियो, सोशल मीडिया पोस्ट या विजेट एम्बेड करने के लिए, तीसरे पक्ष के संसाधनों का इस्तेमाल करना आम बात है. डिफ़ॉल्ट रूप से, ज़्यादातर एम्बेड तुरंत लोड हो जाते हैं. साथ ही, महंगे पेलोड हो सकते हैं. इससे उपयोगकर्ता अनुभव पर बुरा असर पड़ता है. अगर तीसरे पक्ष की कोई क्वेरी नहीं देखी जा रही है, तो इससे काम नहीं बनता. जैसे, अगर उपयोगकर्ता को उसे देखने से पहले स्क्रोल करना पड़ता है.

ऐसे विजेट की परफ़ॉर्मेंस को बेहतर बनाने का एक पैटर्न यह है कि उन्हें उपयोगकर्ता के इंटरैक्शन पर लेज़ी-लोड करें. ऐसा करने के लिए विजेट (किसी बाहरी हिस्से) की हल्के रंग की झलक रेंडर करके ऐसा किया जा सकता है. पूरा वर्शन सिर्फ़ तब लोड किया जा सकता है, जब कोई उपयोगकर्ता उससे इंटरैक्ट करता हो. लाइटहाउस में एक ऑडिट होता है, जो तीसरे पक्ष के उन संसाधनों के सुझाव देता है जिन्हें लेज़ी-लोडिंग के साथ, जैसे कि YouTube वीडियो एम्बेड किया जा सकता है.

आपको याद दिला दें कि लाइटहाउस तीसरे पक्ष के कोड को हाइलाइट करेगा. यह कोड मुख्य थ्रेड को 250 मि॰से॰ से ज़्यादा के लिए ब्लॉक करता है. ऐसा करने से, तीसरे पक्ष की सभी तरह की स्क्रिप्ट (इनमें Google की लिखी हुई स्क्रिप्ट भी शामिल हैं) दिख सकती हैं. ऐसा तब होता है, जब इमेज को रेंडर करने के लिए, उन्हें देखने के लिए स्क्रोल करना ज़रूरी हो. ऐसे स्क्रिप्ट को लोड होने में ज़्यादा समय देना या लेज़ी लोडिंग के लिहाज़ से बेहतर माना जा सकता है.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के अलावा दूसरी अहम जानकारी

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को हाइलाइट करने के अलावा, Lighthouse और PageSpeed Insights के हाल के वर्शन में भी, आपको ठोस निर्देश दिए जाते हैं. इनकी मदद से, सोर्स मैप चालू होने पर, JavaScript से भारी वेब ऐप्लिकेशन कितनी तेज़ी से लोड हो सकते हैं, इसमें सुधार किया जा सकता है.

इनमें, आपके पेज पर JavaScript की लागत को कम करने के लिए, ऑडिट का लगातार बढ़ना शामिल है. उदाहरण के लिए, उपयोगकर्ता अनुभव के लिए ज़रूरी न होने पर भी, पॉलीफ़िल और डुप्लीकेट का इस्तेमाल कम किया जा सकता है.

वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले टूल के बारे में ज़्यादा जानने के लिए, Lighthouse टीम का Twitter खाता और DevTool में नया क्या है पर नज़र रखें.

Unस्प्लैश पर मर्सिडीज़ मेलिंग की हीरो इमेज.