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

Philip Walton

ব্যবহারকারী-কেন্দ্রিক মেট্রিক্স থাকার অনেক মূল্য রয়েছে যা আপনি যে কোনো ওয়েবসাইটে সার্বজনীনভাবে পরিমাপ করতে পারেন। এই মেট্রিক্স আপনাকে অনুমতি দেয়:

• বাস্তব ব্যবহারকারীরা সমগ্র ওয়েবে কীভাবে অভিজ্ঞতা লাভ করে তা বুঝুন।
• আপনার সাইটকে প্রতিযোগীর সাথে তুলনা করুন।
• কাস্টম কোড লেখার প্রয়োজন ছাড়াই আপনার অ্যানালিটিক্স টুলে দরকারী এবং কর্মযোগ্য ডেটা ট্র্যাক করুন।

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

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

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

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

ঐতিহাসিকভাবে ওয়েব ডেভেলপারদের পারফরম্যান্স পরিমাপ করার জন্য অনেক নিম্ন-স্তরের API ছিল না, এবং ফলস্বরূপ একটি সাইট ভাল পারফরম্যান্স করছে কিনা তা পরিমাপ করার জন্য তাদের হ্যাক অবলম্বন করতে হয়েছে।

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

কার্যকর কর্মক্ষমতা পরিমাপের প্রথম নিয়ম হল আপনার কর্মক্ষমতা পরিমাপের কৌশলগুলি নিজেরাই পারফরম্যান্সের সমস্যা সৃষ্টি করছে না তা নিশ্চিত করা। তাই আপনার সাইটে যে কোনো কাস্টম মেট্রিক পরিমাপ করার জন্য, সম্ভব হলে নিম্নলিখিত APIগুলির মধ্যে একটি ব্যবহার করা ভাল।

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

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

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

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

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'});

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

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

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

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

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

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

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

• getEntries()
• getEntriesByName()
• getEntriesByType()

যদিও এই APIগুলি এখনও সমর্থিত, তাদের ব্যবহারের সুপারিশ করা হয় না কারণ নতুন এন্ট্রি নির্গত হলে তারা আপনাকে শুনতে দেয় না। উপরন্তু, অনেক নতুন API (যেমন largest-contentful-paint ) 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');

While APIs like Date.now() or performance.now() give you similar abilities, the benefit of using the User Timing API is it integrates well with performance tooling. উদাহরণস্বরূপ, Chrome DevTools পারফরম্যান্স প্যানেলে ব্যবহারকারীর সময় পরিমাপকে কল্পনা করে এবং অনেক বিশ্লেষণ প্রদানকারীও আপনার করা যেকোনো পরিমাপ স্বয়ংক্রিয়ভাবে ট্র্যাক করবে এবং সময়কালের ডেটা তাদের বিশ্লেষণ ব্যাকএন্ডে পাঠাবে।

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

// 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 to be dispatched.
po.observe({type: 'measure', buffered: true});

লং টাস্ক API

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

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

দীর্ঘ কাজগুলি কখন ঘটবে তা নির্ধারণ করতে, আপনি PerformanceObserver ব্যবহার করতে পারেন এবং longtask ধরনের এন্ট্রি পর্যবেক্ষণ করতে নিবন্ধন করতে পারেন:

// 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});

দীর্ঘ অ্যানিমেশন ফ্রেম API

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

দীর্ঘ ফ্রেম কখন ঘটবে তা নির্ধারণ করতে, আপনি PerformanceObserver ব্যবহার করতে পারেন এবং long-animation-frame ধরনের এন্ট্রি পর্যবেক্ষণ করতে নিবন্ধন করতে পারেন:

// 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 `long-animation-frame` entries to be dispatched.
po.observe({type: 'long-animation-frame', buffered: true});

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

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

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

<img elementtiming="hero-image" />
<p elementtiming="important-paragraph">This is text I care about.</p>
<!-- ... -->

<script>
  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});
</script>

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

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

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

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

নিম্নোক্ত উদাহরণ দেখায় কিভাবে কাস্টম পরিমাপ তৈরি করতে এই মানগুলি ব্যবহার করতে হয়:

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 presentationDelay = entry.startTime + entry.duration - entry.processingEnd;
    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 processing time (ms): ${processingTime}`);
    console.log(`Presentation delay (ms): ${presentationDelay}`);
    console.log(`Total event duration (ms): ${duration}`);
    console.log(`Event type: ${eventType}`);
    console.log(target);
  });
});

// A durationThreshold of 16ms is necessary to include more
// interactions, since the default is 104ms. The minimum
// durationThreshold is 16ms.
po.observe({type: 'event', buffered: true, durationThreshold: 16});

রিসোর্স টাইমিং এপিআই

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

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

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

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

// 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(entry.name, entry.transferSize === 0);
  }
});

// Start listening for `resource` entries to be dispatched.
po.observe({type: 'resource', buffered: true});

নেভিগেশন টাইমিং API

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

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

// 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});

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

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

// 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});

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

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

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

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

HTTP/1.1 200 OK

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

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

// 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});