Google Analytics की मदद से परफ़ॉर्मेंस की अहम मेट्रिक मेज़र करना

इस कोडलैब में, आपको Google Analytics और User Timings API का इस्तेमाल करने का तरीका बताया जाएगा. इससे अपनी वेबसाइट या ऐप्लिकेशन की परफ़ॉर्मेंस को मेज़र किया जा सकता है. साथ ही, इसे ऑप्टिमाइज़ करके उपयोगकर्ताओं के अनुभव को बेहतर बनाया जा सकता है.

परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के लिए, WebPagetest.org जैसे टूल का इस्तेमाल किया जा सकता है. हालांकि, साइट की परफ़ॉर्मेंस का सही आकलन करने के लिए, उपयोगकर्ताओं से मिले असल डेटा का इस्तेमाल करना ज़रूरी है.

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

आपको क्या सीखने को मिलेगा

  • User Timings API का इस्तेमाल करके, परफ़ॉर्मेंस मेट्रिक को सटीक और असरदार तरीके से मेज़र करने का तरीका
  • उस डेटा को Google Analytics में कैसे भेजा जाए, ताकि उसे आपकी रिपोर्ट में शामिल किया जा सके

आपको किन चीज़ों की ज़रूरत होगी

  • डेवलपर कंसोल वाला ब्राउज़र
  • Web Server for Chrome या अपनी पसंद का कोई वेब सर्वर इस्तेमाल करें
  • सैंपल कोड
  • टेक्स्ट एडिटर
  • (ज़रूरी नहीं) Google Analytics खाता

इस ट्यूटोरियल का इस्तेमाल कैसे किया जाएगा?

सिर्फ़ इसे पढ़ें इसे पढ़ें और एक्सरसाइज़ पूरी करें

वेबसाइटें या ऐप्लिकेशन बनाने के अपने अनुभव को आप कितनी रेटिंग देंगे?

शुरुआती स्तर सामान्य स्तर एडवांस लेवल

आपके पास सैंपल कोड को अपने कंप्यूटर पर डाउनलोड करने का विकल्प होता है...

ज़िप फ़ाइल डाउनलोड करें

...या कमांड लाइन से GitHub रिपॉज़िटरी का क्लोन बनाएं.

git clone https://github.com/googlecodelabs/performance-analytics.git

सैंपल कोड को सबडाइरेक्ट्री में बांटा गया है. ये सबडाइरेक्ट्री, इस कोड लैब में दिए गए नंबर वाले हर चरण से जुड़ी हैं. इसका इस्तेमाल करके, कोड लैब में आसानी से एक से दूसरी जगह पर जाया जा सकता है. साथ ही, यह पुष्टि की जा सकती है कि आपने कोड को सही तरीके से लागू किया है.

अगर आपके पास अंतर देखने वाले प्रोग्राम का ऐक्सेस है, तो इसका इस्तेमाल करके यह देखा जा सकता है कि एक चरण से दूसरे चरण में क्या बदलाव हुआ है.

इस कोड लैब में, आपको एक ऐसी एचटीएमएल फ़ाइल मिलेगी जो इन ऐसेट को लोड करती है:

  • वेब फ़ॉन्ट
  • स्टाइलशीट
  • इमेज
  • JavaScript

साथ ही, आपको एक नया कोड लिखना होगा. यह कोड, इन सभी ऐसेट टाइप के लिए मुख्य परफ़ॉर्मेंस मेट्रिक को मेज़र करेगा.

ऐसेट की परफ़ॉर्मेंस से जुड़ी बातें

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

सीएसएस

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

JavaScript

दूसरी ओर, JavaScript रेंडरिंग को ब्लॉक नहीं करता है. हालांकि, यह DOM के पार्सिंग और कंस्ट्रक्शन को ब्लॉक करता है. ऐसा करना ज़रूरी है, क्योंकि JavaScript, DOM में बदलाव कर सकती है. इसका मतलब है कि जब भी ब्राउज़र को कोई <script> टैग दिखता है (एसिंक स्क्रिप्ट को छोड़कर), तो उसे अगले टैग पर जाने से पहले कोड को एक्ज़ीक्यूट करना होगा. अगर <script> टैग, किसी बाहरी JavaScript फ़ाइल को रेफ़रंस करता है, तो उसे आगे बढ़ने से पहले कोड को डाउनलोड और एक्ज़ीक्यूट करना होगा.

इस वजह से, अक्सर यह सुझाव दिया जाता है कि आपकी JavaScript को क्लोज़िंग </body> टैग से ठीक पहले लोड किया जाए, ताकि ज़्यादातर DOM जल्द से जल्द उपलब्ध हो सके.

वेब फ़ॉन्ट

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

इमेज

आखिर में, इमेज से साइट को बेहतर बनाया जा सकता है. हालांकि, इन्हें लोड होने में अक्सर सबसे ज़्यादा समय लगता है. इसका असल मतलब क्या है, यह समझना ज़रूरी है. साथ ही, इस्तेमाल के पैटर्न और पेज लोड होने के समय के बीच किसी भी तरह के आपसी संबंध का पता लगाना भी ज़रूरी है. इससे यह समझने में मदद मिलती है कि ऑप्टिमाइज़ेशन कैसे किया जाए.

इस कोड लैब का पहला चरण यह देखना है कि परफ़ॉर्मेंस मेज़रमेंट कोड जोड़ने से पहले डेमो पेज कैसा दिखता है.

