इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

आप इन चीज़ों के बारे में जानेंगे

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

आपको इनकी ज़रूरत होगी

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

आप इस ट्यूटोरियल का इस्तेमाल कैसे करेंगे?

सिर्फ़ इसे पढ़ें

इसे पढ़ें और कसरत करें

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

शुरुआती

बीच का लेवल

असरदार

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

पिन डाउनलोड करें

...या कमांड लाइन से GitHub डेटा स्टोर करने की जगह को क्लोन करें.

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

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

अगर आपके पास अलग-अलग मोड उपलब्ध है, तो आप इसका इस्तेमाल यह देखने के लिए कर सकते हैं कि क्या एक चरण से दूसरे चरण में बदला गया है.

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

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

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

एसेट की परफ़ॉर्मेंस पर विचार

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

सीएसएस

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

JavaScript

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

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

वेब फ़ॉन्ट

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

इमेज

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

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

डेमो देखने के लिए, एक नया फ़ोल्डर बनाएं और उसमें 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>

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

11-05-2016 का दोपहर 1:3:43 बजे स्क्रीन शॉट

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

11-05-2016 को सुबह 10.59.03 बजे के लिए स्क्रीन शॉट

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

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

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

<!-- 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 -->

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

ऐसा करने के लिए एक वैरिएबल बनाएं और उसे new Date() असाइन करें. हालांकि, यूज़र टाइमिंग एपीआई की मदद से, performance.mark तरीका काफ़ी आसान है.

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

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

performance.mark तरीके से इस समय सबसे ज़्यादा रिज़ॉल्यूशन वाला टाइमस्टैंप बनाया जाता है. साथ ही, इसे उस तरीके से जोड़ा जाता है जो तरीके को पास किया गया है. इस मामले में आपने Mark &कोट्स;सीएसएस:अनब्लॉक&कोट करें; का नाम दिया.

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

नीचे दिए गए यूटिलिटी फ़ंक्शन, नेविगेशन समय एपीआई से बनाए गए आपके और #33; निशान के बीच का समय और 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 फ़ाइल की निर्देशिका में) में एक नई फ़ाइल बनाएं और ऊपर के कोड को कॉपी करें और उसमें उसे चिपकाएं.

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

जब आप इस कोड को कॉल करने के लिए कोई फ़ंक्शन लिखते हैं, तब आपकी 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;
}

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

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

जब आप यह चरण पूरा कर लेते हैं, तब आपका कोड और कोड लैब डेटा स्टोर करने की जगह 01-css निर्देशिका में मौजूद ##39; से मेल खाना चाहिए.

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

17-05-2016 को सुबह 11.13.02 पर स्क्रीन शॉट मिला.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 को लोड करने वाले JavaScript को सीएसएसओएम को ऐक्सेस करना पड़े. इसलिए, सीएसएसओएम के पूरी तरह तैयार होने तक एक्ज़ीक्यूशन में देरी होनी चाहिए.

कैच यह है कि ब्राउज़र, फ़ॉन्ट को डाउनलोड किए बिना ही सीएसएसओएम बना सकता है. इसका मतलब है कि अगर आप फ़ॉन्ट और #39;s स्टाइलशीट के साथ ही DOM और इनलाइन टैग टैग के ज़रिए मार्क जोड़ते हैं, तो संभावना है कि मार्क पूरी तरह लोड होने से पहले हो जाएगा.

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

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

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

<!-- 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 -->

ऊपर दिए गए कोड के बारे में दो ज़रूरी बातें हैं:

यह चालू कॉलबैक में &kot;fonts:active&कोटेशन; मार्क बनाता है, ताकि आप बाद में माप सकें कि फ़ॉन्ट को लोड होने में कितना समय लगेगा.
<script> टैग जो webfonts.js लोड करता है, उसमें async एट्रिब्यूट होता है. इसलिए, यह दस्तावेज़ के बाकी हिस्से को पार्स या रेंडर करने से रोकता है (जो <link> टैग के लिए सही नहीं है).

