महत्वपूर्ण रेंडरिंग पाथ को मापना

Ilya Grigorik

पब्लिश किया गया: 31 मार्च, 2014

परफ़ॉर्मेंस से जुड़ी हर अच्छी रणनीति का आधार, मेज़रमेंट और इंस्ट्रूमेंटेशन होता है. जिस चीज़ को मेज़र नहीं किया जा सकता उसे ऑप्टिमाइज़ नहीं किया जा सकता. इस गाइड में, सीआरपी की परफ़ॉर्मेंस को मेज़र करने के अलग-अलग तरीकों के बारे में बताया गया है.

  • लाइटहाउस का तरीका, किसी पेज के लिए ऑटोमेटेड टेस्ट की एक सीरीज़ चलाता है. इसके बाद, पेज की सीआरपी परफ़ॉर्मेंस की रिपोर्ट जनरेट करता है. इस तरीके से, आपके ब्राउज़र में लोड किए गए किसी पेज की सीआरपी परफ़ॉर्मेंस की खास जानकारी तुरंत और आसानी से मिलती है. इससे, इसकी परफ़ॉर्मेंस की जांच करने, उसे बार-बार टेस्ट करने, और उसे बेहतर बनाने में मदद मिलती है.
  • Navigation Timing API का तरीका, असल उपयोगकर्ता को मॉनिटर करने (RUM) की मेट्रिक कैप्चर करता है. जैसा कि नाम से पता चलता है, ये मेट्रिक आपकी साइट के साथ उपयोगकर्ता के असल इंटरैक्शन से कैप्चर की जाती हैं. साथ ही, ये असल दुनिया में CRP की परफ़ॉर्मेंस के बारे में सटीक जानकारी देती हैं. यह जानकारी, अलग-अलग डिवाइसों और नेटवर्क की स्थितियों में, आपके उपयोगकर्ताओं को मिली परफ़ॉर्मेंस के आधार पर दी जाती है.

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

Lighthouse की मदद से किसी पेज का ऑडिट करना

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

शुरू करने के लिए, Lighthouse की मदद से वेब ऐप्लिकेशन का ऑडिट करना लेख पढ़ें.

Lighthouse को Chrome एक्सटेंशन के तौर पर चलाने पर, आपके पेज के सीआरपी के नतीजे, नीचे दिए गए स्क्रीनशॉट की तरह दिखते हैं.

Lighthouse के सीआरपी ऑडिट

इस ऑडिट के नतीजों के बारे में ज़्यादा जानकारी के लिए, ज़रूरी अनुरोध चेन देखें.

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

नेविगेशन समय

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

तो, इन टाइमस्टैंप का क्या मतलब है?

  • domLoading: यह पूरी प्रोसेस का शुरुआती टाइमस्टैंप होता है. इसका मतलब है कि ब्राउज़र, एचटीएमएल दस्तावेज़ के पहले मिले बाइट को पार्स करने वाला है.
  • domInteractive: यह उस पॉइंट को मार्क करता है जब ब्राउज़र, एचटीएमएल और डीओएम का पूरा कॉन्स्ट्रक्शन पार्स कर लेता है.
  • domContentLoaded: इस पॉइंट पर, DOM तैयार हो जाता है और JavaScript को एक्ज़ीक्यूट करने से रोकने वाली कोई स्टाइलशीट नहीं होती. इसका मतलब है कि अब हम रेंडर ट्री बना सकते हैं.
    • कई JavaScript फ़्रेमवर्क, अपना लॉजिक लागू करने से पहले इस इवेंट का इंतज़ार करते हैं. इस वजह से, ब्राउज़र EventStart और EventEnd टाइमस्टैंप कैप्चर करता है, ताकि हम यह ट्रैक कर सकें कि इस प्रोसेस को पूरा होने में कितना समय लगा.
  • domComplete: जैसा कि नाम से पता चलता है, प्रोसेस पूरी हो गई है और पेज पर मौजूद सभी संसाधन (इमेज वगैरह) डाउनलोड हो गए हैं. दूसरे शब्दों में, लोडिंग स्पिनर घूमना बंद हो गया है.
  • loadEvent: हर पेज लोड होने के आखिरी चरण में, ब्राउज़र एक onload इवेंट ट्रिगर करता है. इससे, ऐप्लिकेशन का अतिरिक्त लॉजिक ट्रिगर हो सकता है.

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

  • domInteractive, DOM के तैयार होने का निशान लगाता है.
  • आम तौर पर, domContentLoaded तब मार्क होता है, जब DOM और CSSOM, दोनों तैयार हों.
    • अगर कोई पार्स करने वाला टूल JavaScript को ब्लॉक नहीं कर रहा है, तो DOMContentLoaded, domInteractive के तुरंत बाद ट्रिगर हो जाएगा.
  • domComplete, पेज और उसके सभी सब-रिसॉर्स के तैयार होने पर मार्क करता है.
<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent =
          'interactive: ' +
          interactive +
          'ms, ' +
          'dcl: ' +
          dcl +
          'ms, complete: ' +
          complete +
          'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

इसे आज़माएँ

पिछला उदाहरण पहली नज़र में थोड़ा मुश्किल लग सकता है, लेकिन असल में यह काफ़ी आसान है. नेविगेशन टाइमिंग एपीआई, सभी ज़रूरी टाइमस्टैंप कैप्चर करता है. साथ ही, हमारा कोड onload इवेंट के ट्रिगर होने का इंतज़ार करता है. याद रखें कि onload इवेंट, domInteractive, domContentLoaded, और domComplete के बाद ट्रिगर होता है. इसके बाद, कोड अलग-अलग टाइमस्टैंप के बीच का अंतर कैलकुलेट करता है.

NavTiming का डेमो

अब हमारे पास कुछ खास माइलस्टोन ट्रैक करने के लिए हैं. साथ ही, इन मेज़रमेंट को आउटपुट करने के लिए एक बुनियादी फ़ंक्शन भी है. ध्यान दें कि इन मेट्रिक को पेज पर प्रिंट करने के बजाय, कोड में बदलाव करके भी इन्हें किसी आंकड़े के सर्वर पर भेजा जा सकता है. Google Analytics, ऐसा अपने-आप करता है. यह आपके पेजों की परफ़ॉर्मेंस पर नज़र रखने और उन पेजों की पहचान करने का एक शानदार तरीका है जिन्हें ऑप्टिमाइज़ करने से फ़ायदा मिल सकता है.

DevTools के बारे में क्या?

हालांकि, इन दस्तावेज़ों में सीआरपी के कॉन्सेप्ट को समझाने के लिए, कभी-कभी Chrome DevTools के नेटवर्क पैनल का इस्तेमाल किया जाता है, लेकिन DevTools, सीआरपी मेज़रमेंट के लिए सही नहीं है. इसकी वजह यह है कि इसमें अहम संसाधनों को अलग करने के लिए, कोई बिल्ट-इन तरीका नहीं है. ऐसे संसाधनों की पहचान करने के लिए, Lighthouse ऑडिट चलाएं.

सुझाव/राय दें या शिकायत करें