डेमो देखने के लिए, एक नया फ़ोल्डर बनाएं और उसमें index.html नाम की फ़ाइल जोड़ें. इसके बाद, यहां दिए गए कोड को कॉपी करके index.html फ़ाइल में चिपकाएं.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Performance Analytics Demo</title>

  <!-- Start fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700,400italic" rel="stylesheet">
  <!-- End fonts -->

  <!-- Start CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { font-family: Roboto, sans-serif; margin: 1em; }
    img { float: left; height: auto; width: 33.33%; }
    .gallery { overflow: hidden; }
  </style>
  <!-- End CSS -->

</head>
<body>

  <div class="container">

    <!-- Start images -->
    <div class="gallery">
      <img src="http://lorempixel.com/380/200/animals/1/">
      <img src="http://lorempixel.com/380/200/animals/2/">
      <img src="http://lorempixel.com/380/200/animals/3/">
    </div>
    <!-- End images -->

    <h1>Performance Analytics Demo</h1>
    <p>Real performance data from real users.</p>

  </div>

  <!-- Start JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- End JavaScript -->

</body>
</html>

इसके बाद, Web Server for Chrome खोलें और अभी बनाई गई डायरेक्ट्री में लोकल सर्वर शुरू करें. पक्का करें कि "index.html को अपने-आप दिखाएं" विकल्प चुना गया हो.

Screen Shot 2016-05-11 at 1.03.43 PM.png

अब आपको अपने ब्राउज़र में http://127.0.0.1:8887/ पर जाकर डेमो फ़ाइल दिखनी चाहिए. यह कुछ ऐसी नज़र आनी चाहिए:

Screen Shot 2016-05-11 at 10.59.03 AM.png

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

ऐसेट की परफ़ॉर्मेंस से जुड़ी बातों के बारे में हमने पहले बताया था कि सीएसएस, DOM एलिमेंट को रेंडर करने से रोकता है. साथ ही, DOM में इसके बाद आने वाली स्क्रिप्ट को भी लागू होने से रोकता है.

आपने अभी जो डेमो फ़ाइल बनाई है उसमें यह सीएसएस शामिल है. यह Bootstrap और कुछ इनलाइन स्टाइल को रेफ़रंस करती है.

<!-- Start CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
  body { font-family: Roboto, sans-serif; margin: 1em; }
  img { float: left; height: auto; width: 33.33%; }
  .gallery { overflow: hidden; }
</style>
<!-- End CSS -->

सीएसएस, DOM एलिमेंट की रेंडरिंग और स्क्रिप्ट के एक्ज़ीक्यूशन, दोनों को ब्लॉक करती है. इसलिए, यह पता लगाया जा सकता है कि सीएसएस कब ब्लॉक करना बंद करती है. इसके लिए, सीएसएस के ठीक बाद एक <script> टैग जोड़ें, जो मौजूदा समय को सेव करता है.

इसके लिए, एक वैरिएबल बनाकर उसे new Date() असाइन किया जा सकता है. हालांकि, User Timings API की मदद से, इसे आसानी से किया जा सकता है. इसके लिए, performance.mark तरीके का इस्तेमाल करें.

सीएसएस के रेंडरिंग और स्क्रिप्ट के एक्ज़ीक्यूशन, दोनों को ब्लॉक करने की प्रोसेस पूरी होने पर मार्क करने के लिए, क्लोज़िंग <!-- End CSS --> टिप्पणी से ठीक पहले, कोड की यह लाइन जोड़ें.

<script>performance.mark('css:unblock');</script>

performance.mark तरीके से, इस समय पर हाई रिज़ॉल्यूशन वाला टाइमस्टैंप बनाया जाता है. साथ ही, इसे उस नाम से जोड़ा जाता है जो इस तरीके को पास किया गया था. इस मामले में, आपने मार्क का नाम "css:unblock" रखा है.

performance.mark तरीका, performance.measure तरीके के साथ काम करता है. इस तरीके का इस्तेमाल, दो मार्क के बीच के समय के अंतर का हिसाब लगाने के लिए किया जाता है. आपके बनाए गए मार्क के अलावा, ब्राउज़र अपने-आप बनाए गए मार्क का इस्तेमाल भी किया जा सकता है. ये मार्क, Navigation Timing API के अलग-अलग पॉइंट के लिए बनाए जाते हैं.

यहां दिया गया यूटिलिटी फ़ंक्शन, आपके जोड़े गए मार्क और Navigation Timing API से बनाए गए responseEnd मार्क के बीच की समयावधि को मेज़र करता है और उसे दिखाता है.

function measureDuration(mark, opt_reference) {
  var reference = opt_reference || 'responseEnd';
  var name = reference + ':' + mark;

  // Clears any existing measurements with the same name.
  performance.clearMeasures(name);

  // Creates a new measurement from the reference point to the specified mark.
  // If more than one mark with this name exists, the most recent one is used.
  performance.measure(name, reference, mark);

  // Gets the value of the measurement just created.
  var measure = performance.getEntriesByName(name)[0];

  // Returns the measure duration.
  return measure.duration;
}

