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

Ilya Grigorik

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

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

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

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

लाइटहाउस की मदद से पेज को ऑडिट करना

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

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

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

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

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

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

नेविगेशन समय

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

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

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

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

  • डीओएम तैयार होने पर domInteractive मार्क होता है.
  • आम तौर पर, 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 ऑडिट चलाएं.

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