কাস্টম মেট্রিক্স

ফিলিপ ওয়ালটন

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

কাস্টম মেট্রিক্স আপনাকে আপনার সাইটের অভিজ্ঞতার দিকগুলি পরিমাপ করতে দেয় যা শুধুমাত্র আপনার সাইটে প্রযোজ্য হতে পারে, যেমন:

  • একটি একক-পৃষ্ঠার অ্যাপ (SPA) এক "পৃষ্ঠা" থেকে অন্য "পৃষ্ঠায়" রূপান্তর করতে কতক্ষণ সময় নেয়।
  • লগ ইন করা ব্যবহারকারীদের জন্য একটি ডাটাবেস থেকে আনা ডেটা প্রদর্শন করতে একটি পৃষ্ঠার জন্য কতক্ষণ সময় লাগে৷
  • একটি সার্ভার-সাইড-রেন্ডারড (SSR) অ্যাপ হাইড্রেট হতে কতক্ষণ সময় নেয়।
  • রিটার্নিং দর্শকদের দ্বারা লোড করা সম্পদের জন্য ক্যাশে হিট রেট।
  • একটি গেমে ক্লিক বা কীবোর্ড ইভেন্টের ইভেন্ট লেটেন্সি।

কাস্টম মেট্রিক্স পরিমাপ করতে APIs

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

যাইহোক, এই ধরনের হ্যাকগুলি আপনার সাইটের কর্মক্ষমতা প্রভাবিত করতে পারে, উদাহরণস্বরূপ ডিভাইসের ব্যাটারি নিষ্কাশন করে৷ যদি আপনার কর্মক্ষমতা পরিমাপের কৌশলগুলি নিজেরাই পারফরম্যান্সের সমস্যা সৃষ্টি করে, তাহলে আপনি তাদের থেকে যে ডেটা পাবেন তা সঠিক হবে না। অতএব, আমরা কাস্টম মেট্রিক্স তৈরি করার জন্য নিম্নলিখিত APIগুলির মধ্যে একটি ব্যবহার করার পরামর্শ দিই।

কর্মক্ষমতা পর্যবেক্ষক API

ব্রাউজার সমর্থন

  • 52
  • 79
  • 57
  • 11

উৎস

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

আপনি পারফরম্যান্স-সম্পর্কিত ইভেন্টগুলিতে নিষ্ক্রিয়ভাবে সদস্যতা নিতে PerformanceObserver ব্যবহার করতে পারেন। এটি নিষ্ক্রিয় সময়কালে API কলব্যাকগুলিকে ফায়ার করার অনুমতি দেয়, যার মানে তারা সাধারণত পৃষ্ঠার কর্মক্ষমতাতে হস্তক্ষেপ করবে না৷

একটি PerformanceObserver তৈরি করার সময়, এটিকে একটি কলব্যাক পাস করুন যা যখনই নতুন কর্মক্ষমতা এন্ট্রি পাঠানো হয় তখন চলে। তারপর পর্যবেক্ষককে কী ধরনের এন্ট্রি শুনতে হবে তা বলতে observe() পদ্ধতি ব্যবহার করুন:

// Catch errors that some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Log the entry and all associated details.
      console.log(entry.toJSON());
    }
  });

  po.observe({type: 'some-entry-type'});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

নিম্নলিখিত বিভাগে আপনি পর্যবেক্ষণ করতে পারেন সব এন্ট্রি ধরনের তালিকা. নতুন ব্রাউজারে, আপনি স্ট্যাটিক PerformanceObserver.supportedEntryTypes বৈশিষ্ট্য ব্যবহার করে কোন ধরনের এন্ট্রি উপলব্ধ রয়েছে তাও পরীক্ষা করতে পারেন।

ইতিমধ্যে ঘটেছে যে এন্ট্রি পর্যবেক্ষণ

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

ঐতিহাসিক এন্ট্রি পেতে, buffered পতাকা true সেট করে observe । ব্রাউজারটি তার পারফরম্যান্স এন্ট্রি বাফার থেকে ঐতিহাসিক এন্ট্রি অন্তর্ভুক্ত করে যখন প্রথমবার আপনার PerformanceObserver কলব্যাক কল করা হয়।

po.observe({
  type: 'some-entry-type',
  buffered: true,
});

উত্তরাধিকার কর্মক্ষমতা API এড়ানোর জন্য

পারফরম্যান্স অবজারভার API-এর আগে, বিকাশকারীরা performance অবজেক্টে সংজ্ঞায়িত নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করে পারফরম্যান্স এন্ট্রিগুলি অ্যাক্সেস করতে পারে। আমরা তাদের ব্যবহার করার পরামর্শ দিই না কারণ তারা আপনাকে নতুন এন্ট্রি শুনতে দেয় না।