इस यूटिलिटी फ़ंक्शन का इस्तेमाल शुरू करने के लिए, perf-analytics.js फ़ाइल के नाम से एक नई फ़ाइल बनाएं. यह फ़ाइल, index.html फ़ाइल वाली डायरेक्ट्री में ही होनी चाहिए. इसके बाद, ऊपर दिए गए कोड को कॉपी करके इसमें चिपकाएं.

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

इस कोड को कॉल करने के लिए फ़ंक्शन लिखने के बाद, आपकी perf-analytics.js फ़ाइल कुछ ऐसी दिखनी चाहिए:

window.onload = function() {
  measureCssUnblockTime();
};


/**
 * Calculates the time duration between the responseEnd timing event and when
 * the CSS stops blocking rendering, then logs that value to the console.
 */
function measureCssUnblockTime() {
  console.log('CSS', 'unblock', measureDuration('css:unblock'));
}


/**
 * Accepts a mark name and an optional reference point in the navigation timing
 * API and returns the time duration between the reference point and the last
 * mark (chronologically).
 * @param {string} mark The mark name.
 * @param {string=} opt_reference An optional reference point from the
 *     navigation timing API. Defaults to 'responseEnd'.
 * @return {number} The time duration
 */
function measureDuration(mark, opt_reference) {
  var reference = opt_reference || 'responseEnd';
  var name = reference + ':' + mark;

  // Clears any existing measurements with the same name.
  performance.clearMeasures(name);

  // Creates a new measurement from the reference point to the specified mark.
  // If more than one mark with this name exists, the most recent one is used.
  performance.measure(name, reference, mark);

  // Gets the value of the measurement just created.
  var measure = performance.getEntriesByName(name)[0];

  // Returns the measure duration.
  return measure.duration;
}

आखिर में, आपको index.html से perf-analytics.js स्क्रिप्ट लोड करनी होगी. इसके लिए, अपने मुख्य दस्तावेज़ में यह स्क्रिप्ट टैग जोड़ें. इसे सबसे आखिर में जोड़ें, ताकि यह अन्य संसाधनों को लोड करने में रुकावट न डाले.

<!-- Start performance analytics -->
<script async src="perf-analytics.js"></script>
<!-- End performance analytics -->

यह चरण पूरा करने के बाद, आपका कोड, कोड लैब रिपॉज़िटरी की 01-css डायरेक्ट्री में मौजूद कोड से मेल खाना चाहिए.

अगर आपने पेज को ब्राउज़र में लोड किया है और डेवलपर कंसोल खोला है, तो आपको कुछ इस तरह का आउटपुट दिखेगा:

Screen Shot 2016-05-17 at 11.13.02 AM.png

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

<!-- Start fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,400italic" rel="stylesheet">
<!-- End fonts -->

यह सीएसएस फ़ाइल के लिए <link> टैग है. इसलिए, ऐसा लग सकता है कि फ़ॉन्ट कब लोड होते हैं और इस्तेमाल के लिए तैयार होते हैं, यह तय करना उतना ही आसान है जितना कि पहले चरण में बताया गया है. इसके लिए, <link> के ठीक बाद <script> टैग में एक मार्क जोड़ना होता है.

माफ़ करें, यह इतना आसान नहीं है.

स्टाइलशीट, JavaScript के एक्ज़ीक्यूशन को ब्लॉक करती हैं. ऐसा इसलिए होता है, क्योंकि स्टाइलशीट के कॉन्टेंट का इस्तेमाल CSSOM बनाने के लिए किया जाता है. साथ ही, ऐसा हो सकता है कि लोड की जा रही JavaScript को CSSOM को ऐक्सेस करने की ज़रूरत पड़े. इसलिए, CSSOM के पूरी तरह से बन जाने तक, एक्ज़ीक्यूशन में देरी होनी चाहिए.

हालांकि, ब्राउज़र फ़ॉन्ट को डाउनलोड किए बिना CSSOM बना सकता है. इसका मतलब है कि अगर फ़ॉन्ट की स्टाइलशीट <link> टैग के तुरंत बाद, इनलाइन स्क्रिप्ट टैग के ज़रिए DOM में कोई मार्क जोड़ा जाता है, तो हो सकता है कि फ़ॉन्ट पूरी तरह से लोड होने से पहले ही मार्क हो जाए.

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

ज़्यादातर वेब फ़ॉन्ट (जैसे, Google फ़ॉन्ट, Typekit, और Font.com फ़ॉन्ट) को webfont.js स्क्रिप्ट के ज़रिए लोड किया जा सकता है. इसे Google और Typekit ने मिलकर बनाया है.

फ़ॉन्ट लोड करने के लिए, मुख्य दस्तावेज़ को <link> टैग के बजाय webfont.js का इस्तेमाल करने के लिए अपडेट करें. इसके लिए, कोड के फ़ॉन्ट सेक्शन को इससे बदलें:

<!-- Start fonts -->
<script>
window.WebFontConfig = {
  google: {families: ['Roboto:400,700,400italic']},
  timeout: 10000,
  active: function() {
    performance.mark('fonts:active');
  }
};
</script>
<script async src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<!-- End fonts -->

ऊपर दिए गए कोड में, दो ज़रूरी बातें ध्यान देने लायक हैं:

  • यह ऐक्टिव कॉलबैक में "fonts:active" मार्क बनाता है, ताकि बाद में यह मेज़र किया जा सके कि फ़ॉन्ट लोड होने में कितना समय लगा.
  • वेबफ़ॉन्ट.js को लोड करने वाले <script> टैग में async एट्रिब्यूट होता है. इसलिए, यह दस्तावेज़ के बाकी हिस्से को पार्स या रेंडर करने से नहीं रोकेगा. हालांकि, <link> टैग के लिए ऐसा नहीं है.

