अच्छी परफ़ॉर्मेंस वाली हर रणनीति का बुनियादी हिस्सा, अच्छे मेज़रमेंट और टूल का इस्तेमाल है. जिसे मेज़र नहीं किया जा सकता उसे ऑप्टिमाइज़ नहीं किया जा सकता. इस दस्तावेज़ में, सीआरपी की परफ़ॉर्मेंस को मेज़र करने के अलग-अलग तरीकों के बारे में बताया गया है.
- लाइटहाउस तरीका, किसी पेज पर अपने-आप होने वाले कई टेस्ट करता है. इसके बाद, पेज की सीआरपी परफ़ॉर्मेंस की रिपोर्ट जनरेट करता है. इस तरीके से, आपके ब्राउज़र में लोड किए गए किसी खास पेज की सीआरपी परफ़ॉर्मेंस की तुरंत और आसानी से खास जानकारी मिलती है. इससे आपको पेज की परफ़ॉर्मेंस को तेज़ी से टेस्ट करने, उसे दोहराने, और उसे बेहतर बनाने में मदद मिलती है.
- नेविगेशन टाइमिंग एपीआई, असली उपयोगकर्ता की निगरानी (आरयूएम) वाली मेट्रिक कैप्चर करता है. जैसा कि नाम से ही पता चलता है, ये मेट्रिक आपकी साइट के साथ उपयोगकर्ता के असल इंटरैक्शन से कैप्चर की जाती हैं और असल दुनिया में सीआरपी की परफ़ॉर्मेंस की सटीक जानकारी देती हैं. यह जानकारी आपके उपयोगकर्ताओं को कई तरह के डिवाइस और नेटवर्क स्थितियों में दिखती है.
आम तौर पर, सीआरपी को ऑप्टिमाइज़ करने के सही अवसरों की पहचान करने के लिए लाइटहाउस का इस्तेमाल करना एक अच्छा तरीका है. इसके बाद, आप नेविगेशन टाइमिंग एपीआई की मदद से अपना कोड, यह मॉनिटर करें कि आपका ऐप्लिकेशन जंगल में कैसा परफ़ॉर्म कर रहा है.
लाइटहाउस की मदद से किसी पेज को ऑडिट करना
Lighthouse एक वेब ऐप्लिकेशन ऑडिटिंग टूल है, जो किसी पेज पर कई तरह की जांच करता है और उसके बाद एक पूरी रिपोर्ट में पेज के नतीजों को दिखाता है. Lighthouse को Chrome एक्सटेंशन या एनपीएम मॉड्यूल के तौर पर चलाया जा सकता है. इसकी मदद से, लगातार इंटिग्रेशन सिस्टम के साथ लाइटहाउस को इंटिग्रेट किया जा सकता है.
शुरू करने के लिए, Lighthouse के साथ वेब ऐप्लिकेशन ऑडिट करना देखें.
जब Lighthouse को Chrome एक्सटेंशन के तौर पर चलाया जाता है, तो आपके पेज के सीआरपी नतीजे, नीचे दिए गए स्क्रीनशॉट जैसे दिखते हैं.
इस ऑडिट के नतीजों के बारे में ज़्यादा जानकारी के लिए, ज़रूरी अनुरोध चेन देखें.
नेविगेशन टाइमिंग एपीआई की मदद से, अपने कोड का इस्तेमाल करके पैसे चुकाएं
पेज लोड होने पर नेविगेशन टाइमिंग एपीआई और दूसरे ब्राउज़र इवेंट का कॉम्बिनेशन, आपको किसी भी पेज की सीआरपी परफ़ॉर्मेंस को कैप्चर और रिकॉर्ड करने में मदद करता है.
ऊपर दिए गए डायग्राम में मौजूद हर लेबल, हाई रिज़ॉल्यूशन वाले टाइमस्टैंप से जुड़ा है. इस टाइमस्टैंप को ब्राउज़र, लोड किए गए हर पेज के लिए ट्रैक करता है. असल में, इस मामले में हम सभी अलग-अलग टाइमस्टैंप का सिर्फ़ कुछ हिस्सा दिखा रहे हैं — फ़िलहाल, हम नेटवर्क से जुड़े सभी टाइमस्टैंप को स्किप कर रहे हैं. हालांकि, हम आने वाले समय के लेसन में उन टाइमस्टैंप पर बात करेंगे.
इन टाइमस्टैंप का क्या मतलब है?
domLoading
: यह पूरी प्रोसेस का शुरुआती टाइमस्टैंप है. ब्राउज़र, एचटीएमएल दस्तावेज़ की पहली बार मिली बाइट को पार्स करना शुरू करने वाला है.domInteractive
: उस पॉइंट को मार्क करता है जब ब्राउज़र ने एचटीएमएल और डीओएम के सभी कंस्ट्रक्शन को पार्स कर लिया हो.domContentLoaded
: उस पॉइंट को मार्क करता है, जब दोनों डीओएम तैयार हो और उस पर कोई भी स्टाइलशीट न हो जो JavaScript को एक्ज़ीक्यूट करने से रोक रही हो. इसका मतलब है कि अब हम (संभावित तौर पर) रेंडर ट्री बना सकते हैं.- कई JavaScript फ़्रेमवर्क, अपने लॉजिक को लागू करने से पहले इस इवेंट का इंतज़ार करते हैं. इस वजह से ब्राउज़र
EventStart
औरEventEnd
टाइमस्टैंप कैप्चर करता है, ताकि हम यह ट्रैक कर सकें कि प्रोसेस को पूरा करने में कितना समय लगा.
- कई JavaScript फ़्रेमवर्क, अपने लॉजिक को लागू करने से पहले इस इवेंट का इंतज़ार करते हैं. इस वजह से ब्राउज़र
domComplete
: जैसा कि नाम से ही पता है, सभी प्रोसेसिंग पूरी हो गई है और पेज पर मौजूद सभी संसाधन (इमेज वगैरह) डाउनलोड हो गए हैं - दूसरे शब्दों में, लोडिंग स्पिनर ने घूमना बंद कर दिया है.loadEvent
: हर पेज लोड के आखिरी चरण में, ब्राउज़र एकonload
इवेंट ट्रिगर करता है. यह अतिरिक्त ऐप्लिकेशन लॉजिक को ट्रिगर कर सकता है.
एचटीएमएल स्पेसिफ़िकेशन हर इवेंट के लिए खास शर्तों के बारे में बताता है: इवेंट कब ट्रिगर होना चाहिए, किन शर्तों को पूरा किया जाना चाहिए वगैरह. अपने मकसद के लिए, हम ज़रूरी रेंडरिंग पाथ से जुड़े कुछ अहम माइलस्टोन पर फ़ोकस करेंगे:
- DOM तैयार होने पर
domInteractive
मार्क करता है. - आम तौर पर,
domContentLoaded
तब मार्क करता है, जब DOM और CSSOM, दोनों तैयार हों.- अगर कोई पार्सर JavaScript को ब्लॉक नहीं कर रहा है, तो
domInteractive
के बादDOMContentLoaded
तुरंत फ़ायर हो जाएगा.
- अगर कोई पार्सर JavaScript को ब्लॉक नहीं कर रहा है, तो
- जब पेज और उसके सभी सबरिसॉर्स तैयार होते हैं, तब
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
के बाद फ़ायर होता है. यह अलग-अलग टाइमस्टैंप के बीच के अंतर का हिसाब भी लगाता है.
हमने जो भी कहा और किया है, अब हमारे पास ट्रैक करने के लिए कुछ खास माइलस्टोन हैं और ये मेज़रमेंट हासिल करने का एक आसान तरीका है. ध्यान दें कि इन मेट्रिक को पेज पर प्रिंट करने के बजाय, इन मेट्रिक को किसी आंकड़ों के सर्वर पर भेजने के लिए, कोड में बदलाव भी किया जा सकता है. Google Analytics ऐसा अपने-आप करता है. यह आपके पेजों की परफ़ॉर्मेंस पर नज़र रखने और ऐसे ज़रूरी पेजों को पहचानने का शानदार तरीका है जिन्हें ऑप्टिमाइज़ेशन के काम में फ़ायदा मिल सकता है.
DevTools के बारे में आपका क्या ख्याल है?
हालांकि, कभी-कभी ये दस्तावेज़ सीआरपी के सिद्धांत दिखाने के लिए, Chrome DevTools नेटवर्क पैनल का इस्तेमाल करते हैं. हालांकि, फ़िलहाल DevTools सीआरपी मेज़रमेंट के लिए बेहतर नहीं है. ऐसा इसलिए है, क्योंकि इसमें अहम संसाधनों को अलग करने के लिए पहले से कोई तरीका मौजूद नहीं है. ऐसे संसाधनों की पहचान करने के लिए, Lighthouse ऑडिट चलाएं.