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

Chrome की वेब टूल की मदद से, उपयोगकर्ता अनुभव को बेहतर बनाने के अवसर ढूंढे जा रहे हैं.

आज हम Lighthouse, PageSpeed, और DevTools की नई सुविधाओं के बारे में बताएंगे. इनकी मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में आपकी साइट को कैसे बेहतर बनाया जा सकता है.

इन टूल के बारे में हम आपको बताना चाहते हैं कि Lighthouse यह एक ऐसा ओपन सोर्स टूल है जो वेब पेजों की क्वालिटी को बेहतर बनाता है. आप इसे Chrome में खोज सकते हैं डीबग करने वाले टूल का DevTools सुइट और चलाएं किसी भी वेब पेज पर, सार्वजनिक तौर पर या पुष्टि करने की ज़रूरत के लिए. लाइटहाउस को यहां भी देखा जा सकता है: PageSpeed अहम जानकारी, CI और WebPageTest.

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

हमने 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 एलिमेंट की सूची और दाईं ओर उनके कुल सीएलएस दिखेंगे योगदान.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

इसके बाद, हम लाइटहाउस को फिर से चला सकते हैं. इस बार हम देख सकते हैं कि हमारा परफ़ॉर्मेंस स्कोर बढ़ गया है (70/100), इसलिए में टोटल ब्लॉकिंग टाइम होता है (400 मि॰से॰ => 300 मि॰से॰).

तीसरे पक्ष के महंगे एम्बेड को फ़साड से बदलें

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

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

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

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

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

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

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

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