ऊपर दिए गए कोड से "fonts:active" मार्क बन जाता है. हालांकि, इस मार्क को मेज़र करना और इसे कंसोल में लॉग करना उतना आसान नहीं है जितना "css:unblock" मार्क के लिए था. इसकी वजह यह है कि अब फ़ॉन्ट एसिंक्रोनस तरीके से लोड होते हैं. इसलिए, अगर आपने window.onload हैंडलर में "fonts:active" मार्क को मेज़र करने की कोशिश की (जैसा कि आपने "css:unblock" के साथ किया था), तो ऐसा हो सकता है कि फ़ॉन्ट अब तक लोड न हुआ हो.

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

/**
 * Creates a promise that is resolved once the web fonts are fully load or
 * is reject if the fonts fail to load. The resolved callback calculates the
 * time duration between the responseEnd timing event and when the web fonts
 * are downloaded and active. If an error occurs loading the font, this fact
 * is logged to the console.
 */
function measureWebfontPerfAndFailures() {
  new Promise(function(resolve, reject) {
    // The classes `wf-active` or `wf-inactive` are added to the <html>
    // element once the fonts are loaded (or error).
    var loaded = /wf-(in)?active/.exec(document.documentElement.className);
    var success = loaded && !loaded[1]; // No "in" in the capture group.
    // If the fonts are already done loading, resolve immediately.
    // Otherwise resolve/reject in the active/inactive callbacks, respectively.
    if (loaded) {
      success ? resolve() : reject();
    }
    else {
      var originalAciveCallback = WebFontConfig.active;
      WebFontConfig.inactive = reject;
      WebFontConfig.active = function() {
        originalAciveCallback();
        resolve();
      };
      // In case the webfont.js script fails to load, always reject the
      // promise after the timeout amount.
      setTimeout(reject, WebFontConfig.timeout);
    }
  })
  .then(function() {
    console.log('Fonts', 'active', measureDuration('fonts:active'));
  })
  .catch(function() {
    console.error('Error loading web fonts')
  });
}

इस नए फ़ंक्शन को कॉल करने के लिए, window.onload हैंडलर को भी अपडेट करें

window.onload = function() {
  measureCssUnblockTime();
  measureWebfontPerfAndFailures();
};

यह चरण पूरा करने के बाद, आपका कोड, कोड लैब रिपॉज़िटरी की 02-fonts डायरेक्ट्री में मौजूद कोड से मेल खाना चाहिए.

अगर आपने पेज को ब्राउज़र में लोड किया है और डेवलपर कंसोल खोला है, तो आपको कुछ इस तरह का आउटपुट दिखेगा:

Screen Shot 2016-05-17 at 11.13.22 AM.png

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

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

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

जब किसी इमेज को DOM में जोड़ने से पहले डाउनलोड किया जाता है, तो वह इमेज उसी समय दिखती है जब उसे DOM में जोड़ा जाता है. दूसरी ओर, अगर किसी इमेज को DOM में जोड़ने से पहले डाउनलोड नहीं किया जाता है, तो वह उस समय दिखती है जब उसका onload हैंडलर ट्रिगर होता है.

इसलिए, किसी इमेज के दिखने का समय जानने के लिए, आपको दोनों स्थितियों को मैनेज करना होगा.

इसके लिए, हर इमेज के onload हैंडलर में मार्क जोड़े जा सकते हैं. साथ ही, DOM में मौजूद आखिरी इमेज के ठीक बाद, इनलाइन <script> टैग में भी मार्क जोड़े जा सकते हैं. इसका मतलब है कि आखिरी बार दिखने वाला मार्क, वह मार्क होगा जो यह दिखाता है कि सभी इमेज कब दिख रही हैं.

इमेज लोड होने और रेंडर होने, दोनों के लिए मार्क जोड़ने के लिए, index.html में इमेज कोड को इस तरह अपडेट करें:

<!-- Start images -->
<div class="gallery">
  <img onload="performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/1/">
  <img onload="performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/2/">
  <img onload="performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/3/">
</div>
<script>performance.mark('img:visible')</script>
<!-- End images -->

किसी खास मार्क के नाम के लिए performance.measure तरीका, हमेशा आखिरी मार्क का इस्तेमाल करेगा. ऐसा तब होगा, जब उसे एक ही नाम के कई मार्क मिलेंगे. इसलिए, perf-analytics.js फ़ाइल में मौजूद measureDuration यूटिलिटी फ़ंक्शन का इस्तेमाल इसके लिए किया जा सकता है. इसके लिए, कोई और बदलाव करने की ज़रूरत नहीं है:

/**
 * Calculates the time duration between the responseEnd timing event and when
 * all images are loaded and visible on the page, then logs that value to the
 * console.
 */
function measureImagesVisibleTime() {
  console.log('Images', 'visible', measureDuration('img:visible'));
}

ऊपर दिए गए फ़ंक्शन को perf-analytics.js फ़ाइल में जोड़ें. इसके बाद, इसे कॉल करने के लिए window.onload हैंडलर को अपडेट करें:

window.onload = function() {
  measureCssBlockTime();
  measureWebfontPerfAndFailures();
  measureImagesVisibleTime();
};