উপরন্তু, অনেক নতুন API (যেমন লং টাস্ক) performance অবজেক্ট দ্বারা প্রকাশ করা হয় না, শুধুমাত্র PerformanceObserver দ্বারা। অতএব, যদি না আপনার বিশেষভাবে ইন্টারনেট এক্সপ্লোরার সামঞ্জস্যের প্রয়োজন হয়, আপনার কোডে এই পদ্ধতিগুলি এড়িয়ে চলা এবং PerformanceObserver ব্যবহার করা ভাল।

ব্যবহারকারীর সময় API

ইউজার টাইমিং API হল সময়-ভিত্তিক মেট্রিক্সের জন্য একটি সাধারণ-উদ্দেশ্য পরিমাপ API। এটি আপনাকে নির্বিচারে সময়ে পয়েন্টগুলি চিহ্নিত করতে দেয় এবং তারপরে সেই চিহ্নগুলির মধ্যে সময়কাল পরিমাপ করতে দেয়।

// Record the time immediately before running a task.
performance.mark('myTask:start');
await doMyTask();

// Record the time immediately after running a task.
performance.mark('myTask:end');

// Measure the delta between the start and end of the task
performance.measure('myTask', 'myTask:start', 'myTask:end');

যদিও Date.now() বা performance.now() এর মতো APIগুলি আপনাকে একই রকম ক্ষমতা দেয়, ব্যবহারকারীর সময় API পারফরম্যান্স টুলিংয়ের সাথে আরও ভালভাবে সমন্বিত। উদাহরণস্বরূপ, Chrome DevTools পারফরম্যান্স প্যানেলে ব্যবহারকারীর সময় পরিমাপ কল্পনা করে এবং অনেক বিশ্লেষণ প্রদানকারী স্বয়ংক্রিয়ভাবে আপনার করা যেকোনো পরিমাপ ট্র্যাক করে এবং সময়কালের ডেটা তাদের বিশ্লেষণ ব্যাকএন্ডে পাঠায়।

ব্যবহারকারীর টাইমিং পরিমাপের রিপোর্ট করতে, measure প্রকারের এন্ট্রি পর্যবেক্ষণ করতে একটি পারফরম্যান্স অবজারভার নিবন্ধন করুন:

