গুগল অ্যানালিটিক্সের সাথে ক্রিটিক্যাল পারফরম্যান্স মেট্রিক্স পরিমাপ করা

এই কোডল্যাবে, আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের বাস্তব-বিশ্বের কর্মক্ষমতা পরিমাপ করতে এবং আপনার ব্যবহারকারীদের জন্য অভিজ্ঞতা উন্নত করতে এটিকে অপ্টিমাইজ করতে কীভাবে Google Analytics এবং ব্যবহারকারীর সময় API ব্যবহার করবেন তা শিখবেন।

WebPagetest.org- এর মতো টুলগুলি পারফরম্যান্স অপ্টিমাইজেশানের জন্য একটি দুর্দান্ত সূচনা, কিন্তু সাইটের কার্যক্ষমতার প্রকৃত পরীক্ষা সর্বদা প্রকৃত ব্যবহারকারীদের কাছ থেকে বাস্তব ডেটা হতে চলেছে৷

আপনি যদি একটি ওয়েবসাইট চালান, তাহলে ট্রাফিক পরিমাপ করার পাশাপাশি ডিভাইস এবং ব্রাউজার ব্যবহারের মতো জিনিসগুলি পরিমাপ করার জন্য আপনি ইতিমধ্যেই Google Analytics ব্যবহার করার একটি ভাল সুযোগ রয়েছে৷ সামান্য অতিরিক্ত কোড দিয়ে আপনি মিশ্রণে কর্মক্ষমতা মেট্রিক্স যোগ করতে পারেন।

আপনি কি শিখবেন

  • কিভাবে সঠিকভাবে এবং কার্যকরভাবে ব্যবহারকারীর সময় API ব্যবহার করে কর্মক্ষমতা মেট্রিক্স পরিমাপ করা যায়
  • কিভাবে Google Analytics-এ সেই ডেটা পাঠাতে হয় যাতে এটি আপনার রিপোর্টে একত্রিত করা যায়

আপনি কি প্রয়োজন হবে

আপনি কিভাবে এই টিউটোরিয়াল ব্যবহার করবেন?

শুধুমাত্র মাধ্যমে এটি পড়ুন এটি পড়ুন এবং অনুশীলনগুলি সম্পূর্ণ করুন

ওয়েব সাইট বা অ্যাপ্লিকেশন নির্মাণের সাথে আপনার অভিজ্ঞতাকে কীভাবে মূল্যায়ন করবে?

নবজাতক মধ্যবর্তী দক্ষ

আপনি হয় আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করতে পারেন...

জিপ ডাউনলোড করুন

...অথবা কমান্ড লাইন থেকে GitHub সংগ্রহস্থল ক্লোন করুন।

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

নমুনা কোডটিকে সাবডিরেক্টরিতে বিভক্ত করা হয়েছে যা এই কোড ল্যাবের প্রতিটি নম্বর ধাপের সাথে সঙ্গতিপূর্ণ। আপনি কোড ল্যাবে সহজেই এড়িয়ে যেতে বা আপনার বাস্তবায়ন সঠিক কিনা তা যাচাই করতে এটি ব্যবহার করতে পারেন।

আপনার যদি একটি ডিফিং প্রোগ্রামে অ্যাক্সেস থাকে তবে আপনি ধাপে ধাপে ঠিক কী পরিবর্তন হয়েছে তা দেখতে এটি ব্যবহার করতে পারেন।

এই কোড ল্যাবে, আপনি একটি একক HTML ফাইল নিতে যাচ্ছেন যা নিম্নলিখিত সম্পদগুলি লোড করে:

  • ওয়েব ফন্ট
  • স্টাইলশীট
  • ছবি
  • জাভাস্ক্রিপ্ট

এবং আপনি নতুন কোড লিখতে যাচ্ছেন যা এই সম্পদ প্রকারের প্রতিটির জন্য মূল কর্মক্ষমতা মেট্রিক্স পরিমাপ করে।

সম্পদ কর্মক্ষমতা বিবেচনা

আপনি যদি কখনও পারফরম্যান্স অপ্টিমাইজেশান সম্পর্কে কিছু পড়ে থাকেন তবে আপনি সম্ভবত ইতিমধ্যেই জানেন যে এই সমস্ত সম্পদের প্রকারের নিজস্ব বিভিন্ন বৈশিষ্ট্য রয়েছে এবং বিভিন্ন উপায়ে সামগ্রিক অনুভূত কর্মক্ষমতাকে প্রভাবিত করতে পারে।