यह चरण पूरा करने के बाद, आपका कोड, कोड लैब रिपॉज़िटरी की 03-images डायरेक्ट्री में मौजूद कोड से मेल खाना चाहिए.

अगर आपने पेज को ब्राउज़र में लोड किया है और डेवलपर कंसोल खोला है, तो आपको कुछ इस तरह का आउटपुट दिखेगा:

Screen Shot 2016-05-17 at 11.13.39 AM.png

<script> एट्रिब्यूट के बिना वाले <script> टैग, तब तक DOM पार्सिंग को ब्लॉक करते हैं, जब तक उन्हें डाउनलोड और एक्ज़ीक्यूट नहीं कर लिया जाता. इसलिए, यह पता लगाया जा सकता है कि सभी स्क्रिप्ट कब एक्ज़ीक्यूट हो गई हैं. इसके लिए, DOM में आखिरी सिंक्रोनस <script> के ठीक बाद, इनलाइन स्क्रिप्ट टैग में एक मार्क जोड़ें.async

ध्यान दें कि इस मामले में, onload हैंडलर का इस्तेमाल करने से काम नहीं चलेगा. ऐसा इसलिए, क्योंकि ब्राउज़र को स्क्रिप्ट लोड करने के बाद उसे चलाना होता है और इसमें समय लगता है. ऐसी स्क्रिप्ट जो लोड होने में कम समय लेती है, लेकिन चलने में ज़्यादा समय लेती है, वह उतनी ही खराब हो सकती है जितनी कि लोड होने में ज़्यादा समय लेने वाली स्क्रिप्ट.

यह ट्रैक करने के लिए कि मुख्य दस्तावेज़ में सभी JavaScript कब लोड और एक्ज़ीक्यूट होती हैं, index.html में JavaScript सेक्शन को इस कोड से अपडेट करें:

<!-- Start JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>performance.mark('js:execute');</script>
<!-- End JavaScript -->

इससे "js:execute" नाम का एक मार्क तुरंत जुड़ जाएगा. यह मार्क, jQuery और Bootstrap के प्लगिन के लिए स्क्रिप्ट डाउनलोड होने और उनके एक्ज़ीक्यूट होने के बाद जुड़ता है.

इसमें कितना समय लगता है, यह मेज़र करने के लिए perf-analytics.js में यह फ़ंक्शन जोड़ें:

/**
 * Calculates the time duration between the responseEnd timing event and when
 * all synchronous JavaScript files have been downloaded and executed, then
 * logs that value to the console.
 */
function measureJavaSciptExecutionTime() {
  console.log('JavaScript', 'execute', measureDuration('js:execute'));
}

इसके बाद, इसे window.onload हैंडलर से शुरू करें:

window.onload = function() {
  measureCssBlockTime();
  measureWebfontPerfAndFailures();
  measureImagesVisibleTime();
  measureJavaSciptExecutionTime();
};

यह चरण पूरा करने के बाद, आपका कोड, कोड लैब रिपॉज़िटरी की 04-javascript डायरेक्ट्री में मौजूद कोड से मेल खाना चाहिए.

अगर आपने पेज को ब्राउज़र में लोड किया है और डेवलपर कंसोल खोला है, तो आपको कुछ इस तरह का आउटपुट दिखेगा:

Screen Shot 2016-05-17 at 11.14.03 AM.png

सभी ब्राउज़र, JavaScript प्रॉमिस या User Timing API के साथ काम नहीं करते. अगर आपने अब तक लिखे गए कोड को ऐसे ब्राउज़र में चलाया है जो इनमें से किसी एक सुविधा के साथ काम नहीं करता, तो आपको गड़बड़ियां दिखेंगी.

इससे निपटने के लिए, सुविधा का पता लगाने की सुविधा का इस्तेमाल किया जा सकता है. फ़ॉन्ट सेक्शन से ठीक पहले, यह कोड जोड़ें. JavaScript की यह लाइन, performance.mark तरीके के लिए सहायता का पता लगाती है. इसलिए, इस तरीके का इस्तेमाल करने से पहले, इसे पेज में जोड़ना ज़रूरी है:

<!-- Start feature detects -->
<script>window.__perf = window.performance && performance.mark;</script>
<!-- End feature detects -->

इसके बाद, index.html में जहां भी performance.mark को कॉल किया जाता है वहां detect. को प्रीफ़िक्स के तौर पर जोड़ें. यहां एक उदाहरण दिया गया है, जिसमें इमेज ब्लॉक में मौजूद कोड को अपडेट किया गया है. हालांकि, आपको यह पक्का करना होगा कि आपने अन्य सेक्शन भी अपडेट किए हों.

<!-- Start images -->
<div class="gallery">
  <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/1/">
  <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/2/">
  <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/3/">
</div>
<script>__perf && performance.mark('img:visible')</script>
<!-- End images -->

window पर __perf वैरिएबल सेट हो जाने के बाद, इसे perf-analytics.js में भी इस्तेमाल किया जा सकता है. इससे यह पक्का किया जा सकता है कि आपने ऐसा तरीका कॉल न किया हो जो मौजूदा ब्राउज़र में काम नहीं करता.

नीचे दी गई शर्त जोड़ने के लिए, measureDuration फ़ंक्शन को अपडेट करना होगा:

