क्रोम डेवलपर टूल्स का उपयोग करके वर्डप्रेस प्रदर्शन को मापना

क्रोम डेवलपर टूल्स का उपयोग करके वर्डप्रेस प्रदर्शन को मापना

यह एक गेस्ट पोस्ट है। राय और सिफारिशें लेखक की अपनी हैं।

Savvii में हम तेज़ लोडिंग वेबसाइटों को उतना ही पसंद करते हैं जितना कि आपको और WP रॉकेट को चलाने वाले लोगों को। यदि आपकी साइट उतनी तेज़ नहीं है जितनी आप चाहते हैं कि यह सुधार का समय है। इससे पहले कि आप सुधार कर सकें आपको वर्तमान लोड समय को मापने की आवश्यकता है। इस लेख में मैं आपको दिखाऊंगा कि कैसे कुछ ही मिनटों में क्रोम देव टूल्स के साथ आसानी से अपनी वर्डप्रेस साइट में अड़चनों और त्रुटियों को दूर किया जा सकता है।

देव-उपकरण कैसे खोलें

सबसे पहले, क्रोम में उस पेज पर नेविगेट करें जिसका आप परीक्षण करना चाहते हैं। Command+Option+I (Mac) या Control+Shift+I (Windows और Linux) दबाएं. आपको डेव टूल पैनल खुला हुआ दिखाई देगा। ‘नेटवर्क’ टैब पर क्लिक करें, यहीं पर जादू होता है।

अपने उपयोगकर्ताओं का अनुकरण करें

किसी वेबसाइट का परीक्षण करते समय, आपके उपयोगकर्ताओं द्वारा उपयोग किए जाने वाले कनेक्शन और डिवाइस को दोहराना महत्वपूर्ण है। इसके लिए देव टूल्स के पास कुछ अच्छे विकल्प हैं। आप ‘ऑनलाइन’ पर क्लिक करके अपना कनेक्शन चुन सकते हैं, उदाहरण के लिए अब आप 2जी मोबाइल कनेक्शन पर स्विच कर सकते हैं। डिवाइस आइकन पर क्लिक करके आप अधिकांश सामान्य उपकरणों के बीच स्विच कर सकते हैं, जिसमें डेस्कटॉप डिफ़ॉल्ट विकल्प है। बोनस टिप: फिल्मस्ट्रिप देखने के लिए कैमरा आइकन पर क्लिक करें। यह कल्पना करेगा कि आपकी सामग्री आपके उपयोगकर्ताओं के लिए कितनी तेजी से दिखाई दे रही है। याद रखें: यह अधिक महत्वपूर्ण है कि उपयोगकर्ता किसी पृष्ठ के साथ इंटरैक्ट करने की तुलना में जितनी जल्दी हो सके वेबसाइट को पढ़ने और स्कैन करने में सक्षम हो।

क्रोम डेवलपर टूल्स का उपयोग करके वर्डप्रेस प्रदर्शन को मापना

कैश करना है या कैश नहीं करना है

‘संचय अक्षम करें’ बॉक्स को टॉगल करना उपयोगी होता है। यह हमें बिना किसी ब्राउज़र कैशिंग के पृष्ठ का लोड समय देगा, और इस प्रकार हमें बेहतर अंतर्दृष्टि प्रदान करेगा कि कहां सुधार करना है। सभी पेजों के लिए कैशिंग हमेशा संभव नहीं होता है।

ब्राउज़र कुकीज़ और ब्राउज़र कैश को साफ़ करने के लिए देव उपकरण फलक में राइट क्लिक करना हमेशा संभव होता है।

किस मीट्रिक पर ध्यान देना है?

इससे पहले कि हम अपना पहला परीक्षण करें, यह बताना महत्वपूर्ण है कि सबसे महत्वपूर्ण मीट्रिक देव उपकरण आपको दिखाएंगे: लोड। ‘लोड’ का समय इंगित करता है कि पृष्ठ कब तैयार है और आपकी स्क्रीन पर उपलब्ध है, जिसमें अन्य सभी संपत्तियां शामिल हैं जिन्हें पृष्ठ को छवियों, सीएसएस और स्क्रिप्ट जैसे लोड करने की आवश्यकता है।

झरना

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

क्रोम डेवलपर टूल्स का उपयोग करके वर्डप्रेस प्रदर्शन को मापना

दोषियों का पता लगाना