সিএসএস

উদাহরণস্বরূপ, স্টাইলশীটগুলি তাদের পরে আসা DOM-এ সমস্ত উপাদানের রেন্ডারিংকে ব্লক করে, যার মানে ব্রাউজারকে স্টাইলশীটের জন্য একটি অনুরোধ করতে হবে, এটি ডাউনলোড করতে হবে এবং DOM-এর যে কোনও সামগ্রী রেন্ডার করার আগে এটি পার্স করতে হবে। এরপর. এই কারণে, সাধারণত নথির <head>-এ স্টাইলশীট স্থাপন করা ভাল। এবং CSS-এর ব্লকিং প্রকৃতির কারণে, প্রায়শই আপনার সমালোচনামূলক CSSকে শুধুমাত্র <head>-এ রাখার এবং পরে অ-সমালোচনামূলক CSS লোড করার পরামর্শ দেওয়া হয়।

জাভাস্ক্রিপ্ট

অন্যদিকে, জাভাস্ক্রিপ্ট রেন্ডারিং ব্লক করে না, তবে এটি DOM-এর পার্সিং এবং নির্মাণ ব্লক করে। এটি প্রয়োজনীয় কারণ জাভাস্ক্রিপ্ট DOM-কে পরিবর্তন করতে পারে, যার মানে ব্রাউজার যখনই একটি <script> ট্যাগ দেখে (অ্যাসিঙ্ক স্ক্রিপ্টগুলি ব্যতীত), এটিকে অবশ্যই পরবর্তী ট্যাগে চালিয়ে যাওয়ার আগে কোডটি কার্যকর করতে হবে। যদি <script> ট্যাগটি একটি বাহ্যিক জাভাস্ক্রিপ্ট ফাইলের উল্লেখ করে, তবে এটিকে এগিয়ে যাওয়ার আগে কোডটি ডাউনলোড এবং কার্যকর করতে হবে।

এই কারণে এটি প্রায়শই সুপারিশ করা হয় যে আপনার জাভাস্ক্রিপ্টটি ক্লোজিং </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>

এরপরে, Chrome এর জন্য ওয়েব সার্ভার খুলুন এবং আপনার তৈরি করা ডিরেক্টরিতে একটি স্থানীয় সার্ভার শুরু করুন। নিশ্চিত করুন যে "স্বয়ংক্রিয়ভাবে index.html দেখান" চেক করা আছে।

স্ক্রীন শট 2016-05-11 1.03.43 PM.png এ

আপনি এখন আপনার ব্রাউজারে http://127.0.0.1:8887/ নেভিগেট করতে সক্ষম হবেন এবং ডেমো ফাইলটি দেখতে পাবেন। এটি এই মত কিছু দেখা উচিত:

স্ক্রীন শট 2016-05-11 সকাল 10.59.03 AM.png

একবার আপনার ডেমো পৃষ্ঠাটি চালু হয়ে গেলে, কোডটি দেখার জন্য কিছুক্ষণ সময় নিন এবং দেখুন সমস্ত বিভিন্ন সম্পদের ধরন লোড হচ্ছে। পরবর্তী কয়েকটি ধাপে, এই সম্পদগুলি কখন লোড করা হয় এবং ব্যবহারকারীর সাথে যোগাযোগ করতে পারে তা পরিমাপ করতে আপনি কোড যোগ করবেন।

পূর্বে সম্পদ কর্মক্ষমতা বিবেচনার বিভাগে উল্লিখিত হিসাবে, CSS DOM উপাদানগুলির রেন্ডারিং এবং সেই সাথে DOM-এ এর পরে আসা স্ক্রিপ্টগুলির সম্পাদনকে ব্লক করে।

আপনার তৈরি করা ডেমো ফাইলটিতে নিম্নলিখিত CSS রয়েছে, যা বুটস্ট্র্যাপ এবং কয়েকটি ইনলাইন শৈলীর উল্লেখ করে।

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

যেহেতু CSS DOM এলিমেন্টের রেন্ডারিং এবং স্ক্রিপ্টের এক্সিকিউশন উভয়ই ব্লক করে, তাই CSS-এর সাথে সাথে একটি <script> ট্যাগ যোগ করে নির্ধারণ করা সম্ভব যেটি CSS ব্লক করা হবে যা বর্তমান সময় সঞ্চয় করে।