function measureDuration(mark, opt_reference) {
  if (window.__perf) {
    // ...
  }
}

आखिर में, चूंकि सभी ब्राउज़र JavaScript प्रॉमिस के साथ काम नहीं करते हैं, इसलिए measureWebfontPerfAndFailures फ़ंक्शन को भी किसी शर्त में रैप किया जाना चाहिए:

function measureWebfontPerfAndFailures() {
  if (window.Promise) {
    // ...
  }
}

अब आपको किसी भी ब्राउज़र में अपना कोड चलाने में कोई समस्या नहीं होगी.

यह चरण पूरा करने के बाद, आपका कोड, कोड लैब रिपॉज़िटरी की 05-feature-detects डायरेक्ट्री में मौजूद कोड से मेल खाना चाहिए.

इस कोडलैब का आखिरी चरण यह है कि कंसोल में लॉग किए जा रहे डेटा को Google Analytics में भेजा जाए. Google Analytics को डेटा भेजने से पहले, आपको अपने पेज में analytics.js लाइब्रेरी और डिफ़ॉल्ट ट्रैकिंग स्निपेट जोड़ना होगा.

मुख्य JavaScript ब्लॉक के बाद, लेकिन perf-analytics.js स्क्रिप्ट लोड होने से पहले, index.html में यह कोड जोड़ें:

<!-- Start analytics tracking snippet -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics_debug.js"></script>
<!-- End analytics tracking snippet -->

अगर आपने किसी वेबसाइट में पहले भी Google Analytics जोड़ा है, तो आपको पता होगा कि "UA-XXXXX-Y" प्लेसहोल्डर को उस ट्रैकिंग आईडी से बदलना होता है जो आपको Google Analytics में नई प्रॉपर्टी बनाते समय मिला था.

analytics.js ट्रैकिंग स्निपेट, ये चार मुख्य काम करता है:

  • यह एसिंक्रोनस <script> एलिमेंट बनाता है, जो analytics.js JavaScript लाइब्रेरी को डाउनलोड करता है.
  • यह एक ग्लोबल ga() फ़ंक्शन शुरू करता है. इसे ga() कमांड लाइन कहा जाता है. इसकी मदद से, उन कमांड को शेड्यूल किया जा सकता है जिन्हें analytics.js लाइब्रेरी लोड होने और इस्तेमाल के लिए तैयार होने के बाद चलाया जाना है.
  • यह ga() कमांड लाइन में एक कमांड जोड़ता है, ताकि'UA-XXXXX-Y' पैरामीटर के ज़रिए तय की गई प्रॉपर्टी के लिए, नया ट्रैकर ऑब्जेक्ट बनाया जा सके.
  • यह ga() कमांड की सूची में एक और कमांड जोड़ता है, ताकि मौजूदा पेज के लिए Google Analytics को पेज व्यू भेजा जा सके.

सिर्फ़ पेजव्यू से इकट्ठा किया गया डेटा काम का होता है, लेकिन इससे पूरी जानकारी नहीं मिलती. उपयोगकर्ताओं को आपकी साइट या ऐप्लिकेशन का अनुभव कैसा लग रहा है, इसकी बेहतर जानकारी पाने के लिए आपको Google Analytics को इंटरैक्शन का अतिरिक्त डेटा भेजना होगा.

Google Analytics, कई तरह के इंटरैक्शन डेटा के साथ काम करता है: पेज व्यू, इवेंट, सोशल इंटरैक्शन, अपवाद, और (आखिरी लेकिन सबसे अहम) उपयोगकर्ता के समय. Google Analytics को उपयोगकर्ता के समय का डेटा भेजने के लिए, इस कमांड सिग्नेचर का इस्तेमाल किया जा सकता है:

ga('send', 'timing', timingCategory, timingVar, timingValue);

यहां timingCategory एक स्ट्रिंग है, जिसकी मदद से टाइमिंग हिट को लॉजिकल ग्रुप में व्यवस्थित किया जा सकता है. timingVar वह वैरिएबल है जिसे मेज़र किया जा रहा है. वहीं, timingValue मिलीसेकंड में समय की अवधि है.

यह कैसे काम करता है, यह देखने के लिए measureCssUnblockTime फ़ंक्शन में मौजूद console.log स्टेटमेंट को इस तरह अपडेट किया जा सकता है:

ga('send', 'timing', 'CSS', 'unblock', measureDuration('css:unblock'));

ऊपर दिया गया कोड कुछ स्थितियों में काम करेगा. हालांकि, आपको इन दो ज़रूरी बातों के बारे में पता होना चाहिए:

  • पिछले चरण में, measureDuration फ़ंक्शन को अपडेट किया गया था. अब यह फ़ंक्शन सिर्फ़ तब चलेगा, जब ब्राउज़र User Timings API के साथ काम करेगा. इसका मतलब है कि कभी-कभी यह undefined वैल्यू दिखाएगा. Google Analytics को undefined डेटा भेजने का कोई मतलब नहीं है. कुछ मामलों में, इससे आपकी रिपोर्ट भी खराब हो सकती हैं. इसलिए, आपको यह टाइमिंग हिट सिर्फ़ तब भेजना चाहिए, जब measureDuration कोई वैल्यू दिखाता हो.
  • जब measureDuration कोई वैल्यू दिखाता है, तो वह DOMHighResTimeStamp होती है. इसमें मिलीसेकंड से ज़्यादा सटीक जानकारी होती है. Google Analytics में timingValue की वैल्यू पूर्णांक होनी चाहिए. इसलिए, आपको measureDuration से मिली वैल्यू को पूर्णांक में बदलना होगा.

