डिबगबियर के साथ लाइटहाउस स्कोर और कोर वेब वाइटल्स की निगरानी करना

स्रोत नोड: 1854403

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

यह परीक्षण चलाना शुरू कर देगा, और आपको तुरंत प्रदर्शन चार्ट मिल जाएंगे जिन्हें आप देखना शुरू कर सकते हैं जिन्हें समय के साथ ट्रैक किया जाता है, केवल एकबारगी नहीं।

साइन अप करने के पांच मिनट बाद मेरे पास देखने के लिए बहुत अच्छा डेटा है, जिसमें कोर वेब वाइटल्स भी शामिल है

मुझे वहां पूरी लाइटहाउस रिपोर्ट मिल गई है, जिसमें मुझे वह चीजें दिखाई गई हैं जिन पर मुझे वास्तव में काम करने की जरूरत है।

क्योंकि इन सभी परिवर्तनों को समय के साथ ट्रैक किया जाता है, आप देख सकते हैं कि वास्तव में क्या और कब बदलाव हुआ। वह काफ़ी बड़ा है. क्या आपके जावास्क्रिप्ट बंडल का आकार बढ़ गया? कब? क्यों? क्या आपके SEO स्कोर में गिरावट आई? कब? क्यों?

अब मुझे इस बात का सटीक अंदाज़ा हो गया है कि समस्या का कारण क्या है और यह समय के साथ प्रदर्शन को कैसे प्रभावित कर रहा है।
सबसे अच्छी बात यह देखने में सक्षम होना है कि साइट के कोर वेब वाइटल्स ने समय के साथ कैसा प्रदर्शन किया है।

एक और बढ़िया बात: जब आपके पास प्रतिगमन होगा तो डीबगबियर आपको ईमेल करेगा (या एक स्लैक संदेश भेजेगा)। इसलिए, भले ही चार्ट अद्भुत हैं, ऐसा नहीं है कि क्या हो रहा है यह देखने के लिए आपको हर बार लॉग इन करना होगा। आप इनके परीक्षण के लिए बहुत स्पष्ट प्रदर्शन बजट भी निर्धारित कर सकते हैं:

प्रदर्शन बजट तोड़ें? आपको सूचित किया जाएगा:

प्रदर्शन बजट से अधिक होने का ईमेल अलर्ट.
HTML सत्यापन त्रुटियों की एक सुस्त चेतावनी चेतावनी।

क्या आप अपनी साइट के विभिन्न क्षेत्रों/पृष्ठों की तुलना करना चाहते हैं? (वैसे, आप उनका परीक्षण करने से पहले उनमें लॉग इन कर सकते हैं।) या यह सुनिश्चित करने के लिए कि आप पीछे नहीं रह रहे हैं, अपने प्रतिस्पर्धियों से अपनी तुलना करें? कोई बात नहीं, उन पर भी नजर रखें:

उत्पादन का परीक्षण करना बहुत अच्छी बात है. यह वास्तविकता को माप रहा है और आप जल्दी से शुरुआत कर सकते हैं। लेकिन चीजों को मापना भी बहुत अच्छी बात हो सकती है से पहले वे एक समस्या बन जाते हैं. क्या आप जानते हैं कि आपको Netlify और Vercel जैसी सेवाओं पर परिनियोजन पूर्वावलोकन कैसे मिलते हैं? खैर, DebugBear में केवल जैसी सेवाओं के लिए एकीकरण बनाया गया है शुद्ध करना और वर्सेल.

अब, जब आपके पास परिनियोजन पूर्वावलोकन के साथ एक पुल अनुरोध है, तो आप देख सकते हैं ठीक GitHub पर यदि मेट्रिक्स इन-लाइन हैं।

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

स्रोत: https://css-tricks.com/monitoring-lighthouse-scores-and-core-web-vitals-with-debugbear/

समय टिकट:

से अधिक सीएसएस ट्रिक्स