सबसे पहले, देखते हैं कि हमारे पास ‘लोड’ के लिए कितना समय है। इस नंबर को नोट कर लें और देखते हैं कि क्या हम इसमें सुधार कर सकते हैं। नीचे दी गई वस्तुओं की जाँच और फिक्स करके हमें वर्तमान लोड समय में कुछ समय कम करने में सक्षम होना चाहिए।

ब्लॉकिंग स्क्रिप्ट रेंडर करें

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

आप ‘DOMContentLoaded’ को इंगित करने वाली नीली रेखा को देखकर रेंडर ब्लॉकिंग स्क्रिप्ट ढूंढ सकते हैं। इस लाइन से पहले लोड की गई स्क्रिप्ट्स शायद रेंडर ब्लॉकिंग हैं। आप उस स्क्रिप्ट पर क्लिक करके और पूर्वावलोकन टैब की जाँच करके उनकी जाँच कर सकते हैं। इन लिपियों को एसिंक्रोनस बनाने की कोशिश करें, उन्हें क्लोजिंग बॉडी टैग के पास ले जाएँ (WPRocket आपके लिए यह कर सकता है) या उनसे पूरी तरह से छुटकारा पाएं। Google ने रेंडर ब्लॉकिंग बनाम एसिंक्रोनस जावास्क्रिप्ट पर एक उत्कृष्ट लेख लिखा है।

संदिग्ध स्थिति कोड

सर्वर से डाउनलोड की जाने वाली सभी संपत्तियां एक स्थिति कोड के साथ आती हैं। ये स्टेटस कोड बहुत कुछ बताते हैं। 200 के स्टेटस कोड का अर्थ है ‘ओके’। आप चाहते हैं कि आपकी सभी संपत्तियों का स्टेटस कोड 200 हो।

आप कॉलम स्थिति के आधार पर अपने नेटवर्क टैब में संपत्तियों को छाँटकर संदिग्ध स्थिति कोड पा सकते हैं। 200 को छोड़ें और दूसरे पर ध्यान दें।

जिन स्थिति कोडों को आप ठीक करना चाहते हैं, वे अधिकतर हैं:

  • 4xx – ग्राहक त्रुटियाँ, मुख्य रूप से 404 (फ़ाइल नहीं मिली)
  • 3xx – रीडायरेक्ट, मुख्य रूप से 301 (स्थायी) और 302 (अस्थायी) रीडायरेक्ट
  • 5xx (सर्वर त्रुटियां)

पूरी सूची के लिए कृपया httpstatuses देखें।

बड़े अनुरोध

यह कोई आश्चर्य की बात नहीं होगी कि बड़े अनुरोध खराब हैं। वे धीमे हैं और बहुत अधिक बैंडविड्थ का उपयोग करते हैं (विशेष रूप से बैंडविड्थ सीमित मोबाइल फोन सब्सक्रिप्शन वाले उपयोगकर्ताओं के लिए)। सबसे बड़ी संपत्ति खोजने के लिए कॉलम `आकार` पर क्रमबद्ध करें।

ज्यादातर बार ये बड़ी संपत्ति इमेज या वीडियो फाइल होगी। सुनिश्चित करें कि छवि आयाम आपके द्वारा अपनी साइट के भीतर उनका उपयोग करने के तरीके के आयामों से मेल खाते हैं और उन्हें संपीड़न की मात्रा के साथ सहेजते हैं जो उन्हें देखने के लिए अभी भी ठीक है। Imagify जैसी सेवा इन छवियों को और भी बेहतर दिखने के दौरान संकुचित कर देगी।

धीमे अनुरोध

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

संपत्ति की अधिक गहराई से जांच कैसे करें

हमने पहले ही कुछ चीजों का उल्लेख किया है जो आप पूर्वावलोकन टैब का उपयोग करके कर सकते हैं। अन्य टैब्स को भी एक्सप्लोर करने के लिए आपका समय उचित है: शीर्षलेख, प्रतिक्रिया, कुकीज़ और समय।

क्रोम डेवलपर टूल्स का उपयोग करके वर्डप्रेस प्रदर्शन को मापना

हेडर

कैशिंग से संबंधित बयानों के लिए हेडर की जांच करना उपयोगी होता है। कैशिंग रणनीतियों को अनुकूलित करने के विभिन्न तरीके हैं। Google ने एक अच्छा फ़्लोचार्ट तैयार किया है। कैशिंग नीतियां सर्वर और वेबसाइट दोनों सहित कई अलग-अलग संस्थाओं द्वारा निर्धारित की जा सकती हैं।