इन समस्याओं को ध्यान में रखते हुए, measureDuration फ़ंक्शन में मौजूद return स्टेटमेंट को अपडेट करें, ताकि रिटर्न वैल्यू को पूर्णांक में बदला जा सके:

function measureDuration(mark, opt_reference) {
  if (window.__perf) {
    // ...
    return Math.round(measure.duration);
  }
}

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

function measureCssUnblockTime() {
  var cssUnblockTime = measureDuration('css:unblock');
  if (cssUnblockTime) {
    ga('send', 'timing', 'CSS', 'unblock', cssUnblockTime);
  }
}

आपको मेज़रमेंट की अन्य सभी सुविधाओं में भी इसी तरह के अपडेट करने होंगे. पूरी होने के बाद, perf-analytics.js फ़ाइल ऐसी दिखनी चाहिए:

window.onload = function() {
  measureCssUnblockTime();
  measureWebfontPerfAndFailures();
  measureImagesVisibleTime();
  measureJavaSciptExecutionTime();
};


/**
 * Calculates the time duration between the responseEnd timing event and when
 * the CSS stops blocking rendering, then sends this measurement to Google
 * Analytics via a timing hit.
 */
function measureCssUnblockTime() {
  var cssUnblockTime = measureDuration('css:unblock');
  if (cssUnblockTime) {
    ga('send', 'timing', 'CSS', 'unblock', cssUnblockTime);
  }
}


/**
 * Calculates the time duration between the responseEnd timing event and when
 * the web fonts are downloaded and active, then sends this measurement to
 * Google Analytics via a timing hit. If an error occurs loading the font, an
 * error event is sent to Google Analytics.
 */
function measureWebfontPerfAndFailures() {
  if (window.Promise) {
    new Promise(function(resolve, reject) {
      var loaded = /wf-(in)?active/.exec(document.documentElement.className);
      var success = loaded && !loaded[1]; // No "in" in the capture group.
      if (loaded) {
        success ? resolve() : reject();
      }
      else {
        var originalAciveCallback = WebFontConfig.active;
        WebFontConfig.inactive = reject;
        WebFontConfig.active = function() {
          originalAciveCallback();
          resolve();
        };
        // In case the webfont.js script failed to load.
        setTimeout(reject, WebFontConfig.timeout);
      }
    })
    .then(function() {
      var fontsActiveTime = measureDuration('fonts:active');
      if (fontsActiveTime) {
        ga('send', 'timing', 'Fonts', 'active', fontsActiveTime);
      }
    })
    .catch(function() {
      ga('send', 'event', 'Fonts', 'error');
    });
  }
}


/**
 * Calculates the time duration between the responseEnd timing event and when
 * all images are loaded and visible on the page, then sends this measurement
 * to Google Analytics via a timing hit.
 */
function measureImagesVisibleTime() {
  var imgVisibleTime = measureDuration('img:visible');
  if (imgVisibleTime) {
    ga('send', 'timing', 'Images', 'visible', imgVisibleTime);
  }
}


/**
 * Calculates the time duration between the responseEnd timing event and when
 * all synchronous JavaScript files are downloaded and executed, then sends
 * this measurement to Google Analytics via a timing hit.
 */
function measureJavaSciptExecutionTime() {
  var jsExecuteTime = measureDuration('js:execute');
  if (jsExecuteTime) {
    ga('send', 'timing', 'JavaScript', 'execute', jsExecuteTime);
  }
}


/**
 * Accepts a mark name and an optional reference point in the navigation timing
 * API and returns the time duration between the reference point and the last
 * mark (chronologically). The return value is rounded to the nearest whole
 * number to be compatible with Google Analytics.
 * @param {string} mark The mark name.
 * @param {string=} opt_reference An optional reference point from the
 *     navigation timing API. Defaults to 'responseEnd'.
 * @return {?number} The time duration as an integer or undefined if no
 *     matching marks can be found.
 */
function measureDuration(mark, opt_reference) {
  if (window.__perf) {
    var reference = opt_reference || 'responseEnd';
    var name = reference + ':' + mark;

    // Clears any existing measurements with the same name.
    performance.clearMeasures(name);

    // Creates a new measurement from the reference point to the specified mark.
    // If more than one mark with this name exists, the most recent one is used.
    performance.measure(name, reference, mark);

    // Gets the value of the measurement just created.
    var measure = performance.getEntriesByName(name)[0];

    // Returns the measure duration.
    return Math.round(measure.duration);
  }
}

और फ़ाइनल index.html फ़ाइल ऐसी दिखनी चाहिए:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Performance Analytics Demo</title>

  <!-- Start navigation timing feature detect -->
  <script>window.__perf = window.performance && performance.mark;</script>
  <!-- End navigation timing feature detect -->

  <!-- Start fonts -->
  <script>
  window.WebFontConfig = {
    google: {families: ['Roboto:400,700,400italic']},
    timeout: 10000,
    active: function() {
      __perf && performance.mark('fonts:active');
    }
  };
  </script>
  <script async src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
  <!-- End fonts -->

  <!-- Start CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { font-family: Roboto, sans-serif; margin: 1em; }
    img { float: left; height: auto; width: 33.33%; }
    .gallery { overflow: hidden; }
  </style>
  <script>__perf && performance.mark('css:unblock');</script>
  <!-- End CSS -->