// Catch errors some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Log the entry and all associated details.
      console.log(entry.toJSON());
    }
  });

  // Start listening for `measure` entries.
  po.observe({type: 'measure', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

লং টাস্ক API

ব্রাউজার সমর্থন

  • 58
  • 79
  • এক্স
  • এক্স

উৎস

ফ্রেম রেট বা ইনপুট লেটেন্সি প্রভাবিত করার জন্য ব্রাউজারের প্রধান থ্রেডটি দীর্ঘ সময়ের জন্য ব্লক করা হলে তা নির্ধারণের জন্য লং টাস্ক API কার্যকর। এপিআই 50 মিলিসেকেন্ডের (এমএস) থেকে বেশি সময় ধরে চালানো যে কোনও কার্যের রিপোর্ট করে।

যেকোন সময় আপনাকে ব্যয়বহুল কোড চালানোর প্রয়োজন হয়, বা বড় স্ক্রিপ্ট লোড এবং চালানোর প্রয়োজন হয়, সেই কোডটি মূল থ্রেডকে ব্লক করে কিনা তা ট্র্যাক করা দরকারী। প্রকৃতপক্ষে, অনেক উচ্চ-স্তরের মেট্রিকগুলি লং টাস্ক API এর উপরে তৈরি করা হয়েছে (যেমন টাইম টু ইন্টারঅ্যাকটিভ (টিটিআই) এবং টোটাল ব্লকিং টাইম (টিবিটি) )।

দীর্ঘ কাজগুলি কখন ঘটবে তা নির্ধারণ করতে, longtask টাইপের এন্ট্রিগুলি পর্যবেক্ষণ করতে একটি পারফরম্যান্স অবজারভার নিবন্ধন করুন:

// Catch errors since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Log the entry and all associated details.
      console.log(entry.toJSON());
    }
  });
  // Start listening for `longtask` entries to be dispatched.
  po.observe({type: 'longtask', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

এলিমেন্ট টাইমিং এপিআই

ব্রাউজার সমর্থন

  • 77
  • 79
  • এক্স
  • এক্স

উৎস

আপনার পৃষ্ঠার সবচেয়ে বড় ছবি বা টেক্সট ব্লক কখন স্ক্রিনে আঁকা হয় তা জানার জন্য সবচেয়ে বড় কনটেন্টফুল পেইন্ট (LCP) মেট্রিকটি কার্যকর, কিন্তু কিছু ক্ষেত্রে, আপনি একটি ভিন্ন উপাদানের রেন্ডার সময় পরিমাপ করতে চান।

এই ক্ষেত্রে, এলিমেন্ট টাইমিং API ব্যবহার করুন। এলসিপি এপিআই আসলে এলিমেন্ট টাইমিং এপিআই-এর উপরে তৈরি করা হয়েছে এবং সবচেয়ে বড় কন্টেন্টফুল এলিমেন্টের স্বয়ংক্রিয় রিপোর্টিং যোগ করে, কিন্তু আপনি elementtiming অ্যাট্রিবিউটটি স্পষ্টভাবে যোগ করে এবং element এন্ট্রি টাইপ পর্যবেক্ষণ করতে পারফরম্যান্স অবজারভার রেজিস্টার করে অন্যান্য উপাদানের বিষয়ে রিপোর্ট করতে পারেন। .

<img elementtiming="hero-image" />
<p elementtiming="important-paragraph">This is text I care about.</p>
...
<script>
// Catch errors since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      // Log the entry and all associated details.
      console.log(entry.toJSON());
    }
  });
  // Start listening for `element` entries to be dispatched.
  po.observe({type: 'element', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}
</script>

ইভেন্ট টাইমিং API

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

INP মেট্রিক ইভেন্ট টাইমিং API দ্বারা সম্ভব হয়েছে। এই API ইভেন্ট লাইফসাইকেলের সময় ঘটে এমন অনেকগুলি টাইমস্ট্যাম্প প্রকাশ করে, যার মধ্যে রয়েছে:

  • startTime : ব্রাউজার ইভেন্ট গ্রহণ করার সময়।
  • processingStart : যে সময় ব্রাউজার ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার প্রক্রিয়াকরণ শুরু করতে পারে।
  • processingEnd : যখন ব্রাউজার এই ইভেন্টের জন্য ইভেন্ট হ্যান্ডলারদের থেকে শুরু করা সমস্ত সিঙ্ক্রোনাস কোড কার্যকর করা শেষ করে।
  • duration : ব্রাউজার যখন ইভেন্টটি গ্রহণ করে তখন পর্যন্ত সময় (নিরাপত্তার কারণে 8 ms এ বৃত্তাকার) যতক্ষণ না এটি ইভেন্ট হ্যান্ডলারদের থেকে শুরু করা সমস্ত সিঙ্ক্রোনাস কোড কার্যকর করার পরে পরবর্তী ফ্রেমটি আঁকতে সক্ষম হয়।

একটি পৃষ্ঠার সাথে করা প্রতিটি ইন্টারঅ্যাকশনের বিচ্ছিন্ন অংশ পরিমাপ করতে এই টাইমস্ট্যাম্পগুলি ব্যবহার করা সম্ভব, বা এমনকি নির্দিষ্ট ইন্টারঅ্যাকশনগুলি যা আপনার ব্যবহারকারীদের জন্য উচ্চ মূল্যের হতে পারে।

নিম্নলিখিত কোড স্নিপেট দেখায় কিভাবে আপনি পৃষ্ঠায় ঘটে যাওয়া প্রতিটি ইন্টারঅ্যাকশনের জন্য দরকারী ডেটার বিভিন্ন বিট পেতে পারেন:

// Catch errors some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  const po = new PerformanceObserver((entryList) => {
    // Get the last interaction observed:
    const entries = Array.from(entryList.getEntries()).forEach((entry) => {
      // Get various bits of interaction data:
      const inputDelay = entry.processingStart - entry.startTime;
      const processingTime = entry.processingEnd - entry.processingStart;
      const duration = entry.duration;
      const eventType = entry.name;
      const target = entry.target || "(not set)"

      console.log("----- INTERACTION -----");
      console.log(`Input delay (ms): ${inputDelay}`);
      console.log(`Event handler time (ms): ${processingTime}`);
      console.log(`Total event duration (ms): ${duration}`);
      console.log(`Event type: ${eventType}`);
      console.log(target);
    });
  });

  // A durationThreshold of 16ms is necessary to surface more
  // interactions, since the default is 104ms. The minimum
  // durationThreshold is 16ms.
  po.observe({type: 'event', buffered: true, durationThreshold: 16});
} catch (error) {
  // Do nothing if the browser doesn't support this API.
}

রিসোর্স টাইমিং API