हम Savvii में आपकी साइट को गति देने के लिए वार्निश कैशिंग का उपयोग करते हैं। यदि आप यह सत्यापित करना चाहते हैं कि किसी पृष्ठ पर वार्निश ठीक से काम कर रहा है या नहीं, तो ये हेडर जानकारी जीवन रक्षक हो सकती हैं। शीर्षलेखों में अतिरिक्त जानकारी जोड़कर आप आसानी से देख सकते हैं कि पृष्ठ वार्निश से परोसा गया है या नहीं।

जवाब

पूर्वावलोकन टैब आपको जब भी संभव हो किसी संपत्ति (जैसे HTML या छवि) का दृश्य प्रतिनिधित्व दिखाएगा। प्रतिक्रिया टैब आपको संपत्ति का कोड दिखाएगा (छवियों के लिए उपलब्ध नहीं)।

कुकीज़

यह विशेष रूप से PHPSESSID कुकीज़ की जाँच के लिए उपयोगी है। यदि ऐसी कुकी मौजूद है तो सत्र का उपयोग किया जाता है। उस सत्र की पूरी तरह से आवश्यकता हो सकती है, उदाहरण के लिए यदि किसी उपयोगकर्ता की खरीदारी की टोकरी में कोई वस्तु है। यदि आपको सत्र का उपयोग करने का कोई कारण नहीं दिखता है तो सुनिश्चित करें कि कोई सत्र प्रारंभ नहीं हुआ है। सत्र कैशिंग को बहुत कठिन बनाते हैं।

समय

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

कतार

संपत्तियों को पंक्तिबद्ध किया जा सकता है क्योंकि HTTP 1.0/1.1 एक बिंदु पर एक ही डोमेन के केवल छह कनेक्शनों को संभाल सकता है। यदि आपके पास बहुत सी छोटी संपत्तियां हैं तो यह आपकी साइट को धीमा कर सकता है। या तो संपत्ति की संख्या को कम करने के लिए देखें (जैसे कि स्प्राइट्स का उपयोग करना), डोमेन शार्डिंग (उदाहरण के लिए सीडीएन के साथ) का उपयोग करें या सबसे अच्छा: एक होस्ट का उपयोग करें, जैसे कि सविवी, जो HTTP/2 प्रोटोकॉल का उपयोग करता है। HTTP / 2 एक साथ कितनी भी संपत्ति को स्ट्रीम कर सकता है।

प्रतीक्षारत (टीटीएफबी)

टीटीएफबी टाइम टू फर्स्ट बाइट का संक्षिप्त नाम है। आपको इस बार आपके द्वारा अनुरोधित पृष्ठ के HTML दस्तावेज़ की जांच करनी चाहिए। यह समय उस समय को मापता है जब अनुरोध भेजे जाने के क्षण से सर्वर को पहली बाइट ब्राउज़र पर वापस लाने में लगती है। इसमें वर्डप्रेस की बूटस्ट्रैपिंग, PHP फ़ंक्शंस करना, डेटाबेस क्वेरीज़ चलाना, HTML को पार्स करना और उपयोगकर्ता को वापस भेजना शामिल है। आपको टीटीएफबी को दो बार मापना चाहिए, पहले टीटीएफबी को कैशिंग अक्षम के साथ जांचें और कैशिंग सक्षम के साथ भी देखें (पैराग्राफ ‘अपने उपयोगकर्ताओं का अनुकरण करें’ देखें)। एक अच्छी होस्टिंग कंपनी आपकी वर्डप्रेस वेबसाइट को गति देने के लिए सर्वर-साइड कैशिंग का उपयोग करेगी।

कुल मिलाकर, मुझे आशा है कि मैंने आपके ब्राउज़र के भीतर से आपके लोड समय का विश्लेषण करने के कुछ त्वरित और आसान तरीकों का वर्णन किया है। इसके बाद आप प्रदर्शन को और बढ़ावा देने के लिए WP रॉकेट और Savvii जैसे एक अच्छे प्रबंधित वर्डप्रेस होस्ट का उपयोग कर सकते हैं।

कृपया अतिरिक्त देव टूल युक्तियों या प्रश्नों के साथ टिप्पणी करें।



क्रोम डेवलपर टूल्स का उपयोग करके वर्डप्रेस प्रदर्शन को मापना क्रोम डेवलपर टूल्स का उपयोग करके वर्डप्रेस प्रदर्शन को मापना

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *