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

Ilya Grigorik

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

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

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

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

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

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

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

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

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

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

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

नेविगेशन समय

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

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

  • domLoading: यह पूरी प्रोसेस का शुरुआती टाइमस्टैंप है, ब्राउज़र, HTML की पहली प्राप्त बाइट को पार्स करना शुरू करने वाला है दस्तावेज़.
  • 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 ऑडिट करें ऐसे संसाधनों की पहचान करना.

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