আপনি একটি ভেরিয়েবল তৈরি করে এবং এটিতে new Date() বরাদ্দ করে এটি করতে পারেন, তবে ব্যবহারকারীর সময় API- কে ধন্যবাদ, একটি আরও সহজ উপায় রয়েছে: performance.mark পদ্ধতি।

রেন্ডারিং এবং স্ক্রিপ্ট এক্সিকিউশন উভয়ই ব্লক করে সিএসএস সম্পন্ন হলে চিহ্নিত করতে, বন্ধ করার ঠিক আগে কোডের নিচের লাইনটি যোগ করুন <!-- End CSS --> মন্তব্য।

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

performance.mark পদ্ধতি এই সঠিক সময়ে একটি উচ্চ রেজোলিউশন টাইমস্ট্যাম্প তৈরি করে এবং পদ্ধতিতে যে নামেই পাস করা হয়েছে তার সাথে এটিকে যুক্ত করে। এই ক্ষেত্রে আপনি চিহ্নটির নাম দিয়েছেন "css:unblock"।

performance.mark পদ্ধতিটি performance.measure পদ্ধতির সাথে হাতের মুঠোয় চলে, যা দুটি চিহ্নের মধ্যে সময়ের পার্থক্য গণনা করতে ব্যবহৃত হয় (আপনার করা চিহ্নগুলি ছাড়াও, আপনি বিভিন্ন পয়েন্টের জন্য ব্রাউজার স্বয়ংক্রিয়ভাবে তৈরি করা চিহ্নগুলিও ব্যবহার করতে পারেন। নেভিগেশন টাইমিং এপিআইতে )।

নিম্নলিখিত ইউটিলিটি ফাংশন আপনার যোগ করা একটি চিহ্ন এবং নেভিগেশন টাইমিং API দ্বারা তৈরি প্রতিক্রিয়াশেষ চিহ্নের মধ্যে সময়কাল পরিমাপ করে এবং ফেরত দেয়।

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 ডিরেক্টরিতে যা আছে তার সাথে মেলে।

আপনি যদি একটি ব্রাউজারে পৃষ্ঠাটি লোড করেন এবং বিকাশকারী কনসোলটি খুলেন, তাহলে আপনি নিম্নলিখিত আউটপুটের মতো কিছু দেখতে পাবেন:

স্ক্রীন শট 2016-05-17 11.13.02 AM.png

ওয়েব ফন্টগুলি সাধারণত একটি বহিরাগত স্টাইলশীটের মাধ্যমে লোড করা হয়, যেমনটি প্রাথমিক ডেমো ফাইলে দেখা যায়:

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

যেহেতু এটি একটি CSS ফাইলের একটি <link> ট্যাগ, তাই মনে হতে পারে ফন্টগুলি কখন লোড হবে এবং ব্যবহারের জন্য প্রস্তুত তা নির্ধারণ করা ততটাই সহজ যতটা সহজ <link> এর পরেই একটি <script> ট্যাগের ভিতরে একটি চিহ্ন যোগ করা, ঠিক যেমন ধাপ 1.

দুর্ভাগ্যক্রমে, এটি এত সহজ নয়।

স্টাইলশীটগুলি জাভাস্ক্রিপ্টের নির্বাহকে ব্লক করে কারণ স্টাইলশীটের বিষয়বস্তু CSSOM তৈরি করতে ব্যবহার করা হয়, এবং যেহেতু এটা সম্ভব যে জাভাস্ক্রিপ্ট লোড করা হলে CSSOM-এ অ্যাক্সেস করতে হবে, তাই CSSOM সম্পূর্ণরূপে তৈরি না হওয়া পর্যন্ত নির্বাহকে বিলম্বিত করতে হবে।

ক্যাচ হল যে ব্রাউজারটি আসলে ফন্ট ডাউনলোড না করেই CSSOM তৈরি করতে পারে, যার মানে হল যে আপনি যদি ফন্টের স্টাইলশীট <link> ট্যাগের পরপরই DOM-এ একটি ইনলাইন স্ক্রিপ্ট ট্যাগের মাধ্যমে একটি চিহ্ন যোগ করেন, তাহলে চিহ্নটি ফন্টের আগে ঘটতে পারে। ফন্ট সম্পূর্ণরূপে লোড হয়.

ফন্ট লোড ইভেন্টগুলি ব্রাউজারগুলিতে উপলব্ধ না হওয়া পর্যন্ত, কখন একটি ফন্ট সত্যই সক্রিয় এবং পৃষ্ঠায় ব্যবহারের জন্য প্রস্তুত তা নির্ধারণ করতে জাভাস্ক্রিপ্টের প্রয়োজন হয়৷ সৌভাগ্যবশত, জাভাস্ক্রিপ্টের মাধ্যমে ফন্ট লোড করাও একটি পারফরম্যান্স জিত হতে পারে, কারণ এটি একটি CSS ফাইলে অতিরিক্ত ব্লক করার অনুরোধের প্রয়োজন হয় না।

বেশিরভাগ ওয়েব ফন্ট (গুগল ফন্ট, টাইপকিট এবং 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 -->

উপরের কোড সম্পর্কে লক্ষ্য করার জন্য দুটি গুরুত্বপূর্ণ বিষয় রয়েছে:

  • এটি সক্রিয় কলব্যাকে একটি "ফন্ট:সক্রিয়" চিহ্ন তৈরি করে, যাতে আপনি পরে পরিমাপ করতে পারেন যে ফন্টগুলি লোড হতে কতক্ষণ লেগেছে৷
  • webfonts.js লোড করা <script> ট্যাগটিতে async বৈশিষ্ট্য রয়েছে, তাই এটি বাকি নথির পার্সিং বা রেন্ডারিং ব্লক করবে না (যা <link> ট্যাগের জন্য সত্য নয়)।

যদিও উপরের কোডগুলি একটি "ফন্টস:অ্যাক্টিভ" চিহ্ন তৈরি করে, এই চিহ্নটি পরিমাপ করা এবং কনসোলে লগ করা ততটা সহজ নয় যতটা "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 ডিরেক্টরিতে যা আছে তার সাথে আপনার কোড মেলে।

আপনি যদি একটি ব্রাউজারে পৃষ্ঠাটি লোড করেন এবং বিকাশকারী কনসোলটি খুলেন, তাহলে আপনি নিম্নলিখিত আউটপুটের মতো কিছু দেখতে পাবেন:

স্ক্রীন শট 2016-05-17 11.13.22 AM.png

একটি ছবি কখন দৃশ্যমান হয় তা জানা যতটা সহজ তা প্রদর্শিত হতে পারে না। আপনি পূর্ববর্তী পদক্ষেপগুলি থেকে জানেন যে স্টাইলশীট এবং সিঙ্ক্রোনাস <script> ট্যাগগুলি রেন্ডারিং, পার্সিং এবং স্ক্রিপ্ট এক্সিকিউশনকে ব্লক করতে পারে। আপনি যা জানেন না তা হল যে তাদের কেউই ব্রাউজারের প্রিলোড স্ক্যানার ব্লক করে না।

একটি প্রিলোড স্ক্যানার এমন কিছু যা সমস্ত আধুনিক ব্রাউজার কার্যক্ষমতা উন্নত করার অনেক প্রচেষ্টার মধ্যে একটি হিসাবে প্রয়োগ করে, এমনকি অ-পারফ-মাইন্ডেড সাইটগুলিতেও প্রচুর ব্লকিং সম্পদ রয়েছে। ধারণাটি হল যে যদিও কিছু সম্পদ পার্সিং বা রেন্ডারিং বা স্ক্রিপ্ট এক্সিকিউশন ব্লক করতে পারে, তাদের ডাউনলোড ব্লক করতে হবে না। তাই DOM নির্মাণ শুরু করার আগে ব্রাউজার HTML ফাইলটিকে স্ক্যান করে এবং অবিলম্বে ডাউনলোড করা শুরু করতে পারে এমন সম্পদের সন্ধান করে।

যতদূর ছবিগুলি উদ্বিগ্ন, এর মানে হল যে আপনার ছবিগুলি DOM-এ যোগ করার সময় ইতিমধ্যেই ডাউনলোড হয়ে যাওয়ার একটি শালীন সম্ভাবনা রয়েছে৷ এর মানে হল যে বিন্দুতে একটি ইমেজ ডাউনলোড করা হয় তা অবশ্যই ভাল পারফরম্যান্স মেট্রিক নয় । পারফরম্যান্স মেট্রিকটি আপনার যত্ন নেওয়া উচিত যে বিন্দুতে একটি চিত্র ব্যবহারকারীর কাছে দৃশ্যমান।

যখন একটি ছবি DOM-এ যুক্ত হওয়ার আগে ডাউনলোড করা হয়, তখন যে বিন্দুতে এটি দৃশ্যমান হয় সেটি হল সেই বিন্দুটি যেখানে এটি DOM-এ থাকে। অন্যদিকে, DOM-এ যোগ করার আগে যদি কোনো ছবি ডাউনলোড না করা হয়, তাহলে 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 ডিরেক্টরিতে যা আছে তার সাথে আপনার কোড মেলে।

আপনি যদি একটি ব্রাউজারে পৃষ্ঠাটি লোড করেন এবং বিকাশকারী কনসোলটি খুলেন, তাহলে আপনি নিম্নলিখিত আউটপুটের মতো কিছু দেখতে পাবেন:

স্ক্রীন শট 2016-05-17 11.13.39 AM.png

যেহেতু <script> ট্যাগগুলি async অ্যাট্রিবিউট ব্লক না হওয়া পর্যন্ত DOM পার্সিং করে যতক্ষণ না সেগুলি উভয়ই ডাউনলোড এবং এক্সিকিউট করা হয়, আপনি শেষ সিঙ্ক্রোনাস <script> এর পরে অবিলম্বে একটি ইনলাইন স্ক্রিপ্ট ট্যাগে একটি চিহ্ন যোগ করার মাধ্যমে সমস্ত স্ক্রিপ্টগুলি কার্যকর করা শেষ হয়েছে তা নির্ধারণ করতে পারেন। <script> DOM-এ।

মনে রাখবেন যে onload হ্যান্ডলার ব্যবহার করা এই ক্ষেত্রে কাজ করবে না কারণ ব্রাউজার অবশ্যই স্ক্রিপ্টটি লোড করার পরে এটি চালাতে হবে এবং এটি সময় নেয়। একটি স্ক্রিপ্ট যা লোড হতে দ্রুত কিন্তু চালানোর জন্য ধীর তা একটি ধীর লোডিং স্ক্রিপ্টের মতোই খারাপ হতে পারে।

প্রধান নথিতে সমস্ত জাভাস্ক্রিপ্ট কখন লোড এবং কার্যকর করা হয় তা ট্র্যাক করতে, নিম্নলিখিত কোড সহ 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 এবং বুটস্ট্র্যাপের প্লাগইনগুলির জন্য স্ক্রিপ্টগুলি ডাউনলোড এবং কার্যকর করা শেষ হওয়ার সাথে সাথেই "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 ডিরেক্টরিতে যা আছে তার সাথে আপনার কোড মেলে।

আপনি যদি একটি ব্রাউজারে পৃষ্ঠাটি লোড করেন এবং বিকাশকারী কনসোলটি খুলেন, তাহলে আপনি নিম্নলিখিত আউটপুটের মতো কিছু দেখতে পাবেন:

স্ক্রীন শট 2016-05-17 11.14.03 AM.png

সমস্ত ব্রাউজার জাভাস্ক্রিপ্ট প্রতিশ্রুতি বা ব্যবহারকারীর টাইমিং API সমর্থন করে না, এবং যদি আপনি এই বৈশিষ্ট্যগুলির একটির সমর্থন ছাড়াই একটি ব্রাউজারে আপনার লেখা কোডটি চালান তবে আপনি ত্রুটি পাবেন৷

এটি মোকাবেলা করতে, আপনি বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করতে পারেন। ফন্ট সেকশনের ঠিক আগে কোডের ফলো বিট যোগ করুন। 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 এ ব্যবহার করতে পারেন যাতে আপনি বর্তমান ব্রাউজারে সমর্থিত নয় এমন একটি পদ্ধতিতে কল করবেন না।

নিম্নলিখিত শর্তযুক্ত যোগ করার জন্য measureDuration ফাংশন আপডেট করা আবশ্যক:

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

পরিশেষে, যেহেতু সমস্ত ব্রাউজার জাভাস্ক্রিপ্ট প্রতিশ্রুতি সমর্থন করে না, তাই 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 যোগ করে থাকেন, তাহলে আপনি জানতে পারবেন যে Google Analytics-এ একটি নতুন প্রপার্টি তৈরি করার সময় আপনি যে ট্র্যাকিং আইডি পেয়েছেন তার সাথে আপনাকে "UA-XXXXX-Y" প্লেসহোল্ডার প্রতিস্থাপন করতে হবে।

analytics.js ট্র্যাকিং স্নিপেট চারটি প্রধান কাজ করে:

  • একটি অ্যাসিঙ্ক্রোনাস <script> উপাদান তৈরি করে যা analytics.js JavaScript লাইব্রেরি ডাউনলোড করে।
  • একটি গ্লোবাল ga() ফাংশন শুরু করে (যাকে বলা হয় ga() কমান্ড সারি ) যা আপনাকে analytics.js লাইব্রেরি লোড হয়ে গেলে এবং যাওয়ার জন্য প্রস্তুত হলে চালানোর জন্য কমান্ড নির্ধারণ করতে দেয়।
  • 'UA-XXXXX-Y' প্যারামিটারের মাধ্যমে নির্দিষ্ট করা সম্পত্তির জন্য একটি নতুন ট্র্যাকার অবজেক্ট তৈরি করতে ga() কমান্ড সারিতে একটি কমান্ড যোগ করে।
  • বর্তমান পৃষ্ঠার জন্য Google Analytics-এ একটি পৃষ্ঠাভিউ পাঠাতে ga() কমান্ড সারিতে আরেকটি কমান্ড যোগ করে।

যদিও শুধুমাত্র পেজভিউ থেকে সংগৃহীত তথ্য উপযোগী, এটি পুরো গল্প বলে না। ব্যবহারকারীরা কীভাবে আপনার সাইট বা অ্যাপ্লিকেশনের অভিজ্ঞতা নিচ্ছেন তার একটি ভাল ছবি পেতে, আপনাকে Google Analytics-এ অতিরিক্ত ইন্টারঅ্যাকশন ডেটা পাঠাতে হবে।

Google Analytics বিভিন্ন ধরনের ইন্টারঅ্যাকশন ডেটা সমর্থন করে: পেজভিউ , ইভেন্ট , সামাজিক মিথস্ক্রিয়া , ব্যতিক্রম , এবং (শেষ কিন্তু অন্তত নয়) ব্যবহারকারীর সময় । Google Analytics-এ ব্যবহারকারীর টাইমিং ডেটা পাঠাতে, আপনি নিম্নলিখিত কমান্ড স্বাক্ষর ব্যবহার করতে পারেন:

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

যেখানে timingCategory হল একটি স্ট্রিং যা আপনাকে লজিক্যাল গ্রুপে টাইমিং হিটগুলিকে সংগঠিত করতে দেয়, সেখানে timingVar হল আপনি যে পরিবর্তনশীল পরিমাপ করছেন, এবং timingValue হল মিলিসেকেন্ডে প্রকৃত সময়কাল।

অনুশীলনে এটি কীভাবে কাজ করে তা দেখতে, console.log বিবৃতি measureCssUnblockTime ফাংশনে আপডেট করা যেতে পারে:

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

যদিও উপরের কোডটি কিছু পরিস্থিতিতে কাজ করবে, সেখানে দুটি গুরুত্বপূর্ণ গোটাস সম্পর্কে সচেতন হতে হবে:

  • পূর্ববর্তী ধাপে measureDuration ফাংশন আপডেট করা হয়েছে শুধুমাত্র যদি ব্রাউজারটি ইউজার টাইমিং এপিআই সমর্থন করে, যার মানে কখনও কখনও এটি undefined ফিরে আসবে। যেহেতু Google Analytics-এ অনির্ধারিত ডেটা পাঠানোর কোনও কারণ নেই (কিছু ক্ষেত্রে এটি আপনার প্রতিবেদনগুলিকেও বিপর্যস্ত করতে পারে), আপনাকে শুধুমাত্র এই টাইমিং হিটটি পাঠাতে হবে যদি measureDuration একটি মান প্রদান করে।
  • যখন পরিমাপ DOMHighResTimeStamp measureDuration যার স্পষ্টতা মিলিসেকেন্ডের চেয়ে বেশি হবে। যেহেতু Google Analytics-এ timingValue ভ্যালু অবশ্যই একটি পূর্ণসংখ্যা হতে হবে, তাই আপনাকে অবশ্যই measureDuration দ্বারা প্রত্যাবর্তিত মানটিকে বৃত্তাকার করতে হবে।

এই গোটচাগুলির জন্য অ্যাকাউন্ট করার জন্য, রিটার্ন মানকে রাউন্ড করতে পরিমাপকাল ফাংশনে রিটার্ন স্টেটমেন্ট আপডেট করুন:

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>

আপনি যদি এই পৃষ্ঠাটি লোড করেন এবং নেটওয়ার্ক প্যানেলে অনুরোধগুলি দেখেন, তাহলে আপনি নীচের মত কিছু দেখতে পাবেন:

স্ক্রীন শট 2016-05-10 6.57.23 PM.png এ

এটি দরকারী, তবে এই ডেটাটিকে একটি URL-এনকোডেড অনুরোধ হিসাবে দেখা কষ্টকর হতে পারে৷ এবং, যে কারণেই হোক না কেন আপনি এই অনুরোধগুলি দেখতে পাচ্ছেন না, ব্যর্থতা কোথায় ঘটেছে তা খুঁজে বের করা সত্যিই কঠিন।

স্থানীয়ভাবে বিকাশ করার সময় একটি ভাল পদ্ধতি হল analytics.js এর ডিবাগ সংস্করণ ব্যবহার করা, যা প্রতিটি analytics.js কমান্ড চালানোর সাথে সাথে কনসোলে দরকারী ডিবাগিং তথ্য লগ করবে। আপনি যদি

index.html এ analytics_debug.js URL-কে analytics_debug.js-এ আপডেট করুন এবং আপনার ব্রাউজার কনসোল খুলুন, আপনি প্রিন্ট করা বিবৃতি দেখতে পাবেন যা দেখতে এইরকম:

স্ক্রীন শট 2016-05-10 6.54.13 PM.png এ

এখন যেহেতু আপনি এই ডেমো পৃষ্ঠার জন্য কর্মক্ষমতা পরিমাপ কীভাবে প্রয়োগ করবেন তা বুঝতে পেরেছেন, আপনি Google Analytics-এ প্রকৃত ব্যবহারকারীর ডেটা পাঠাতে আপনার নিজের সাইটে এটি যোগ করার চেষ্টা করতে পারেন।

আপনার সংগ্রহ করা ডেটার উপর প্রতিবেদন করা

আপনি কয়েকদিন ধরে কর্মক্ষমতা ডেটা সংগ্রহ করার পরে, আপনার সাইট এবং এর সংস্থানগুলি প্রকৃত ব্যবহারকারীদের জন্য কত দ্রুত লোড হয় সে সম্পর্কে পদক্ষেপযোগ্য অন্তর্দৃষ্টি পেতে আপনি সেই ডেটার উপর রিপোর্ট করতে সক্ষম হবেন।

Google Analytics-এ ইউজার টাইমিং রিপোর্ট পেতে, উপরে রিপোর্টিং ট্যাবে ক্লিক করুন এবং সাইডবার নেভিগেশন থেকে "আচরণ > সাইটের গতি > ব্যবহারকারীর সময়" নির্বাচন করুন (অথবা সহায়তা কেন্দ্র থেকে ব্যবহারকারীর সময় প্রতিবেদন দেখতে নির্দেশাবলী অনুসরণ করুন) .

আপনি যখন Google Analytics-এ ব্যবহারকারীর টাইমিং রিপোর্ট লোড করেন, তখন আপনি আপনার পাঠানো ডেটার সাথে সামঞ্জস্যপূর্ণ সময় বিভাগগুলি দেখতে সক্ষম হবেন। আপনার টাইমিং ডেটার বিস্তারিত ভিজ্যুয়ালাইজেশন দেখতে সেগুলির যেকোনো একটিতে ক্লিক করুন। নিম্নলিখিত চিত্রটি গত 24 ঘন্টা ধরে Google ফন্ট ব্যবহার করে একটি বাস্তব ওয়েবসাইটে ফন্ট লোড সময়ের একটি উদাহরণ।

স্ক্রীন শট 2016-05-10 7.16.07 PM.png এ

অভিনন্দন! আপনি সফলভাবে এই কোড ল্যাব সম্পূর্ণ করেছেন। আপনি যদি আরও গভীরে যেতে চান তবে পরবর্তী বিভাগটি আপনাকে আরও বেশি অন্তর্দৃষ্টি পেতে এই কোডের উপরে কীভাবে তৈরি করা যায় তার জন্য কয়েকটি পরামর্শ দেবে।

এই কোড ল্যাবে কভার করা কর্মক্ষমতা মেট্রিক্স আপনার সাইট প্রকৃত ব্যবহারকারীদের জন্য কীভাবে লোড হয় তা পরিমাপ করার জন্য গুরুত্বপূর্ণ, কিন্তু সেগুলি কেবল শুরু। আপনি যদি পারফরম্যান্স অ্যানালিটিক্সের আরও গভীরে যেতে চান, তাহলে আরও মেট্রিক্স ট্র্যাক করা সহজ হবে।

এই কোড ল্যাবে আপনি ব্যবহারকারীর কাছে কখন সংস্থান উপলব্ধ ছিল তার সাথে সম্পর্কিত মেট্রিক্স ট্র্যাক করেছেন৷ আপনি যদি চান, আপনি এইগুলির বেশিরভাগকে আরও ভেঙে ফেলতে পারেন। উদাহরণস্বরূপ, জাভাস্ক্রিপ্ট কখন কার্যকর করা শেষ করেছে তা পরিমাপ করার পরিবর্তে, আপনি কখন এটি লোড হওয়া শুরু করেছে, কখন এটি লোড করা শেষ হয়েছে, কখন এটি কার্যকর করা শুরু করেছে এবং অবশেষে কখন এটি কার্যকর করা শেষ হয়েছে তা পরিমাপ করতে পারেন। এই মেট্রিকগুলির প্রত্যেকটি এমন একটি সমস্যা উন্মোচন করতে পারে যা তাদের মধ্যে একজন বলতে পারে না।

আরও দানাদার হওয়ার পাশাপাশি, আপনার সাধারণ কর্মক্ষমতা বিশ্লেষণ কৌশল সম্পর্কে আরও সম্পূর্ণভাবে চিন্তা করা উচিত। লক্ষ্য কি? সফলতা কি?

যখন এটি যেকোন ধরণের বিশ্লেষণের ক্ষেত্রে আসে, তখন আপনি সাধারণত কিছু ধরণের প্রশ্ন দিয়ে শুরু করতে চান এবং তারপর সেই প্রশ্নের উত্তর দেওয়ার জন্য ডেটা কীভাবে ব্যবহার করবেন তা বের করতে চান।

উদাহরণ স্বরূপ, নিচের প্রশ্নের তালিকাটি বিবেচনা করুন এবং এই কোড ল্যাবে আপনার অর্জিত জ্ঞান আপনি কীভাবে ব্যবহার করবেন তার উত্তর দেওয়ার জন্য বিশ্লেষণ ব্যবহার করুন:

  • আপনার ট্র্যাকিং মেট্রিক্সের মান কি সময়ের সাথে কমছে বা বাড়ছে?
  • কীভাবে পরিষেবা কর্মী বা স্থানীয় স্টোরেজের মাধ্যমে অফলাইন ক্যাশিং ব্যবহার আপনার সাইটের সামগ্রিক কর্মক্ষমতাকে প্রভাবিত করবে?
  • আপনার সম্পদ সর্বোত্তমভাবে লোড হচ্ছে? অর্থাৎ যখন রিসোর্স ডাউনলোড করা হয় এবং কখন এটি ব্যবহারের জন্য উপলব্ধ থাকে তার মধ্যে একটি বড় ব্যবধান আছে?
  • কর্মক্ষমতা এবং আপনি ট্র্যাক করছেন এমন অন্যান্য মেট্রিক্সের মধ্যে কোন সম্পর্ক আছে (যেমন সাইন আপ রেট, সাইটে সময়, কেনাকাটা ইত্যাদি)?

অবশেষে, আপনি যদি ওয়েব পারফরম্যান্স বা Google Analytics সম্পর্কে আরও জানতে চান, তাহলে আপনাকে শুরু করার জন্য এখানে কিছু দুর্দান্ত সংস্থান রয়েছে:

  • আপনাকে উচ্চ কার্যক্ষমতার ওয়েব সাইট তৈরি করতে সাহায্য করার জন্য টুল এবং তথ্য
    https://developers.google.com/speed/
  • গুগল অ্যানালিটিক্স প্ল্যাটফর্মের সুবিধা নিতে ডেভেলপারদের জন্য টুল এবং API
    https://developers.google.com/analytics/
  • অনলাইন কোর্স যা আপনাকে শেখায় কিভাবে Google Analytics পণ্য ব্যবহার করতে হয় (যে লোকেরা নিজে Google Analytics-এ কাজ করে তাদের দ্বারা শেখানো হয়।
    https://analyticsacademy.withgoogle.com/