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

Ilya Grigorik

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

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

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

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

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

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

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

लाइटहाउस सीआरपी ऑडिट

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

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

नेविगेशन समय

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

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

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

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

  • DOM तैयार होने पर domInteractive मार्क करता है.
  • आम तौर पर, domContentLoaded तब मार्क करता है, जब DOM और CSSOM, दोनों तैयार हों.
    • अगर कोई पार्सर JavaScript को ब्लॉक नहीं कर रहा है, तो domInteractive के बाद DOMContentLoaded तुरंत फ़ायर हो जाएगा.
  • जब पेज और उसके सभी सबरिसॉर्स तैयार होते हैं, तब 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 ऑडिट चलाएं.

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