हालांकि, ऊपर दिए गए कोड से &&ttfonts:active&kot; इसकी वजह यह है कि फ़ॉन्ट अब लोड नहीं हो रहा है. इसलिए, अगर आप window.onload हैंडलर में "fonts:active&quat;

इस समस्या को हल करने के लिए, आप एक वादा बना सकते हैं. फ़ॉन्ट लोड होने के बाद, यह हल कर दिया जाएगा. ये फ़ंक्शन आपके लिए काम करते हैं. इसे 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 निर्देशिका में मौजूद ##39; से मेल खाना चाहिए.

17-05-2016 को सुबह 11.13.22 बजे पर स्क्रीन शॉट है.png

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

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

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

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

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

आप हर इमेज's ऑनलोड हैंडलर के साथ-साथ इनलाइन <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 निर्देशिका में मौजूद ##39; से मेल खाना चाहिए.

17-05-2016 को सुबह 11.13.39 बजे पर स्क्रीन शॉट है.png

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

ध्यान दें कि इस मामले में 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 -->

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

इसमें कितना समय लगता है, यह मापने के लिए 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 निर्देशिका में मौजूद ##39; से मेल खाना चाहिए.

17-05-2016 को सुबह 11.14.03 बजे के बीच स्क्रीन शॉट

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

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

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

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

<!-- 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 -->

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

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

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

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

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

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

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

जब आप यह चरण पूरा कर लेते हैं, तब आपका कोड और कोड लैब डेटा स्टोर करने की जगह 05-feature-detects निर्देशिका में मौजूद ##39; से मेल खाना चाहिए.

इस कोडलैब में आखिरी चरण है, डेटा को कंसोल में लॉग इन करना और उसे 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 -->

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 वह वैरिएबल है जिसे आप मेज़र कर रहे हैं#39);और timingValue, मिलीसेकंड में असल समय अवधि है.

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

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

हालांकि कुछ मामलों में ऊपर दिया गया कोड काम करेगा, लेकिन आपको दो अहम बदलावों की जानकारी होनी चाहिए:

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

इन गॉच को ध्यान में रखते हुए, आइटम की रिटर्न वैल्यू को राउंड करने के लिए measurementअवधि के फ़ंक्शन में, रिटर्न स्टेटमेंट अपडेट करें:

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>

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

10-05-2016 को शाम 6.57.23 बजे के बीच स्क्रीन शॉट

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

analytics.js के डीबग वर्शन का इस्तेमाल करना, लोकल वर्शन को बेहतर तरीके से डेवलप करता है. इससे, हर analytics.js निर्देश के चलने पर, डीबग करने के बारे में काम की जानकारी लॉग हो जाती है. अगर आप

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

10-05-2016 को शाम 6.54.13 के बीच स्क्रीन शॉट

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

आप जो डेटा इकट्ठा करते हैं उस पर रिपोर्टिंग करना#39

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

Google Analytics में उपयोगकर्ता समय रिपोर्ट देखने के लिए, सबसे ऊपर रिपोर्टिंग टैब पर क्लिक करें और साइडबार नेविगेशन से &कोटेशन;साइट की गति > उपयोगकर्ता समय&कोटेशन चुनें; (या सहायता केंद्र से उपयोगकर्ता समय रिपोर्ट देखने के लिए निर्देशों का पालन करें).

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

स्क्रीन शॉट, 10-05-2016 को, शाम 7.16 बजे

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

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

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

ज़्यादा जानकारी पाने के अलावा, आपको अपनी सामान्य परफ़ॉर्मेंस ऐनलिटिक्स रणनीति के बारे में ज़्यादा सोच-समझकर सोचना चाहिए. लक्ष्य क्या हैं? सफलता क्या है?

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

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

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

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

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