</head>
<body>

  <div class="container">

    <!-- Start images -->
    <div class="gallery">
      <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/1/">
      <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/2/">
      <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/3/">
    </div>
    <script>__perf && performance.mark('img:visible')</script>
    <!-- End images -->

    <h1>Performance Analytics Demo</h1>
    <p>Real performance data from real users.</p>

  </div>

  <!-- Start JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script>__perf && performance.mark('js:execute');</script>
  <!-- End JavaScript -->

  <!-- Start analytics tracking snippet -->
  <script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
  </script>
  <script async src="https://www.google-analytics.com/analytics.js"></script>
  <!-- End analytics tracking snippet -->

  <!-- Start performance analytics -->
  <script async src="perf-analytics.js"></script>
  <!-- End performance analytics -->

</body>
</html>

इस पेज को लोड करने और नेटवर्क पैनल में अनुरोधों को देखने पर, आपको कुछ ऐसा दिखेगा:

Screen Shot 2016-05-10 at 6.57.23 PM.png

यह जानकारी काम की है. हालांकि, यूआरएल के तौर पर कोड किए गए अनुरोध के तौर पर इस डेटा को देखना मुश्किल हो सकता है. अगर आपको किसी वजह से ये अनुरोध नहीं दिखते हैं, तो यह पता लगाना मुश्किल हो जाता है कि अनुरोध पूरा क्यों नहीं हुआ.

स्थानीय तौर पर डेवलपमेंट करते समय, analytics.js के डीबग वर्शन का इस्तेमाल करना बेहतर होता है. इससे, हर analytics.js कमांड के चलने पर, कंसोल में डीबग करने से जुड़ी अहम जानकारी लॉग हो जाएगी. अगर आपको

index.html में analytics.js यूआरएल को analytics_debug.js पर अपडेट करें और अपने ब्राउज़र कंसोल को खोलें. आपको प्रिंट किए गए स्टेटमेंट दिखेंगे, जो इस तरह दिखते हैं:

Screen Shot 2016-05-10 at 6.54.13 PM.png

अब आपको पता चल गया है कि इस डेमो पेज के लिए परफ़ॉर्मेंस मेज़रमेंट को कैसे लागू किया जाता है. इसलिए, इसे अपनी साइट पर जोड़कर देखें. साथ ही, असली उपयोगकर्ता का डेटा Google Analytics को भेजें.

इकट्ठा किए गए डेटा की रिपोर्टिंग

कुछ दिनों तक परफ़ॉर्मेंस डेटा इकट्ठा करने के बाद, उस डेटा की रिपोर्ट बनाई जा सकती है. इससे आपको यह अहम जानकारी मिलेगी कि असल उपयोगकर्ताओं के लिए आपकी साइट और उसके संसाधन कितनी तेज़ी से लोड होते हैं.

Google Analytics में उपयोगकर्ता के समय की रिपोर्ट देखने के लिए, सबसे ऊपर मौजूद रिपोर्टिंग टैब पर क्लिक करें. इसके बाद, साइडबार नेविगेशन में जाकर "व्यवहार > साइट की स्पीड > उपयोगकर्ता के समय" चुनें. इसके अलावा, सहायता केंद्र में जाकर उपयोगकर्ता के समय की रिपोर्ट देखने के लिए दिए गए निर्देशों का पालन करें.

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

Screen Shot 2016-05-10 at 7.16.07 PM.png

बधाई हो! आपने इस कोड लैब को पूरा कर लिया है. अगर आपको इस बारे में ज़्यादा जानकारी चाहिए, तो अगले सेक्शन में आपको इस कोड को बेहतर बनाने के कुछ सुझाव मिलेंगे. इससे आपको और भी अहम जानकारी मिल सकती है.

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

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

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

किसी भी तरह के विश्लेषण के लिए, आम तौर पर आपको किसी सवाल से शुरुआत करनी होती है. इसके बाद, यह पता लगाना होता है कि उस सवाल का जवाब देने के लिए डेटा का इस्तेमाल कैसे किया जाए.

उदाहरण के लिए, यहां सवालों की एक सूची दी गई है. साथ ही, यह बताया गया है कि इन सवालों के जवाब देने के लिए, इस कोड लैब में सीखी गई बातों का इस्तेमाल कैसे किया जा सकता है:

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

आखिर में, अगर आपको वेब परफ़ॉर्मेंस या Google Analytics के बारे में ज़्यादा जानना है, तो यहां कुछ बेहतरीन संसाधन दिए गए हैं:

  • ज़्यादा परफ़ॉर्मेंस वाली वेबसाइटें बनाने में आपकी मदद करने वाले टूल और जानकारी
    https://developers.google.com/speed/
  • Google Analytics प्लैटफ़ॉर्म का फ़ायदा पाने के लिए, डेवलपर के लिए टूल और एपीआई
    https://developers.google.com/analytics/
  • ऑनलाइन कोर्स, जिनसे आपको Google Analytics प्रॉडक्ट का इस्तेमाल करने का तरीका सिखाया जाता है. ये कोर्स, Google Analytics पर काम करने वाले लोग सिखाते हैं.
    https://analyticsacademy.withgoogle.com/