রিসোর্স টাইমিং এপিআই ডেভেলপারদের একটি নির্দিষ্ট পৃষ্ঠার জন্য রিসোর্স কিভাবে লোড করা হয়েছিল তার বিস্তারিত অন্তর্দৃষ্টি দেয়। API-এর নাম থাকা সত্ত্বেও, এটি যে তথ্য সরবরাহ করে তা শুধুমাত্র টাইমিং ডেটার মধ্যে সীমাবদ্ধ নয় (যদিও প্রচুর পরিমাণে আছে)। আপনি অ্যাক্সেস করতে পারেন এমন অন্যান্য ডেটা অন্তর্ভুক্ত:

  • initiatorType : কিভাবে সম্পদ আনা হয়েছে, যেমন একটি <script> বা <link> ট্যাগ থেকে, অথবা fetch() থেকে।
  • nextHopProtocol : সম্পদ আনার জন্য ব্যবহৃত প্রোটোকল, যেমন h2 বা quic ।
  • encodedBodySize এবং decodedBodySize ]: সম্পদের আকার তার এনকোড বা ডিকোড আকারে (যথাক্রমে)।
  • ট্রান্সফার সাইজ : সম্পদের আকার যা আসলে নেটওয়ার্কে স্থানান্তরিত হয়েছিল। যখন ক্যাশে ব্যবহার করে সংস্থানগুলি পূরণ করা হয়, তখন এই মানটি encodedBodySize চেয়ে অনেক ছোট হতে পারে এবং কিছু ক্ষেত্রে এটি শূন্য হতে পারে, যদি কোনও ক্যাশে পুনর্বিবেচনার প্রয়োজন না হয়৷

আপনি ক্যাশে হিট রেট মেট্রিক বা মোট ক্যাশে করা রিসোর্স সাইজ মেট্রিক পরিমাপ করতে রিসোর্স টাইমিং এন্ট্রির transferSize সাইজ প্রপার্টি ব্যবহার করতে পারেন, যা আপনার রিসোর্স ক্যাশিং কৌশল কীভাবে পুনরাবৃত্তি দর্শকদের জন্য কর্মক্ষমতাকে প্রভাবিত করে তা বোঝার জন্য উপযোগী হতে পারে।

নিম্নলিখিত উদাহরণটি পৃষ্ঠার অনুরোধ করা সমস্ত সংস্থান লগ করে এবং নির্দেশ করে যে প্রতিটি সংস্থান ক্যাশে ব্যবহার করে পূরণ করা হয়েছিল কিনা:

// Catch errors some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // If transferSize is 0, the resource was fulfilled via the cache.
      console.log(entry.name, entry.transferSize === 0);
    }
  });
  // Start listening for `resource` entries to be dispatched.
  po.observe({type: 'resource', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

ব্রাউজার সমর্থন

  • 57
  • 12
  • 58
  • 15

উৎস

নেভিগেশন টাইমিং এপিআই রিসোর্স টাইমিং এপিআই-এর অনুরূপ, কিন্তু এটি শুধুমাত্র নেভিগেশন অনুরোধের রিপোর্ট করে। navigation এন্ট্রি টাইপটিও resource এন্ট্রি টাইপের অনুরূপ, তবে এতে শুধুমাত্র নেভিগেশন অনুরোধের জন্য নির্দিষ্ট কিছু অতিরিক্ত তথ্য রয়েছে (যেমন যখন DOMContentLoaded এবং load ইভেন্ট ফায়ার হয়)।

একটি মেট্রিক অনেক ডেভেলপার সার্ভার রেসপন্স টাইম বোঝার জন্য ট্র্যাক করে, টাইম টু ফার্স্ট বাইট (TTFB) , নেভিগেশন টাইমিং API-এ responseStart টাইমস্ট্যাম্পের মাধ্যমে উপলব্ধ।

// Catch errors since  browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // If transferSize is 0, the resource was fulfilled using the cache.
      console.log('Time to first byte', entry.responseStart);
    }
  });
  // Start listening for `navigation` entries to be dispatched.
  po.observe({type: 'navigation', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

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

entry.responseStart এবং entry.workerStart এর মধ্যে ডেল্টা থেকে একটি নির্দিষ্ট নেভিগেশন অনুরোধের জন্য পরিষেবা কর্মী স্টার্টআপ সময় নির্ধারণ করা যেতে পারে:

// Catch errors some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log('Service Worker startup time:',
          entry.responseStart - entry.workerStart);
    }
  });
  // Start listening for `navigation` entries to be dispatched.
  po.observe({type: 'navigation', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

সার্ভার টাইমিং API

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

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

আপনার প্রতিক্রিয়াগুলিতে সার্ভার টাইমিং ডেটা নির্দিষ্ট করতে, Server-Timing প্রতিক্রিয়া শিরোনাম ব্যবহার করুন। এখানে একটি উদাহরণ:

HTTP/1.1 200 OK

Server-Timing: miss, db;dur=53, app;dur=47.2

তারপর, আপনার পৃষ্ঠাগুলি থেকে, আপনি রিসোর্স টাইমিং এবং নেভিগেশন টাইমিং এপিআই থেকে resource বা navigation এন্ট্রি উভয়েই এই ডেটা পড়তে পারেন৷

// Catch errors some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // Logs all server timing data for this response
      console.log('Server Timing', entry.serverTiming);
    }
  });
  // Start listening for `navigation` entries to be dispatched.
  po.observe({type: 'navigation', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}